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
Does Storybook 6 supports React Native? #158
Comments
Not yet. We've created a new repo for RN and are in the process of upgrading it to work with SB6: https://github.com/storybookjs/react-native @dannyhw might be able to comment more on the current status! |
Phew its good to know you didn't drop the support 😀 Would be awesome to know the status. We are starting new RN project and I guess we need to use old Storybook for now. Thx man |
@mi5ha you can still use the react native storybook in it's current state however it doesn't support the 6.0 dependencies so if you use the addons then for the react native project you would need to use a 5.3.x version of @storybook/addons. See github.com/storybookjs/react-native to see the new repo and some documentation (improvements ongoing). I plan to start the work for react native 6.0 soon-ish but not sure how long that will take. |
@dannyhw Thank you Danny, I managed to install and run old Storybook version 5 with:
I used newest RN version with TypeScript support. I tried running Thanx a lot, will be following the progress of version 6 for RN with great interest 😀 |
I just followed the storybook.js.org guide for React and it created a |
@betoharres the react native storybook uses a folder without the "." just because of some historical reason and I'm not really sure what that reason is (the project was not created by me). You need a storybook/ folder for react native storybook only if you want to define web addons for the react-native-server otherwise it's not a requirement. For example where I work we use exclusively the ondeviceUI (no react-native-server) and we have no storybook/ folder. Another note related to the comment by @mi5ha above you can use |
@dannyhw what's the PR for the CLI? i could patch it back to 6.0 if the change is not too big. |
@shilman its this one storybookjs/storybook#12405 |
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks! |
I was doing good following the tutorial until it says to update https://storybook.js.org/tutorials/intro-to-storybook/react-native/en/get-started/ |
@TurtleWolfe the template from expo has changed since the tutorial was made. I made a new template in order to update the tutorial however I started work on 6.0 in the meantime. What kind of stuff would you want in the tutorial? I could try put something quick together with the basics if that would help. |
Really? That would be awesome, this is my repo for how far I got. I put my bash history in the README.MD and used the |
@TurtleWolfe in my opinion the focus of the current tutorial is wrong. It instructs the user to use react-native-web which currently doesn't work well with react native storybook. Also all the screenshots are taken from the reactjs (web) version of storybook and not the react native one. Until the tutorial is reworked I wouldn't consider it worth your time. You'd be better off following the getting started steps on the github repo https://github.com/storybookjs/react-native. However if you think a tutorial would be more helpful maybe we can discuss further either on the storybook discord in the react-native channel or feel free to create an issue in the react-native repo. |
ok, this is the ReadMe, Bash history, and a few screenshots when I started to go off the rails with confusion where I've tried to merge my understanding of the two tutorials. All I'm really trying to do is start with the Expo Two Tab template and then load the StoryBook UI into the second tab. https://github.com/TurtleWolfe/rnStoryBookexpo init --template tabs rnStoryBook --npm
cd rnStoryBook
git remote add origin https://github.com/TurtleWolfe/rnStoryBook.git
git push --set-upstream origin main # I'm assuming this is 5.3.25, not sure If I should pin the version soon.
npx -p @storybook/cli sb init --type react_native Inline-style:
npm i -D @storybook/addon-ondevice-actions
npm test
# npm storybook
npm run storybook
# npm run test
# npm web
npm run web
expo start
# npm run web
# sudo apt install subversion
# svn export https://github.com/chromaui/learnstorybook-code/branches/master/src/assets/icon assets/icon
# svn export https://github.com/google/fonts/trunk/ofl/nunitosans assets/font
# npm run web |
@TurtleWolfe just to let you know it might not work very well inside a tab, react native storybook's ui is generally designed to work full screen and has its own tab navigation. So when its inside a tab it looks weird, you'll see in the screenshot later in this comment. Other things you should consider: Start by creating the project and adding the storybook files
you'll be prompted about installing the server I choose "no" since I don't use it. at this point I would open the app just to make sure its working fine (storybook wont show yet). In this case I choose to start it in the android emulator but you can use ios too. If you want to use typescript you should probably rename /storybook/index.js to index.ts or you might get some typescript errors. Now replace the content in screens/TabTwoScreen.tsx with the following:
at this point it will look like this what you'll immediately notice is that it doesn't work well inside the tabbed navigation because storybook itself uses a tab navigation so you get double tabs However the next steps are up to you really so try these steps so far and then let me know what you want to do from there Just to give you an idea:
|
Any update on this @dannyhw ? the lack of Hooks support makes it very hard to sensibly use 5.0 |
@elisechant sorry I don't understand what you mean. Are you unable to use hooks? I don't think there should be anything stopping you. |
@dannyhw yes unable to use hooks with 5.3 without interventions as described here storybookjs/storybook#5721. I use the native install option not react-native-web, and currently have to use this decorator in my index.js:
Which has down stream implications with re-rendering, since the |
@elisechant OK, I wasn't aware of that. However I'm not sure what the fix was for this. The CSF syntax actually uses the storiesof function under the hood so it wouldn't change a lot. The thing about storiesOf returning an anonymous function I'm not sure is the issue here because wouldn't the function in .add("", ()=>{}) be the more important one? Either way version 6 for react native is ongoing but it's a lot of work, happy to accept contributions though ;). See #135 for updates on version 6. |
@dannyhw |
@TurtleWolfe in react navigation you can nest navigators. For example you could have the following setup
This way you can navigate to storybook from one of your app screens and there would be no tabs at the bottom of the screen when in the storybook screen. You would probably want to disable the stack navigator header that comes by default. |
There is no @storybook/react-native-server implemented for 6.0 yet, this version you installed is a very old version before I even started work on v6. Currently you can't use the server with this version of the alpha (6.0.1-alpha.1). I'm still deciding what to do with the server for v6. Did you follow the guide for using 6.0? I haven't worked on a migration guide yet though since this is a very early alpha build so a lot will probably change. |
Hi guys, any update on this? Can we use React-Native-Web and the Storybook v6+? I've found something in the Storybook v6.4 but I'm not sure if it's really work |
@velidan with the react native v6 beta you can use react native storybook and react-native-web storybook together. You can try it out with the expo template I made source for the template is here: https://github.com/dannyhw/expo-template-storybook Note: react native storybook won't yet work with 6.4, for now stick to 6.3 until a fix is ready for 6.4 |
Hey @dannyhw, is there any update to 'react-native-server' for storybook/react-native v6 beta? |
@Dhillon-Prabh unfortunately there is no update on that, I see it as something that can be re-introduced at a later time (after initial v6). The reason for that is that I don't really have the knowledge or time. The server is really legacy at this point and it's hard to know how to update it. The v6 release takes priority then it will be possible to investigate the server again. Alternatively I would be open for someone from the community to take over maintenance of the server package. |
I have published the latest https://gitlab.com/risserlabs/community/storybook-react-native/-/packages/7773741 You should be able to run the following commands to install it if you are using yarn. echo \"@risserlabs:registry\" \"https://gitlab.com/api/v4/projects/37506841/packages/npm/\" >> .yarnrc
yarn add @risserlabs/storybook-react-native-server or if you are using npm echo @risserlabs:registry=https://gitlab.com/api/v4/projects/37506841/packages/npm/ >> .npmrc
npm i @risserlabs/storybook-react-native-server I have published packages for the other modules in this project as well. https://gitlab.com/risserlabs/community/storybook-react-native/-/packages/ Please note that once storybook react native is out of beta and publishes their packages to npm, I will not be maintaining this. |
@clayrisser hey this is interesting, could you create a PR here on github instead? |
@clayrisser im having trouble finding the changes which enable the server. Currently it wouldn't work because the websockets aren't opened on startup for the device and the server isnt updated for compatibility with v6+. Just publishing it wouldn't have any effect. Can you explain more about what you've published? |
6.5 will be releasing soon so i dont think we need this issue open anymore. |
I used previous version of Storybook with RN, now all reference from docs is removed?
Does that mean Storybook does not support RN anymore?
Thank you,
Misha
The text was updated successfully, but these errors were encountered: