The app below uses react-native-material-bottom-navigation to create the Bottom Navigation tabs in our Android app with soft navigation keys:

Following the steps in “Behind the navigation bar”, we can see how to ‘remove’ (make transparent/translucent) the bottom navigation bar from our app:

Step 1. In order to make the System Navigation translucent, you have to add this to android/app/src/main/res/values/styles.xml:

<!-- Customize your theme here. -->

<item name="android:navigationBarColor">
  @android:color/transparent
</item>
<item name="android:windowTranslucentNavigation">
  true
</item>

Step 2. The System Navigation has a height of 48dp. The Bottom Navigation should be 56dp tall. This makes a total height of 104. Use innerStyle to push the tabs above the System Navigation without pushing the whole Bottom Navigation above it.

<BottomNavigation
  style={{ height: 104 }}
  innerStyle={{ paddingBottom: 48 }}
>

Step 3. You’re done!

What if my device has hard navigation keys?!

In this case, you’re going to be creating a height and applying padding to a space which doesn’t actually exist, leaving a 48hp high block bar below your navigation. The simple solution is to only apply the styles described in step 2 above if the device has soft keys.

The only real way to detect this is hooking to the Android SDK. This is actually super easy to do with React Native. We’re going to provide some constants back which JavaScript can read.

Creating the native module

In Android Studio, go ahead and open the following file:android/app/src/main/java/com/<< yourappname >>/MainApplication.java

Within our getPackages method, we’ll export a new package (which is automatically imported as we’re in the same directory where we’ll create it):

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new MyAppPackage()

Next create the package in: android/app/src/main/java/com/<< yourappname >>/MyAppPackage.java

Our package will export a module with the current React context (which allows us to hook into React Native stuff such as the current Android activity):

package com.yourappname;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;


public class MyAppPackage implements ReactPackage {

    public MyAppPackage() {
    }

    @Override
    public List<NativeModule>
    createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<NativeModule>();
        modules.add(new MyAppModule(reactContext));
        return modules;
    }

    @Override
    public List<ViewManager>
    createViewManagers(ReactApplicationContext reactApplicationContext) {
        return Collections.emptyList();
    }
}

MyAppModule is another java file which is automatically read from the current working directory. Our own package is now just exporting it for use.

Now go ahead and create the MyAppModule file: android/app/src/main/java/com/<< yourappname >>/MyAppModule.java

This file is the one React Native will pick up when we access our module from the JavaScript world. We can provide a getConstants method which returns a static type which can be read. In our case, we simply want a true/false value on whether the device has soft keys.

MyAppModule.java

First up we need to extend the a base class to provide us with the ability to create a module:

package com.yourappname;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;

public class MyAppModule extends ReactContextBaseJavaModule {

We need to now call the “constructor” (same as you would in a React class) and pass the React context to the ReactContextBaseJavaModule class using super:

public MyAppModule(ReactApplicationContext reactContext) {
    super(reactContext);
}

The next step provides React Native to access the module by name via NativeModules in JavaScript land. Lets go ahead and name our module:

@Override
public String getName() {
    return "MyAppModule";
}

We can now create our getConstants method, which will return whether we’ve got soft keys or not:

@Override
public Map<String, Object> getConstants() {
    Map<String, Object> constants = new HashMap<>();

    constants.put("has_soft_keys", hasSoftKeys());

    return constants;
}

Here we return a HashMap. Think of it as an Object with key/value pairs. Our key is has_soft_keys and the value is the result of calling the function hasSoftKeys which we’ll create now:

private boolean hasSoftKeys() {
    boolean hasSoftwareKeys;

    Activity activity = getCurrentActivity();

    if (activity == null) {
        return true;
    }

    WindowManager window = getCurrentActivity().getWindowManager();

    if(window != null && Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1){
        Display d = getCurrentActivity().getWindowManager().getDefaultDisplay();

        DisplayMetrics realDisplayMetrics = new DisplayMetrics();
        d.getRealMetrics(realDisplayMetrics);

        int realHeight = realDisplayMetrics.heightPixels;
        int realWidth = realDisplayMetrics.widthPixels;

        DisplayMetrics displayMetrics = new DisplayMetrics();
        d.getMetrics(displayMetrics);

        int displayHeight = displayMetrics.heightPixels;
        int displayWidth = displayMetrics.widthPixels;

        hasSoftwareKeys =  (realWidth - displayWidth) > 0 || (realHeight - displayHeight) > 0;
    } else {
        boolean hasMenuKey = ViewConfiguration.get(mContext).hasPermanentMenuKey();
        boolean hasBackKey = KeyCharacterMap.deviceHasKey(KeyEvent.KEYCODE_BACK);

        hasSoftwareKeys = !hasMenuKey && !hasBackKey;
    }

    return hasSoftwareKeys;
}

Don’t worry too much about what’s happening here-it’s just detecting whether we’re able to access certain APIs depending on the Android version and checks whether the soft keys are there using various checks.

Don’t forget to import the required classes at the top:

import java.util.HashMap;
import java.util.Map;

import android.os.Build;
import android.util.DisplayMetrics;
import android.view.Display;
import android.view.KeyCharacterMap;
import android.view.KeyEvent;
import android.view.ViewConfiguration;
import android.view.WindowManager;

Accessing our native module

Once you’ve recompiled your app, React Native provides access to our native modules using the NativeModules API. Lets go ahead and grab out the constants we’ve just created, and conditionally apply these to our component styles:

import { NativeModules } from 'react-native';
const hasSoftKeys = !!NativeModules.MyAppModule.has_soft_keys;

....

<BottomNavigation
  style={{ hasSoftKeys ? { height: 104 } : null }}
  innerStyle={{ hasSoftKeys ? { paddingBottom: 48 } : null }}
>

Sorted! We how will only apply the height and padding if there is soft keys on the device, otherwise it’ll sit the BottomNavigation directly at the bottom of the device screen.

To get started, we’ve made a starter app which is all setup and ready to go — simply clone/download it and follow the instructions in the README!

Building a TODO app with Cloud Firestore & RNFirebase

Lets go ahead and build a simple TODO app with Cloud Firestore & RNFirebase. Assuming you’ve used the starter app mentioned above or added react-native-firebase manually to an existing project (the docs are here), we can get started!

Create a new file Todos.js in the root of your React Native project and point your index.android.js / index.ios.js files to load it:

import { AppRegistry } from 'react-native';
import Todos from './Todos';

AppRegistry.registerComponent('RNFirebaseStarter', () => Todos);

Next setup a basic React class in Todos.js :

import React from 'react';

class Todos extends React.Component {
  render() {
    return null;
  }
}

export default Todos;

Creating your Cloud Firestore data structure

Cloud Firestore allows documents (objects of data) to be stored in collections (containers for your documents). Our TODO app will simply hold a list of todo documents within a single “todos” collection. Each document contains data specific to that todo — in our case title and complete properties.

The first step is to create a reference to the collection, which can be used throughout our component to query it. We’ll import react-native-firebase and create this reference in our component constructor.

import React from 'react';
import firebase from 'react-native-firebase';

class Todos extends React.Component {
  constructor() {
    super();
    this.ref = firebase.firestore().collection('todos');
  }
...

Building the UI

For blog readability, we’ll add the styles in-line however you should use StyleSheet for production apps.

The screenshots are from an Android emulator, however the following will also work in an iOS environment!

The UI will be simple: a scrollable list of todos, along with a text input to add new ones. Lets go ahead and build out our render method:

import { ScrollView, View, Text, TextInput, Button } from 'react-native';
...

render() {
  return (
    <View>
      <ScrollView>
        <Text>List of TODOs</Text>
      </ScrollView>
      <TextInput
        placeholder={'Add TODO'}
      />
      <Button
        title={'Add TODO'}
        disabled={true}
        onPress={() => {}}
      />
    </View>
  );
}

You should now see a dummy scrollview, a text input and a button which does nothing… something similar to the following:

We now need to hook the text input up to our local state so we can send the value to Cloud Firestore when the button is pressed.

Add the constructor default state:

constructor() {
    super();
    this.ref = firebase.firestore().collection('todos');
    this.state = {
        textInput: '',
    };
}

Add the method updateTextInput to update component state when the TextInput value updates:

updateTextInput(value) {
    this.setState({ textInput: value });
}

Hook up the TextInput to state and trigger a state update on text change:

<TextInput
    placeholder={'Add TODO'}
    value={this.state.textInput}
    onChangeText={(text) => this.updateTextInput(text)}
/>

Change the buttons disabled state based on the length of the text input value:

<Button
    title={'Add TODO'}
    disabled={!this.state.textInput.length}
    onPress={() => {}}
/>

Your app should now respond to text changes, with the value reflecting local state and your buttons disabled state:

Adding a new Document

To add a new document to the collection, we can call the add method on the collection reference. Lets hook our button up and add the todo!

Add a addTodo method:

addTodo() {
  this.ref.add({
    title: this.state.textInput,
    complete: false,
  });

  this.setState({
    textInput: '',
  });
}

Let the button trigger the method:

<Button
    title={'Add TODO'}
    disabled={!this.state.textInput.length}
    onPress={() => this.addTodo()}
/>

When our button is pressed, the new todo is sent to Cloud Firestore and added to the collection. We then reset the textInput component state. The add method is asynchronous and returns the DocumentReference from a Promise if required.

Make sure you have permission to add data to the collection on your Rules page!

Subscribing to collection updates

Even though we’re populating the collection, we still need to display the documents on our app. Cloud Firestore provides two methods; get() queries the collection once and onSnapshot() which gives updates in realtime when a document changes. For our TODO app, we’ll want realtime results. Lets go ahead and setup some more component state to handle the data.

Add a loading state and todos state to the component:

constructor() {
    super();
    this.ref = firebase.firestore().collection('todos');
    this.unsubscribe = null;

    this.state = {
        textInput: '',
        loading: true,
        todos: [],
    };
}

We need a loading state to indicate to the user that the first connection to Cloud Firestore hasn’t yet completed. We also added a unsubscribe class property which we’ll see the usage of next.

Subscribe to collection updates on component mount:

componentDidMount() {
    this.unsubscribe = this.ref.onSnapshot(this.onCollectionUpdate) 
}

componentWillUnmount() {
    this.unsubscribe();
}

onSnapshot returns an “unsubscriber” function to allow us to stop receiving updates, which we call when the component is about to unmount.

Implement the onCollectionUpdate method:

onCollectionUpdate = (querySnapshot) => {

}

Note: an arrow function (=>) is used here to ensure the onCollectionUpdate method is bound to the Todos component scope.

Iterate over the documents and populate state:

onCollectionUpdate = (querySnapshot) => {
  const todos = [];

  querySnapshot.forEach((doc) => {
    const { title, complete } = doc.data();

    todos.push({
      key: doc.id,
      doc, // DocumentSnapshot
      title,
      complete,
    });
  });

  this.setState({ 
    todos,
    loading: false,
 });
}

We use the snapshot forEach method to iterate over each DocumentSnapshot in the order they are stored on Cloud Firestore, and grab the documents unique ID (.id) and data (.data()). We also store the DocumentSnapshot in state to access it directly later.

Every time a document is created, deleted or modified on the collection, this method will trigger and update component state.

Rendering the todos

Now we have the todos loading into state, we need to render them. A ScrollView is not practical here as a list of TODOs with many items will cause performance issues when updating. Instead we’ll use a FlatList.

Handle loading state:

render() {
  if (this.state.loading) {
    return null; // or render a loading icon
  }

Render the todos in a FlatList using the todos state:

import { FlatList, Button, View, Text, TextInput } from 'react-native';

import Todo from './Todo'; // we'll create this next
...

render() {
  if (this.state.loading) {
    return null; // or render a loading icon
  }

  return (
    <View style={{ flex: 1 }}>
        <FlatList
          data={this.state.todos}
          renderItem={({ item }) => <Todo {...item} />}
        />
        <TextInput
            placeholder={'Add TODO'}
            value={this.state.textInput}
            onChangeText={(text) => this.updateTextInput(text)}
        />
        <Button
            title={'Add TODO'}
            disabled={!this.state.textInput.length}
            onPress={() => this.addTodo()}
        />
    </View>
  );
}

You may notice that we’ve got a Todo component rendering for each item. Below we’ll quickly create this as a PureComponent. This will provide huge performance boosts in our app as each row will only re-render when a prop (title or complete) changes.

Create a Todo.js file in the root of your project:

import React from 'react';
import { TouchableHighlight, View, Text } from 'react-native';

export default class Todo extends React.PureComponent {

    // toggle a todo as completed or not via update()
    toggleComplete() {
        this.props.doc.ref.update({
            complete: !this.props.complete,
        });
    }

    render() {
        return (
          <TouchableHighlight
            onPress={() => this.toggleComplete()}
          >
              <View style={{ flex: 1, height: 48, flexDirection: 'row', alignItems: 'center' }}>
                  <View style={{ flex: 8 }}>
                      <Text>{this.props.title}</Text>
                  </View>
                  <View style={{ flex: 2 }}>
                      {this.props.complete && (
                          <Text>COMPLETE</Text>
                      )}
                  </View>
              </View>
          </TouchableHighlight>
        );
    }
}

This component just renders out the title and whether the todo document is completed or not. It’s wrapped in a TouchableHighlight component, allowing us to make it a touchable row. When the row is pressed, we can grab the ref (DocumentReference) directly from the doc prop (DocumentSnapshot) and update it using the update method (which again is asynchronous if you wish to handle errors).

We can now toggle the todos completed state and not worry about local state as our onSnapshot subscription propagates the updates from Cloud Firestore back to our component in real time, awesome huh?!

You should see the following — realtime interaction with Cloud Firestore!

This is just a taster of what react-native-firebase and Cloud Firestore can do for your React Native applications. If you want to keep up to date, you can follow us here, on Twitter, over at the main GitHub repo or chat with us on Discord.

Thanks for reading! If you liked this story, please click the 👏 below so other people will see it on Medium (it really helps, otherwise it doesn’t get into others’ feeds). Sharing on Facebook and re-tweeting is appreciated too!

Getting started with Cloud Firestore on React Native was originally published in Invertase on Medium, where people are continuing the conversation by highlighting and responding to this story.