How to add Analytics in a Bare React Native app (using React Native Firebase)

Many articles talk about adding analytics to React Native projects made with React Native CLI, but not as many explain how to do it in Expo's bare workflow.

When I started working with Expo, using it came with challenges like large native binary sizes and difficulty adding custom native code without (“ejecting”) leaving the Expo ecosystem.

But now, thanks to config plugins, we can make changes to native projects during prebuild, with the command npx expo prebuild.

Running npx expo prebuild sets up the Android and iOS folders for your React code. But be careful: if you change these folders manually, you might lose your changes next time you run this command.

That's why it's best to use config plugins when working in a bare workflow.

Now, if you have an expo bare workflow and you want to implement react native firebase analytics here’s what you have to do:

1. Add a new Firebase Project, I called mine TestProject

2. 

3. Make sure Enable Google Analytics for this project is selected and press Continue

   

4. Choose an existing account or create new one

   

5. Wait a few seconds and then press Continue

   

6. Add an iOS app

   

7. Apple bundle ID (Bundle Identifier) can be find Xcode, in the General tab under Identity, or in Signing & Capabilities tab

   

8. If your app is register on the app store, add the App Store ID, that can be found in your app's URL (https://itunes.apple.com/us/app/yourapp/id123456789) and looks sth like 123456789

9. Press Register and download GoogleService-Info.plist

10. 

11. Add the file at the app level root directory. After that, just press Next until you reach the end

12. Now we have to do the same for Android. So let’s go to project overview and add an Android app

    

13. Android Package Name can be found in android => app => src => main => java =>MainApplication or MainActivity, the first row in the file

    

14. If you want to add a nickname or an SHA-1 certificate, you can add them, otherwise leave those field blank

15. Press Register and download google-services.json file and add it in the same folder (root directory) as the file for iOS

    

16. Press Next until the end

17. Going back to our code editor install @react-native-firebase/app and @react-native-firebase/analytics

18. In the app.json and app.config.js file we will do the following: first, add the @react-native-firebase/analytics module to the plugins property

19. 

    Then, under the ios and android property add the path to the files we have previously added, like in the examples below

    

    

20. In the end, run npx expo prebuild command to recreate the iOS and Android folder.

21. To test if the installation worked correctly, run the builds on both iOS and Android devices and the data should appear on the Firebase console.

Good luck and let me know in the comments if you're facing any technical difficulties 🚀