7

native developers. I have been developing and maintaining a react-native app for the past four years now. Now I have come to a point where I no longer know a way to debug my app. I am using recent versions of both react-native-reanimated and @react-native-firebase for stability and feature requirements. Both of these libraries have limitations on debugging.

react-native-reanimated uses Turbo Modules and breaks debugging react-native with chrome tools and the great react-native-debugger.

@react-native-firebase above v15.x now requires us to have use_frameworks! in our Podfile which breaks Flipper debugging.

Without these options for debugging, what is left? Is anyone in the same situation and has a solution to debug their react-native app and view their redux state?

I appreciate the help.

My current versions in my app:

"@react-native-firebase/app": "15.5.0",
"react": "18.1.0",
"react-native": "0.70.5",
"react-native-reanimated": "^2.13.0",
morganTrudeau
  • 81
  • 2
  • Same situation and I’ve scoured the internet and it seems like a lot of people are stuck – Lee Vaughn-Ogin May 13 '23 at 21:53
  • Are you using Expo? You might be able to use the built-in debugging, but it's probably broken by the same issue because it's very similar to Flipper debugging. – Slbox May 25 '23 at 20:31

2 Answers2

0

I've been facing this issue for a long time, the only thing I could do was to downgrade firebase to 14.x version. So you have to use a version of @react-native-firebase before v15.x which requires use_frameworks!. I would suggest trying version 14.5.0, which is the last minor version before 15.x. and the trade-off is not so big (so far). Let's hope, that before firebase introduces some breaking changes, the conflicting libraries will be optimised.

If you pick this approach:

  1. It's important to note that this is a workaround and not the ideal solution
  2. Remember to remove use_frameworks! from your podfile if you've added it previously
George Fean
  • 828
  • 10
  • 16
0

You can try debugging with Reactotron. It is a macOS, Windows, and Linux app for inspecting React JS and React Native apps.

Use it to:

  • view your application state
  • show API requests & responses
  • perform quick performance benchmarks
  • subscribe to parts of your application state
  • display messages similar to console.log
  • track global errors with source-mapped stack traces including saga stack traces!
  • dispatch actions like a government-run mind control experiment
  • hot swap your app's state using Redux or mobx-state-tree
  • track your sagas
  • show image overlay in React Native
  • track your Async Storage in React Native

You plug it into your app as a dev dependency so it adds nothing to your product builds.

Quick start for React Native

Thanhal P A
  • 4,097
  • 3
  • 18
  • 38