Navigate back to the homepage

Implement react native firebase crashlytics in ios

Infinitbility
Firebase, React Native
October 16th, 2021 · 1 min read
Implement react native firebase crashlytics in ios

Hello Friends 👋,

Welcome To Infinitbility! ❤️

This tutorial is part of React Native Firebase crashlytics Series.

React Native Firebase crashlytics In android
React Native Firebase crashlytics In iOS

This tutorial will help you to integrate react native firebase crashlytics in ios, and solve your some common issues will get in process of setup.

Let’s start today’s tutorial How to integrate firebase crashlytics in react native


Step 1: Setup Project in firebase console

Go To Firebase console -> Project Overview Tab

https://console.firebase.google.com/

Click on + Add App -> Select iOS Platform

Firebase will show you something like below image.

React Native, Firebase, crashlytics, Step One, Example

Setup application identification

  • Enter your app bundle id and App Name, click on Next button.
React Native, Firebase, crashlytics, Step two, Example

Setup GoogleServices info plist file

  1. Click on Download GoogleServices-info.plist button
  2. Open your project in xcode and select Files tab
  3. Right click on Project name and click on Add Files, select GoogleServices-info.plist Files
  • Check below image for referance
React Native, Firebase, crashlytics, Step Two, adding-google-services-plist

Add Firebase/Analytics package

  • open your project/ios/Podfile and add pod 'Firebase/Analytics'.
React Native, Firebase, crashlytics, Step three
  • find target 'ProjectName' do and add below pod code.
1# add the Firebase pod for Google Analytics
2pod 'Firebase/Analytics'

Firebase crashlytics configuration

React Native, Firebase, crashlytics, Step Four
  • Go to your ios/project/AppDelegate.m file and import firebase.
1#import <Firebase.h>
  • find function didFinishLaunchingWithOptions and below configuration code above return YES
1[FIRApp configure];

Enable crashlytics

  • Don’t forget to Enable your crashlytics
React Native, Firebase, crashlytics, Step Five

Firebase crashlytics installation

  • Install raect native firebase using yarn
1# Install & setup the app module
2yarn add @react-native-firebase/app
3
4# Install the Crashlytics module
5yarn add @react-native-firebase/crashlytics
  • Install raect native firebase using npm
1# Install & setup the app module
2npm install @react-native-firebase/app
3
4# Install the Crashlytics module
5npm install @react-native-firebase/crashlytics

Link firebase package, sometimes firebase create issue when not linked

1# link @react-native-firebase/app
2npx react-native link @react-native-firebase/app
3
4# link @react-native-firebase/crashlytics
5npx react-native link @react-native-firebase/crashlytics
  • install pod file
1cd ios && pod install

Now, Your react native firebase setup and installation Done and below steps is totatly depend on you want to follow or not.


Enable debug crash logs

when you want to test crashes on your debug mode. create firebase.json file on root level to project.

1// <project-root>/firebase.json
2{
3 "react-native": {
4 "crashlytics_debug_enabled": true
5 }
6}

Test crash in ios using xcode

First, create button and add crashlytics().crash() on onPress.

crashlytics().crash() Example

1import React, { useEffect } from 'react';
2import { View, Button } from 'react-native';
3import crashlytics from '@react-native-firebase/crashlytics';
4
5async function onSignIn(user) {
6 crashlytics().log('User signed in.');
7 await Promise.all([
8 crashlytics().setUserId(user.uid),
9 crashlytics().setAttribute('credits', String(user.credits)),
10 crashlytics().setAttributes({
11 role: 'admin',
12 followers: '13',
13 email: user.email,
14 username: user.username,
15 }),
16 ]);
17}
18
19export default function App() {
20 useEffect(() => {
21 crashlytics().log('App mounted.');
22 }, []);
23
24 return (
25 <View>
26 <Button
27 title="Sign In"
28 onPress={() =>
29 onSignIn({
30 uid: 'Aa0Bb1Cc2Dd3Ee4Ff5Gg6Hh7Ii8Jj9',
31 username: 'Joaquin Phoenix',
32 email: '[email protected]',
33 credits: 42,
34 })
35 }
36 />
37 <Button title="Test Crash" onPress={() => crashlytics().crash()} />
38 </View>
39 );
40}
  • Launch your application on simulator, or real devices
  • Click on Stop in xcode
  • open your application on simulator and click button where you write crash() code.
  • click on run in xcode and check firebase Analytics after 20 mins

Errors

In this Errors section, we will encounter some issues get on time of run and build.

GoogleService-Info.plist Error

when you are run your application and getting FirebaseApp.configure() could not find a valid GoogleService-Info.plist in your project.

when you are getting this Error, you are not added GoogleService-Info.plist properly in your project, you have to GoogleService-Info.plist from your xcode.

check this step Setup GoogleServices info plist file

Firebase configuration steup error

when you are getting this error no firebase app ' default ' has been created - call firebase.initializeapp() react native ios, it’s mean you are not adder firebase configuration line in AppDelegate.m file.

check this step Firebase crashlytics configuration

Looking for How to upload dSYMs in firebase crashlytics?

Thanks for reading…

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo

Tutorials

Categories

More articles from Infinitbility

How to solve react native firebase crashlytics generateDebugRFile failed issue?

How to solve react native firebase crashlytics generateDebugRFile failed issue?

Execution failed for task ':react-native-firebase_crashlytics:generateDebugRFile' solved

October 15th, 2021 · 1 min read
How to reverse an array in JavaScript?

How to reverse an array in JavaScript?

Example reverse an array in JavaScript

October 14th, 2021 · 1 min read
© 2020–2021 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]