Исключение в HostObject :: get (propName: RNfirebase)

Question

Я учусь, как реализовать Firestore с реагировать на натив (Android). Затем я нашел 'response-native-firebase' и застрял в этом исключении.

Error:Exception in
HostObject::get(propName:RNFirebase):
java.lang.NoClassDefFoundError: Failed resolution 
of: Lcom/google/firebase/FirebaseApp;

Я уже настроил firebase в своем Gradle (ref. https://firebase.google.com/docs/android/setup/?authuser=0)

Правило базы данных Firebase

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

и это мой обучающий код (ссылка https://www.youtube.com/watch?v=_GOI7h9ojr8)

import React,{ Component } from 'react';
import { 
    Flatlist, 
    Text,
    TextInput,
    TouchableHighlight, 
    Image,
    View } from 'react-native';
import firebase from 'react-native-firebase';

export default class test extends Component {
    constructor(props){
        super(props);
        this.state = ({
            todoTask: [],
            newTaskName: '',
            loading: false
        });
        this.ref = firebase.firestore().collection('todo');
    }
    onPressAdd = () => {
        this.ref.add({
            taskName: this.state.newTaskName
        }).then((data) => {
            console.log('added data = ${data}');
            this.setState({
                newTaskName: '',
                loading: true
            });
        }).catch((error) => {
            console.log('error adding firestore document = ${error}');
            this.setState({
                newTaskName: '',
                loading: true
            });
        });
    }
    render(){
        return (
            <View style={{flex: 1}}>
                <Text>Hello</Text>
                <TextInput style={{
                    height: 40,
                    width: 200,
                    margin: 10,
                    padding: 10,
                    borderColor: 'white',
                    borderWidth: 1,
                    color: 'white'
                }}
                    keyboardType='default'
                    placeholderTextColor='white'
                    placeholder='Enter task name'
                    onChangeText={
                        (text) => {
                            this.setState({ newTaskName: text});
                        }
                    }
                >
                </TextInput>
                <TouchableHighlight
                    style={{ marginRight: 10 }}
                    underlayColor='tomato'
                    onPress={this.onPressAdd}>
                    <Image
                        style={{ width: 35, height: 35 }}
                        source={require('./icon-add.png')}
                    >
                    </Image>
                </TouchableHighlight>
                <Flatlist
                    data={this.state.todoTask}
                    renderItem={({item, index}) => {
                        return(
                            <Text>{item.taskName}</Text>
                        );
                    }}
                >
                </Flatlist>
            </View>
        );
    }
}

Можете ли вы объяснить, почему это произошло? Большое спасибо.