Stuck at Splash Screen when trying to build React Native application with Storybook

Question

Not sure of the best way to describe the problem, but here goes nothing.

I recently initialized a React Native project and after adding Storybook to the project, I'm no longer able to get past the splash screen when building the application locally.

I can confirm that Storybook is the source of the issue, as I'm able to render the application if I comment out Storybook in my index.js file. Upon uncommenting it after that new render, Storybook works as expected.

Does anyone have any idea of what might be going on here? The only warning I'm seeing is the following:

WARN Starting Storybook v5.3.0, we require to manually pass an asyncStorage prop. Pass null to disable or use one from @react-native-community or react-native itself.

Any and all help appreciated!

Answer 1

Try the following in storybook/index.js :

// Hide the splashscreen
import SplashScreen from "react-native-splash-screen";
SplashScreen.hide();

Answer 2

I had the same problem and on

storybook/index.js

I added useEffect like this:

import {AppRegistry} from 'react-native';
import React, {useEffect} from 'react';

import {getStorybookUI, configure, addDecorator} from '@storybook/react-native';
import {withKnobs} from '@storybook/addon-knobs';
import RNBootSplash from 'react-native-bootsplash';

import './rn-addons';

addDecorator(withKnobs);

configure(() => {
    require('./stories');
}, module);

const StorybookUI = getStorybookUI({});

export default function StorybookUIRoot() {
    useEffect(() => {
        setInterval(() => {
            RNBootSplash.hide({fade: true});
        }, 1500);
    }, []);
    return <StorybookUI />;
}

AppRegistry.registerComponent('%APP_NAME%', () => StorybookUIRoot);