Unable to use storybook with this component

[juliabpp]

We are using Storybook in our project to document the components we created for the app. After we installed this library storybook stopped working in the app.

Below is our App.tsx file, for some reason the fonts are never loaded and it stays forever on the AppLoading component. Both true and false values for renderDoc end up loading forever.

import React from 'react';

import { useFonts } from 'expo-font';
import { Inter_400Regular, Inter_600SemiBold } from '@expo-google-fonts/inter';

import AppLoading from 'expo-app-loading';
import { ThemeProvider } from 'styled-components';
import { appTheme } from './src/styles/theme';

import { StatusBar } from './src/components';
import { Routes } from './src/routes';
import Storybook from './storybook';

const renderDoc = false;

const App = () => {
  const [fontsLoaded] = useFonts({
    Inter_400Regular,
    Inter_600SemiBold,
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  }

  return (
    <ThemeProvider theme={appTheme}>
      {renderDoc ? (
        <Storybook />
      ) : (
        <>
          <StatusBar />
          <Routes />
        </>
      )}
    </ThemeProvider>
  );
};

export default App;

If we change it to this code below then it works to at least run the app.

return (
    <ThemeProvider theme={appTheme}>
          <StatusBar />
          <Routes />
    </ThemeProvider>
  );

If we keep the Storybook code and remove the loading verification then storybook runs but none of the components work because of an error with font loading.