Reactotron / Storybook set up guide #25297

hristo87 · 2023-12-21T17:53:27Z

hristo87
Dec 21, 2023

After thorough research, I could not find any good guide or explanation on how to make Reactotron work in conjunction with Storybook. Although the documentation is good, I still faced challenges making it run by following the provided instructions. Since I spent a decent amount of time trying to figure it out, I have finally succeeded and decided to share the solution with everyone who might need it in the future. As a prerequisite you need react native storybook installed and configured. So, let's get started:

First you need to properly configure Reactotron as described in the documentation with a bit of a twist:

import Reactotron, { trackGlobalErrors } from 'reactotron-react-native';
import { AsyncStorage } from '@react-native-async-storage/async-storage';

Reactotron.setAsyncStorageHandler(AsyncStorage)
  .use(trackGlobalErrors())
  .configure()
  .useReactNative({
    storybook: true,
  }) 
  .connect(); 

console.tron = Reactotron;

export default Reactotron;

As a second step, you need to import the config in the App.ts or index.js file, again as described in the documentation. However, here comes the tricky part. When using Hermes, it's essential to ensure that the Reactotron configuration is loaded synchronously. The import('./ReactotronConfig') statement might not be evaluated synchronously, leading to console.tron being undefined at the time it's accessed. So, here's how I fixed it (there is probably a more optimal way):

if (__DEV__) {
  const Reactotron = require('./ReactotronConfig').default;
  Reactotron.log('Reactotron Configured');
}

Here is the whole component:

import 'react-native-gesture-handler';
if (__DEV__) {
  const Reactotron = require('./ReactotronConfig').default;
  Reactotron.log('Reactotron Configured');
}
import React from 'react';
import { useColorScheme, SafeAreaView, StatusBar } from 'react-native';
import { Colors } from 'react-native/Libraries/NewAppScreen';
import { NavigationContainer } from '@react-navigation/native';
import { BottomTabNavigator } from './src/common/navigation/bottomTab/BottomTabNavigator';
import StorybookUIRoot from './.storybook';

const App = () => {
  const isDarkMode = useColorScheme() === 'dark';

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

  return (
    <NavigationContainer>
      <SafeAreaView style={backgroundStyle}>
        <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
        <BottomTabNavigator />
      </SafeAreaView>
    </NavigationContainer>
  );
};

export default console.tron.storybookSwitcher(StorybookUIRoot)(App);