At this point, we know how to create a fully-featured app with a custom interface. You even learned how to add a state management library to control shared data in our app so that the code base remains maintainable and scalable.
In this lesson, we will focus on building the app with a different state management library (Redux), using the camera capabilities, writing platform-specific code, and diving deeper into building a custom user interface, which is both appealing and usable. An image sharing app will serve as a good example for these features and also will set up the basis for understanding how big apps should be built on React Native.
We will reuse most of our code for the two platforms where this app will be available: iOS and Android. Although most of our user interface will be custom, we will use native-base to simplify UI elements as icons. For navigation, we will use react-navigation again as it provides the most commonly used navigation for each platform: tabbed navigation for iOS and drawer menu navigation for Android. Finally, we will use react-native-camera to handle the interaction with the device's camera. This will not only reduce implementation complexity but also will provide us with a large set of features for free that we could use to extend our app in the future.
For this app, we will mock up a number of API calls so that we don't need to build a backend. These calls should be easily replaced by real API when the time to build a connected app comes.
One of the main requirements when building an image sharing app is an appealing design. We will follow the design patterns for some of the most popular image sharing apps, adapting those patterns for each platform while trying to reuse as much code as possible taking advantage of React Native's cross-platform capabilities.
Let's first take a look at the user interface in iOS:
The main screen shows a simple header and a list of images, including the user picture, name, and a More icon to share the image. At the bottom, the tabbed navigation displays three icons representing the three main screens: All Images, My Images, and Camera.
When a user presses the More icon for a specific image, the Share menu will be displayed:
This is a standard iOS component. It doesn't make much sense to use it on a simulator, it can be better tested on an actual device.
Let's take a look at the second screen, My Images:
This is a grid representation of all the images uploaded by the current user, which can be updated by the next screen, Camera:
The iOS simulator doesn't include support for any camera, so this feature is again better tested on an actual device, although react-native-camera is fully usable and will return fake data when accessed. We will use a static image for testing purposes.
That's all for iOS; let's move now to the Android version:
As Android encourages drawer-based navigation instead of tabs, we will include a drawer menu icon in the header and will also make the camera available through a different icon.
As with the iOS Share menu, Android has its own controller, so we will take advantage of this feature and include it whenever a user taps on the More icon on a specific image:
When a user taps on the drawer menu icon, the menu will be displayed, revealing the three available screens. From here, the user can navigate to the My Images screen:
Finally, the camera screen will also be accessible through the drawer menu:
The Android Simulator includes a camera simulation consisting of a colored moving square, which can be used for testing. Instead, we will stick with the fixed image we used in the iOS version for consistency reasons.
We will be covering the following topics in this lesson:
- Redux in React Native
- Using the camera
- Platform-specific code
- Drawer and tabbed navigation
- Sharing data with other apps