React native App get stuck at launch screen after adding firebase crashlytics?

Viewed 580

I am working on React native App which is working fine. But when i import firebase crashlytics it stuck at launch screen if i remove it again app work fine?

As I am new to react i am not able to get root cause for this issue?

i am trying to import crashlytics in index.js as bellow

    //import '@react-native-firebase/crashlytics'
    or 
    //import {crashlytics} from '@react-native-firebase/crashlytics';
    or
    import crashlytics from '@react-native-firebase/crashlytics';

Please suggest root cause, solution or way to fix this issue. Please let me know if more info needed to understand this issue.

Thank you for helping.

app.js

import React from "react"
import { YellowBox } from 'react-native';
import { View } from 'react-native';
import { Root } from "native-base"
import UserInactivity from 'react-native-user-inactivity';

import { Provider } from 'mobx-react';
import SplashScreen from 'react-native-splash-screen';
import AppNavigatorRoot, { AppNavigationUtils } from "src/routers/navigations";
import store from 'src/store/';
import Loading from 'src/components/loading';
import Dialog from 'src/components/dialog';
import OAuthAPI from 'src/api/oauth';
import * as CoreConfig from 'src/config/config';
import HocErrorCatch from 'src/common/error';

index.js

import {AppRegistry} from 'react-native';
import App from './App';
// import {name as appName} from './app.json';
//import '@react-native-firebase/crashlytics'

//import {  } from '@react-native-firebase/crashlytics';
//import crashlytics from '@react-native-firebase/crashlytics';



AppRegistry.registerComponent("xyz", () => App);

error log

enter image description here

3 Answers

The way you are trying to import a package is not correct. You should be importing it like this

import crashlytics from '@react-native-firebase/crashlytics';

Then you can use crashlytics and log any event.

Here is the documentation link. Hope this will solve the issue.

After OP edited the question, this answer is no longer valid.

I don't think purely importing Crashlytics will have your app stuck at splash screen. I think you must have made some crashlytics call at splash screen, since you mentioned removing it will have the app work again.

I suppose you are using RNFirebase v6. Hence consider to doing the following:

import crashlytics from '@react-native-firebase/crashlytics';

componentDidMount(){
crashlytics().log('App started.');
}

The sample code above should work with no issue. For more info, you may refer here. Consider to check the version of your react-native-firebase/crashlytics at package.json as well. I have "@react-native-firebase/crashlytics": "^8.1.2", in my project.

I agree with this point TommyLeong made

I don't think purely importing Crashlytics will have your app stuck at splash screen


for quick fix install react-native-splash-screen
use this code inside App.js, it should solve the issue

     import SplashScreen from 'react-native-splash-screen';
    
    
    // inside useEffect or componentDidMount whichever you prefer
    componentDidMount() {
            // do stuff while splash screen is shown
            // After having done stuff (such as async tasks) hide the splash screen
            SplashScreen.hide();
    }
Related