Try changing the code in both files
At first in Fire.js
import firebase from 'firebase'; // 4.8.1 class Fire { constructor() { this.init(); this.observeAuth(); } init = () => { if (!firebase.apps.length) { firebase.initializeApp({ apiKey:'AIzaSyAPfes9_2EwZESX1puYMUv29yunzK9Ve5U', authDomain:'docman-31d96.firebaseapp.com', databaseURL: "https://docman-31d96.firebaseio.com", projectId: "docman-31d96", storageBucket: "docman-31d96.appspot.com", messagingSenderId: "649332068608", appId:'1:649332068608:android:08c080ee6a4e521f5323e5' }); } }; observeAuth = () => firebase.auth().onAuthStateChanged(this.onAuthStateChanged); onAuthStateChanged = user => { if (!user) { try { firebase.auth().signInAnonymously(); } catch ({ message }) { alert(message); } } }; get uid() { return (firebase.auth().currentUser || {}).uid; } get ref() { return firebase.database().ref('messages'); } parse = snapshot => { const { timestamp: numberStamp, text, user } = snapshot.val(); const { key: _id } = snapshot; const timestamp = new Date(numberStamp); const message = { _id, timestamp, text, user, }; return message; }; on = callback => this.ref .limitToLast(20) .on('child_added', snapshot => callback(this.parse(snapshot))); get timestamp() { return firebase.database.ServerValue.TIMESTAMP; } // send the message to the Backend send = messages => { for (let i = 0; i < messages.length; i++) { const { text, user } = messages[i]; const message = { text, user, timestamp: this.timestamp, }; this.append(message); } }; append = message => this.ref.push(message); // close the connection to the Backend off() { this.ref.off(); } } Fire.shared = new Fire(); export default Fire;
and then in ChatScreen.js
import * as React from 'react'; import { Platform , KeyboardAvoidingView,SafeAreaView } from 'react-native'; // @flow import { GiftedChat } from 'react-native-gifted-chat'; // 0.3.0 import Fire from '../fire'; type Props = { name?: string, }; class ChatScreen extends React.Component<Props> { static navigationOptions = ({ navigation }) => ({ title: (navigation.state.params || {}).name || 'Chat!', }); state = { messages: [], }; get user() { return { name: this.props.navigation.state.params.name, _id: Fire.shared.uid, }; } render() { const chat=<GiftedChat messages={this.state.messages} onSend={Fire.shared.send} user={this.user}/>; if(Platform.OS=='android'){ return( <KeyboardAvoidingView style={{flex:1}}behavior="padding" keyboardVerticalOffset={0} enabled> {chat} </KeyboardAvoidingView> ); } return<SafeAreaView style={{flex:1}}>{chat}</SafeAreaView>; } componentDidMount() { Fire.shared.on(message => this.setState(previousState => ({ messages: GiftedChat.append(previousState.messages, message), })) ); } componentWillUnmount() { Fire.shared.off(); } } export default ChatScreen;
This helped for me It should work for you too
To see my chat app just visit https://snack.expo.io/@habibishaikh1/chatapp
