I’m new to React Native.
In a default expo app:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello World</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

What debugging options allow me to visualise detailed timeline of rendering process and in particlar how tap gestures and communication between Native and JavaScripts sides affect rendering.

A visualisation of a rendered frame’s lifecycle would be ideal.

(e.g. for other languages/renderers tracy is a useful tool. Is this the best option ? Instructions are for Android: what’s the equivalent on IOS ? Do I need to rely solely on XCode Profiler ?)

For React Native experts this maybe an easy recommendation for me to RTFM if you point me in the right spot. I mainly ask because I worry about the 3 different debuggers (Hermes Debugger (Expos)/ Flipper / New Debugger (Experimental). I’d like to avoid having to test every single one.

I’ve installed react-devtools, fb idb and Flipper.
I can see break points, but can’t seem easily go to from JS to native code (and back).
I can inspect elements, but can’t see a detailed view of how they’re rendered, how much time is spent on each element, etc.).

Ideally I can:

• use breakpoints in both native and js code
• see a visualisation of how a frame is painted (full breakdown of the process) (would one need to write native support for RenderDoc ?)