Unable to see components in the trace

[demon-sword]

I have created some components in the react native sample app. But I am not being able to find them in profiler. reproducer -> https://github.com/demon-sword/sampleAppProfiling

This is the App component

startProfiling()
function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <Component1 />
      <Button title={'StopProfiling'} onPress={() => {
        stopProfiling(true)
      }}/>
    </SafeAreaView>
  );
}

This is the profile that is generated by the produced by the package 

sampling-profiler-trace-1.cpuprofile.txt

As you can see in the image that there is only App component is available in the trace. Nothing About Component1 in the trace and there are some empty blocks in the trace as well.

The things I have tried -:

1. Class components
2. Functional Components
3. Exporting components by default
4. Adding displayNames to components
5. Tried with Arrow function components as well

Can you please help

[kirillzyusko]

The profiler is a sampling profiler, so if your function is executed within a short period of time (like <1ms) there is high chances that this function will not be included in a final report.

Can you add a code that blocks an execution of js thread for certain period of time (let's say 200ms) to your component (inside render) and check again?

const start = new Date().getTime();
while (new Date().getTime() - start < 200) {}

[hannojg]

Plus i think this example is also missing symbolication.