Overview

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: