Infinite loading with Expo and React + Installation is not 100% automated

[LeSerrurier]

Introduction

Hello everyone !

I have an issue for which I would need your support.

At first, with Expo i had the same issue than this one (React Native server stories list infinitely loading). Nothing has work for me. So i tried to bypass the problem.

Again with expo, i replaced the default export in App.tsx by export {default} from './storybook';. And it was working when i launched the Android emulator. But, it wasn't pratical. So i wanted to launch it by browser and i had the same issue than this one (react-native-web 0.12.0+ doesn't work with storybook due to deprecated components). Nothing has worked for me. I said to myself, i have the first issue because of the second issue because i am using expo. So i tried with React Native (RN).

Then, with RN, i had the sames issues too and nothing worked for me.

Finally, i followed the "get started" in the tutorial "Storybook for React Native tutorial" and it didn't work too.

Also, during i was writing this message, i noticed something. When i do npx sb init, with Expo and RN, i have the following message

I didn't correctly see the "installation is not 100% automated".
But the link is not very useful, i didn't found anything to help me.
I found also this issue (React Native is referenced, but related docs are missing), but i didn't understand the solution (if there is one) and why the issue has been closed. I tried ``sb upgrade` but it didn't solve the issue.

To Reproduce

I created two repo, one for Expo and another for RN.

Expo

1. Go to 'https://github.com/LeSerrurier/Storybook-Issue-Expo/tree/main'

React Native

1. Go to 'https://github.com/LeSerrurier/StorybookIssueReactNative/tree/main'

Next step
2. Clone the repo
3. Do npx sb init
4. Do npm run storybook

Expected behavior
I am excepting to have the true Storybook's interface, but i have infinite loading.

Code snippets
The code is just a simple project created by expo init and npx react-native init with TypeScript template.

System:

System:
    OS: Windows 10 10.0.19041
    CPU: (6) x64 Intel(R) Core(TM) i5-9400F CPU @ 2.90GHz
  Binaries:
    Node: 15.0.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 7.0.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 90.0.4430.72
    Edge: Spartan (44.19041.906.0), Chromium (90.0.818.42)
  npmPackages:
    @storybook/addon-actions: ^5.3 => 5.3.21
    @storybook/addon-knobs: ^5.3 => 5.3.21
    @storybook/addon-links: ^5.3 => 5.3.21
    @storybook/addon-ondevice-actions: ^5.3.23 => 5.3.23
    @storybook/addon-ondevice-knobs: ^5.3.25 => 5.3.25
    @storybook/react-native: ^5.3.25 => 5.3.25
    @storybook/react-native-server: ^5.3.23 => 5.3.23

Additional context
The title is may not very good.
I would highly appreciate your support on this subject as I am blocked in my work.

Thanks for reading me and thanks in advance for your help !

[dannyhw]

Hey I'm sorry you've had trouble with the documentation, I know that it is a bit lacking but I haven't gotten around to making all the improvements I would like to. I will take your feedback into consideration when working on it :).

To run storybook include the component that is given when you run getstorybookUI() into your app then run the app like a normal react native app

yarn start then yarn ios or yarn android.

The preview will then appear in the mobile device.

For more details see the readme on this repo.

Also the "Storybook for React Native tutorial" that you linked is outdated unfortunately so I wouldn't recommend following that.

[LeSerrurier]

Thanks for your reply !

Well, it's my fault, i should have highlighted it more in my message. I know and i can run storybook in the emulator :

Again with expo, i replaced the default export in App.tsx by export {default} from './storybook';. And it was working when i launched the Android emulator.

But it is very not pratical, i want to launch it in the browser.

OK for the "Storybook for React Native tutorial", thanks for noticing me !

[dannyhw]

@LeSerrurier if you want to see them on the web then use react native web to open as a web app.

The server UI does not show any preview because that's not what it's intended for. It's purpose is to provide a way to remotely control multiple devices.

[LeSerrurier]

But in your documentation it said :

So I understand it's possible to render Storybook with the server UI. Plus, in other issues, users reply like it was possible to render it with the server UI. Like here.

More, when i try to open as a web app with expo, i have this issue. And nothing has worked for me.

[dannyhw]

But in your documentation it said :

So I understand it's possible to render Storybook with the server UI. Plus, in other issues, users reply like it was possible to render it with the server UI. Like here.

More, when i try to open as a web app with expo, i have this issue. And nothing has worked for me.

Firstly the documentation you linked is for react storybook not for react native so it doesn't apply here.

Secondly I have 100% certainty that you cannot render it in the server UI because the code isn't there.
All it does is render PreviewHelp which is the text you see on screen.

For react native web to work currently you need to downgrade react-native-web to 11.7 until I can get v6.0 out with the relevant fixes.

[LeSerrurier]

1. Effectively, i think I got confused in my research ^^'

2. I went to read the issues and i misunderstand some things ^^''. I was thinking other people who used RN, used the server UI for render too, but no. Sorry

3. OK ! Thanks for yours replies !

[dannyhw]

@LeSerrurier thats ok I understand that its hard to find the information currently and I hope I can improve it soon. If you need any more help let me know :).

For now I will close this issue since it seems to be resolved. If you want to re-open it for any reason let me know.

[Myzel394]

Is there someway to make this compatible with scripts? To be honest, it's very inconvenient to manually add and remove export { default } from "./storybook" from your App.tsx whenever you change something. Why can't you simply run yarn storybook and your device starts StoryBook on your phone - and when you use yarn android / yarn ios you see your actual app?

Anyway, glad that there's at least a workaround available, thank you @dannyhw!

[dannyhw]

@Myzel394 the reason it doesn't launch like this is because the storybook UI in this case is just a component and doesn't ship with its own 'runtime' like how the web storybook works via its own web-pack server setup. The responsibility on how to render it is up to the user in this case which gives you flexibility on how to use it.

You can already make this happen in your app if you just add some extra scripting or by using multiple metro configs to define multiple entry points. In fact there are many ways you could do it. For example in the ignite cli they use the dev menu and reacto-tron to toggle it.

I agree though that it would be good to have a default way of doing it and documentation around it.

[Myzel394]

@dannyhw Do you have any recommendations on how to add this painlessly? I'm currently trying to do something along the way of:

import React, { ReactNode } from "react"
import App from "~/ui/App"
import StoryBookApp from "./storybook"

const getApp = (): ReactNode => {
	if (process.env.IS_STORYBOOK) {
		return StoryBookApp
	} else {
		return <App />
	}
}

export default getApp

However, that's not working, nor are conditional imports / exports working :/

[dannyhw]

It's much easier to use a config file like a env.json for example and have a value there for showStorybook.

Then you can import the JSON file in your project instead of using the process.env

You can then also update the value in the JSON with a simple node script if you want to update it automatically.

At least that's the way I found easiest. However I think using the Dev menu like how ignite does it is also pretty convenient.

I can provide some examples later if that's helpful.