在 React Native 上插入 Firebase

Question

I am new on React Native, and learn to create a simple CRUD App. I am using firebase as my storage, I follow a tutorial on this site ` but when I try on insert statement my react app only showing slow preloader when I hit insert button

Here is my code firebaseDb.js :

import * as firebase from 'firebase';
import firestore from 'firebase/firestore'

    const firebaseConfig = {
      apiKey: "MY KEY",
      authDomain: "MY DOMAIN",
      databaseURL: "MY DB URL",
      projectId: "MY PROJECT ID",
      storageBucket: "STORAGE BUCKET",
      messagingSenderId: "SENDER ID",
      appId: "APP ID",
      measurementId: "xxxxxxxxxxxxxxxxxxxxxxx"
    };
  firebase.database.enableLogging(true);
  firebase.initializeApp(firebaseConfig);
    firebase.firestore();

export default firebase;

and here is my source code on AddTodo.js file:

class AddTodo extends Component {

  constructor() {
    super();
    this.dbRef = firebase.firestore().collection('todo');
    this.state = {
      task: '',
      isLoading: false
    };
  }

  inputValueUpdate = (val, prop) => {
    const state = this.state;
    state[prop] = val;
    this.setState(state);
  }

  storeTodo(){
    if(this.state.task === ''){
      alert('task is required !')
    }
    else {
      console.log(this.state.task);
      this.setState({
          isLoading: true,
      });      
      this.dbRef.add({
        task: this.state.task,
      }).then((res) => {
        console.error(res);
          this.setState({
            task: '',
            isLoading: false,
          });
          this.props.navigation.navigate('TodoList')
      })
      .catch((err) => {
        console.error("Error found: ", err);
        this.setState({
          isLoading: false,
        });
      });
    }
  }

  render() {
    if(this.state.isLoading){
      return(
        <View style={styles.preloader}>
          <ActivityIndicator size="large" color="#9E9E9E"/>
        </View>
      )
    }

    return (
     <ScrollView style={styles.container}>
      <View style={styles.inputGroup}>
        <TextInput
          placeholder={'Task'}
          value={this.state.task}
          onChangeText={(val) => this.inputValueUpdate(val,'task')}
        />

        <Button
          onPress={() => this.storeTodo() }
          title="Tambah Task"
          color="#19AC52"
        />
      </View>


     </ScrollView>
    );
  }
}

Also, on my firebase console, I've change the rules read and write as TRUE already and that didn't affected.

and after the preload showed, there was an error message like this:

Setting a timer for a long period of time, ie multiple minutes, is a performance and correctness issue on Android as it keeps the timer module awake, and timers can only be called when the app is in the foreground. See https://github.com/facebook/react-native/issues/12981 for more info.

Something went wrong with my code and any idea to solve this error?

Answer 1

I had a similar issue couple of days ago, ended up using React Native Firebase library cause I was not able to connect to Firestore using official firebase npm module in react native.

Its important to say that this library is recommended by google as seen on this page . And works pretty well.

Answer 2

I stomped into this same warning recently, it's a bug between Firebase and React Native and it has been around since 2017

https://github.com/firebase/firebase-js-sdk/issues/97

Editing a parameter in a node-modules file fixes the warning ( https://github.com/firebase/firebase-js-sdk/issues/97#issuecomment-485410026 ) but it can have other problems associated and you have to make the same hotfix after each npm install.

I haven't tried React Native Firebase package, maybe it's a cleaner way to get rid of the problem.