Creating a tab navigator

The demo app will contain two screens. The first is to show users all the posts uploaded to Firestore, and the second screen is to allow users to upload their post. Each post will contain the image and its title.

Let’s implement these two screens in this step and display some mock data for now. Create a src/screens directory and inside it create two screen component files: Feed.js and AddPost.js .

Open the Feed.js file and add the following:

Next, open the AddPost.js file to add the following code snippet:

Next, create a new file named TabNavigator.js inside the src/navigation directory. Since the 4.x version of the react-navigation library, all navigation patterns are separated in their npm packages. Import the required libraries and both the screen components.

Add the following route config to create a simple tab bar.

Using react-navigation , routes are lazily initialized by default. This means any screen component is not mounted until it becomes active first.

To integrate this tab navigator, open the App.js file and modify it:

The tab bar displays the name of the active screen component in blue by default. Here’s the output:

Adding icons to the tab bar

Instead of displaying names for each screen, we’ll display the appropriate icons. We’ve already installed the icon library. Modify the App.js file to integrate icons from @ui-kitten/eva-icons , which can be configured using IconRegistery .

Do note that this library depends on react-native-svg , so you have to follow the instructions here on how to install that.

If you want to use a third party icons library such as react-native-vector-icons , you can learn more on how to integrate that here with UI Kitten.

Open the TabNavigator.js file and import the Icon component from UI Kitten.

Each route in the BottomTabNavigator has access to different properties via a navigationOptions object. To hide the label or the name of each screen and display an icon in place of, we return an Icon component on the tabBarIcon property inside navigationOptions .

When a specific route or the screen is focused, its icon color should appear darker than the other icons in the tab bar, just to indicate that it’s the active tab. This can be achieved using the prop focused on tabBarIcon .

Modify the tab navigator as follows:

To display an Icon from UI Kitten, it’s required to provide width and height attributes.

The createBottomTabNavigator accepts the second parameter as a config object to modify the whole tab bar rather than each route. tabBarOptions is an object with different properties, such as hiding the label of each route by setting the boolean value of showLabel to false.

Here’s the output:

Mocking data in a feed screen

In this section, we’ll create a simple UI for the feed screen that contains the image and its title. Open the Feed.js file and import the following libraries:

Let’s mock a DATA array with some static resources to display on the screen. Later, we’re going to fetch the data from Firestore.

The List from UI Kitten extends the basic FlatList from react-native to render a list of items. It accepts the same amount of props as a normal flat list component. In a real application, having a FlatList is useful instead of ScrollView when there’s a large number of data items in the list to render to the user.

We’ll come back to the style attribute in the next section. The data attribute accepts the value of a plain array, hence the mock DATA array. Using keyExtractor allows the list to extract a unique key for each item in the list that’s rendered. The renderItem attribute accepts what to display in the list, or how to render the data.

UI Kitten has a default ListItem component that can be used to display individual items. But to customize, let us create our own. Add the following inside the render method of the component but before the return statement:

Using high order functions to add styles

UI Kitten provides a theme-based design system that you can customize to your needs in the form of a JSON object. These theme variables help us create custom themes based on some initial values and support React Native style properties at the same time.

We have already imported withStyles HOC from UI Kitten. It accepts a component that can use the theme variables. In our case, the Feed component.

First, to identify the class component it accepts and the one it returns, edit the following line:

Add the following style when exporting the Feed component. These styles are in the prop style .

Here’s the output:

Add Firebase queries

Before proceeding with this section, please make sure you have successfully followed instructions to install and integrate the react-native-firebase library in your React Native app. Also, make sure that you’ve set up a Firebase app and have the right to access Firestore.

Create a utils/ directory in src and add a new file named Firebase.js . This file will contain two methods that will handle uploading an image with relevant post data to Firestore in a collection called posts .

The uuid package helps to create a unique identifier for each post to be uploaded.

The first method is to upload the image and its title.

The second method is used to fetch all the posts from the collection posts . The Feed component requires the Firebase query to fetch all posts with one request. Using querySnapshot.docs.map , you can fetch multiple documents at once from the Firestore database. Add the below snippet:

Using the Context API

Using the Context API, you can easily consume Firebase methods in the app without adding a state management library like Redux.

The most common reason to use the Context API in a React Native app is that you need to share some data in different places or components in the component tree. Manually passing props can be tedious as well as hard to keep track of.

Create a new file called utils/FirebaseContext.js . It will hold the snippet for creating the context and a high order function. The HoC will eliminate the need for importing and using Firebase.

Wrapping each component as a parameter to the HoC will provide access to Firebase queries (or the custom methods created in file Firebase.js ) as props.

Create a new file utils/index.js to export both the Firebase object from the Firebase.js file, the provider, and the HoC.