加载主页组件时崩溃本机反应

Question

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.

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.

Answer 1

SO I am in the EXACT same boat..

and the moment I removed the async componentDidMount and rebuilt my expo app... no crashing on iOS.

If you fixed this - please do share, as I just did this test and was able to avoid the app crashing by doing the above.