I have created an app using react native cli, when ever trying to access the home page component the app get crashes. Other pages like splash, login, register components are loading perfectly. But after login the Home doesnot loading.
The app is perfectly working in debug mode, but when I create an release APK it is crashing, I have tried both in emulator and android phone.
I have tried to check the error log using adb logcat *:E. You can check the error log attached below.
![ADb Logcat Error]()
Please check the code below,
package.json
{"name": "DoctorsBox","version": "0.0.1","private": true,"scripts": {"android": "react-native run-android","ios": "react-native run-ios","start": "react-native start","test": "jest","lint": "eslint ." },"dependencies": {"@fortawesome/fontawesome-svg-core": "^1.2.28","@fortawesome/free-solid-svg-icons": "^5.13.0","@fortawesome/react-native-fontawesome": "^0.2.3","@react-native-community/async-storage": "^1.9.0","@react-native-community/masked-view": "^0.1.7","@react-navigation/drawer": "^5.4.0","@react-navigation/material-top-tabs": "^5.1.7","@react-navigation/native": "^5.1.4","@react-navigation/stack": "^5.2.9","axios": "^0.19.2","firebase": "^7.13.2","lodash": "^4.17.15","moment": "^2.24.0","react": "16.11.0","react-native": "0.62.1","react-native-gesture-handler": "^1.6.1","react-native-gifted-chat": "^0.13.0","react-native-reanimated": "^1.7.1","react-native-safe-area-context": "^0.7.3","react-native-screens": "^2.4.0","react-native-svg": "^12.0.3","react-native-tab-view": "^2.13.0","react-redux": "^7.2.0","redux": "^4.0.5","redux-thunk": "^2.3.0" },"devDependencies": {"@babel/core": "7.9.0","@babel/runtime": "7.9.2","@react-native-community/eslint-config": "0.0.5","babel-jest": "24.9.0","eslint": "6.8.0","jest": "24.9.0","metro-react-native-babel-preset": "0.58.0","react-test-renderer": "16.11.0" },"jest": {"preset": "react-native" }}
Home.js
import React, { Component } from 'react';import {StyleSheet,View,Text,AsyncStorage} from 'react-native';import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';import ChatScreen from './ChatTab';const Tab = createMaterialTopTabNavigator();function HomeScreen() { return (<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>Home!</Text></View> );}function CallsScreen() { return (<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>Calls!</Text></View> );}export default class Home extends Component { constructor(props) { super(props); this.state = { refreshing: false, category: null }; } async componentDidMount() { let loginCategory = await AsyncStorage.getItem('SESS_CATEGORY'); await this.setState({category: loginCategory}); } render() { return (<View style={styles.container}><Tab.Navigator><Tab.Screen name="Home" component={HomeScreen} /><Tab.Screen name="Chats" component={ChatScreen} /><Tab.Screen name="Calls" component={CallsScreen} /></Tab.Navigator></View> ); }}
ChatTab.js
import React, { Component } from 'react';import {StyleSheet,View,Text,AsyncStorage,FlatList,TouchableOpacity} from 'react-native';import firebase from 'firebase';import moment from 'moment';let colors = ["#0d2c4f", "#76ac42", "#2a55a5", "#1975a9"];export default class ChatTab extends Component { constructor(props) { super(props); this.state = { id: null, loading: true }; } async componentDidMount() { let loginId = await AsyncStorage.getItem('SESS_ID'); this.setState({id: loginId}); this.fetchConversations(); } fetchConversations = () => { let messagesTemp = []; var ref = firebase.database().ref("Conversation"); ref.child(this.state.id).on("value", function(snapshot) { // console.log(snapshot.val()); snapshot.forEach(function(childSnapshot) { var key = childSnapshot.key; var name = snapshot.child(key +'/name').val(); var title = snapshot.child(key +'/title').val(); var to_id = snapshot.child(key +'/to_id').val(); var sender = snapshot.child(key +'/sender').val(); var receiver = snapshot.child(key +'/receiver').val(); var msg_text = snapshot.child(key +'/text').val(); var timestamp = snapshot.child(key +'/timeStamp').val(); messagesTemp.push({_key: key, _name: name, _title: title, _to_id: to_id, _sender: sender, _receiver: receiver, _msg: msg_text, _timestamp: timestamp}); }) }); this.setState({ messages: messagesTemp }); if (this.state.messages !== null) this.setState({ loading: false }); } startChat = (uid, id, name, title) => { this.props.navigation.navigate('Chat', {'to_uid': uid, 'to_id': id, 'chat_name': name, 'chat_title': title}); } render() { return (<View style={styles.container}><FlatList data={this.state.messages} showsVerticalScrollIndicator={false} renderItem={({ item, index }) => (<TouchableOpacity onPress={() => this.startChat(item._sender, item._to_id, item._name, item._title)}><View style={styles.singleList} key={item._key}><View style={[styles.viewCircle, [{backgroundColor: colors[index % colors.length]}]]}><Text style={styles.textCircle}>{item._name.charAt(0)}</Text></View><View style={{flex: 1, marginLeft: 10}}><Text style={styles.name}>{item._name}</Text><Text style={styles.title}>{item._msg}</Text></View><Text>{moment(item._timestamp).format('ddd hh:MM a')}</Text></View></TouchableOpacity> )} keyExtractor={item => item._key} ref={ref => this.flatList = ref} onContentSizeChange={() => this.flatList.scrollToEnd({animated: true})} /></View> ); }}
I am really stuck here. If someone got the idea it will be very helpfull.
