Build Your Own Photo and Video Sharing Application With the React Native Share UI Theme

  • the time-consuming process of designing the application.
  • researching solutions for front-end features.
  • losing valuable time spent on back-end development due to the above.

What Are the Application’s Stand-Out Features?

1. The design for the application is inspired by InVision’s clean, simple, and crips RELATE UI KIT.

A Clean and Simple UI KIT for Mobile

Our pre-build UI theme is for the most part inspired by InVision’s RELATE, a UI KIT that stands out with its flat UI, cheerful and light colours, and calm typography.

Flat UI design elements with crisp, cheerful colours
The RELATE Adobe XD templates are available for free on the InVisionApp platform.

Built Following React Architecture Best Practices

The code structure of our application follows programming principles that ensure the code quality meets accepted standards about best practices.

Components are grouped inside themed folders with a shared styles file

Routing with React Navigation v5

Transitioning between authentication and Main screens, creating tab bar components or displaying custom navigation bars, header titles and header buttons has become a lot easier with the latest release of the React Navigation library.

The app’s code base is full of code examples that showcase how to make full use of the capabilities of RNv5
  • different StackNavigators for different sections of the app, like authentication, the wizard, main screens, and popup screens.
  • authentication state, which includes checking for and securely storing authentication tokens as well as transitioning between Login or Signup screens and main app screens.
  • applying custom navigation bars. The application uses custom header components and navigation bar styles throughout, all being handled through the RNv5 API.

Achieving a Modern Look & Feel With Interactive Animations

Animations are very important to create a great user experience. However, getting animations exactly right can be very challenging. This is especially true when hooking up animations with actions created by user as they interact with the app.

Once you get the hang of it, animations are easy to create or modify.
  1. Init the animation with the useRef hook:
// useRefs help to make sure all animations are maintained 
// throughout the entire lifetime of the component.
// Without applying useRefs, animations get clunky and will not look // smooth
const containerScale = useRef(new Animated.Value(styles.$containerSmall)).current;
// Animations can be added 'on top of' existing component stylesconst containerStyles = [styles.container, {  transform: [{ scale: containerScale }],}];
// Perform the grow animation when TextInput goes into focus
// by setting the containerScale value to 1.15, the duration to
// 300ms
const setToActive = () => { Animated.timing(containerScale, { toValue: styles.$containerLarge, duration: ANIMATION_DURATION, }).start();};

Creating a Custom Camera View and Video Controls

The application is entirely built on the Expo open-source platform, the benefit of which is that for most of the functionalities of the application we can depend on Expo’s build-in SDK features. Among those are the Expo Camera and Expo Media Library.

The custom camera with modal support

Final Notes

The intention of this article was to provide some insight into the functionalities and decisions taken in developing this UI theme application.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store