-
-
Notifications
You must be signed in to change notification settings - Fork 152
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Infinite loading with Expo and React + Installation is not 100% automated #156
Comments
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
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. |
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 :
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 ! |
@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. |
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. 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 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. |
Is there someway to make this compatible with Anyway, glad that there's at least a workaround available, thank you @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. |
@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 :/ |
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. |
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 messageI 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
React Native
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
andnpx react-native init
with TypeScript template.System:
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 !
The text was updated successfully, but these errors were encountered: