Firebase is a Backend as a Service (BaaS) that provides an advantage to mobile developers who use React Native for developing mobile applications. As a React Native developer, by using Firebase you can start building an MVP (minimum viable product)

Getting Started

Firebase is a platform that got acquired by Google and has a healthy and active community. Most users in this community are web and mobile developers as Firebase can help with mobile analytics, push notification, crash reporting and out of the box provides email as well as social authentication.

Start implement firebase in react native 

• Creating New Project run this command

react-native init <Project-name>

• After then create a project add node package

npm install --save native-base react-native-elements react-native-gesture-handler react-navigation firebase

• After then install node package then run this command

react-native link

• After then Open  index.js  under Project folder and add this code.

import {AppRegistry} from 'react-native';
import App from './src/App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);

• After then src folder under ther project folder like "project-name/src/" and cut the App.js of the root folder and paste src folder
• After that add this code in App.js

import React, {Component} from 'react';
import { Root } from "native-base";
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Home from './screens/Home';
import AddItem from './screens/AddItem';
import List from './screens/List';
const AppNavigator = createStackNavigator(
    {
        Home,
        AddItem,
        List
    },
    {
        initialRouteName: 'Home'
    }
);
const AppContainer = createAppContainer(AppNavigator);
export default class App extends Component {
    render() {
        return <Root><AppContainer /></Root>;
    }
}

• After then create screens folder under the src folder and create a Home.js, AddItem.js,  and List.js  file then add code

Home.js

import React, { Component } from 'react';
import { Button, View, Text, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
    headline: {
        textAlign: 'center',
        fontWeight: 'bold',
        fontSize: 20,
        margin: 10,
        width: 200,
     },
});

export default class Home extends Component {
    render() {
        return (
            <View style={styles.width}>
                <Text style={styles.headline}>Firebase Database Add and List view</Text>
                <Button
                    title="Add an Item"
                    onPress={() => this.props.navigation.navigate('AddItem')}
                />
                <Button
                    title="List of Items"
                    color="green"
                    onPress={() => this.props.navigation.navigate('List')}
                />
            </View>
        );
    }
}

AddItem.js

import React, { Component } from 'react';
import {
    View,
    Text,
    TouchableHighlight,
    StyleSheet,
    TextInput,
    Alert
} from 'react-native';
import { db } from '../firebase/Firebase';
let addItem = item => {
    db.ref('/items').push({
        name: item
    });
};

export default class AddItem extends Component {
    state = {
        name: ''
    };
    handleChange = e => {
        this.setState({
            name: e.nativeEvent.text
        });
    };
    handleSubmit = () => {
        addItem(this.state.name);
        Alert.alert('Item saved successfully');
    };
    render() {
        return (
            <View style={styles.main}>
                <Text style={styles.title}>Add Item</Text>
                <TextInput style={styles.itemInput} onChange={this.handleChange} placeholder="Add Item name" />
                <TouchableHighlight
                    style={styles.button}
                    underlayColor="white"
                    onPress={this.handleSubmit}
                >
                    <Text style={styles.buttonText}>Add</Text>
                </TouchableHighlight>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    main: {
        flex: 1,
        padding: 30,
        flexDirection: 'column',
        justifyContent: 'center',
        backgroundColor: '#6565fc'
    },
    title: {
        marginBottom: 20,
        fontSize: 25,
        textAlign: 'center'
    },
    itemInput: {
        height: 50,
        padding: 4,
        marginRight: 5,
        fontSize: 23,
        borderWidth: 1,
        borderColor: 'white',
        borderRadius: 8,
        color: 'white'
    },

    buttonText: {
        fontSize: 18,
        color: '#111',
        alignSelf: 'center'
    },

    button: {
        height: 45,
        flexDirection: 'row',
        backgroundColor: 'white',
        borderColor: 'white',
        borderWidth: 1,
        borderRadius: 8,
        marginBottom: 10,
        marginTop: 10,
        alignSelf: 'stretch',
        justifyContent: 'center'
    }
});

List.js

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import ItemComponent from '../components/ItemComponent';
import { db } from '../firebase/Firebase';
let itemsRef = db.ref('/items');
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        backgroundColor: '#ebebeb'
    }
});

export default class List extends Component {
    state = {
        items: []
    };
    componentDidMount() {
        itemsRef.on('value', snapshot => {
            let data = snapshot.val();
            let items = Object.values(data);
            this.setState({ items });
        });
    }
    render() {
        return (
            <View style={styles.container}>
                {this.state.items.length > 0 ? (
                    <ItemComponent items={this.state.items} />
                ) : (
                    <Text>No items</Text>
                )}
            </View>
        );
    }
}

• After then create components folder under the src folder and create a ItemComponent.js file then add code

ItemComponent.js

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import PropTypes from './node_modules/prop-types';
export default class ItemComponent extends Component {
    static propTypes = {
        items: PropTypes.array.isRequired
    };
    render() {
        return (
            <View style={styles.itemsList}>
                {this.props.items.map((item, index) => {
                    return (
                        <View key={index}>
                            <Text style={styles.itemtext}>{item.name}</Text>
                        </View>
                    );
                })}
            </View>
        );
    }
}
const styles = StyleSheet.create({
    itemsList: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-around'
    },
    itemtext: {
        fontSize: 24,
        fontWeight: 'bold',
        textAlign: 'center'
    }
});

• After then create firebase folder under the src folder and create a Firebase.js file then add code

import Firebase from './node_modules/firebase';
let config = {
apiKey: "<apiKey>",
authDomain: "<authDomain>",
databaseURL: "<databaseURL>",
projectId: "<projectId>",
storageBucket: "<storageBucket>",
messagingSenderId: "<messagingSenderId>"
};
let app = Firebase.initializeApp(config);
export const db = app.database();

React native implement firebase Done.

Run command

react-native run-android
react-native run-ios

if you are change the App name then you delete android and ios folder of you project. After then run this command

 react-native eject

this command help to create android and ios folder with clean status
 

Thank you

Github link: https://github.com/Sudarshan101/React-native-firebase-boilerplate

Youtube : https://www.youtube.com/watch?v=GFeVuKcNv_s