Can't use overlay on react native

[aminos02]

Describe the bug

i have a simple react native app:

i have this config reactotron-config.js:

import AsyncStorage from '@react-native-async-storage/async-storage';
import Reactotron from 'reactotron-react-native';

Reactotron.configure({ name: 'Example App' })
  .setAsyncStorageHandler(AsyncStorage)
  .useReactNative({
    // Other configurations if necessary
    overlay: true,
    storybook: true,
  })
  .connect();

App.tsx:

import React from 'react';
import { AppRegistry, Text, View } from 'react-native';
import Reactotron, { overlay } from 'reactotron-react-native';

const App = () => {
  return (
    <View style={{ alignItems: 'center', flex: 1, justifyContent: 'center' }}>
      <Text>Hello</Text>
    </View>
  );
};

try {
  if (__DEV__) {
    // eslint-disable-next-line global-require
    require('../reactotron-config');
  }
  AppRegistry.registerComponent('Roshn SuperApp', () => overlay(App)); 
} catch {
  // eslint-disable-next-line no-console
  console.error('Error loading application');
}

i'm getting an error when i wrap my app with overlay : Type '{ onCommand: (command: any) => void; features: { overlay: (WrappedComponent: ComponentType<{}>) => (props?: Record<string, any> | undefined) => Element; }; }' is not assignable to type 'ReactNode'

and if i use Reactotron.overlay i get an issue that overlay doesn't exist , and to note the network monitoring is working for me but i should remove overlay wrapper.

Reactotron version

"reactotron-react-native": "^5.1.9"

[jamonholmgren]

I'm not sure if your issue is related, but #1544 should fix the overlay feature, so it's worth noting here.

[HessiPard]

reactotron-config.js

you must export your reactotron-config.js as ReactotronConfig for example, and import that to your App.tsx and call ReactotronConfig.overlay(App).