By following the tutorial, what I got isn't the same as what tutorial present

[renntbenrennt]

Here's what the tutorial presented us,

but this is what I got after following along the tutorial and reach to the yarn start

Am I missing anything?

I can see that in the RN project, there are stories, but I can't interact with any of them on the storybook website...

Thanks in advance

[ychinamale]

I ran into the same problem.
I started over and tried following this manual React Native setup and that did not work for the browser Storybook either.
I only managed to view my stories through the Android emulator.

[jonniebigodes]

@ychinamale and @SeasonLeee i was the author of the said version of the tutorial. And regarding this issue, the real underlying problem here was that i was unable to capture the screen when running Storybook in an emulator, as it's documented. And went with the expo web development build so that i could capture the initial layout. I know that it might look a bit confusing but in this case my "hands were tied" (pardon the bad pun). Here is the repo with the code i've used when making the latest changes to the tutorial. It's probably a bit outdated. But it should get you past the issue.

Let me know if it helps. So that when i circle back to this version i can fine tune it better and possibly address this issue.

Sounds good?

Stay safe

[renntbenrennt]

Hey, @jonniebigodes , thanks for your detailed response but I have to leave the experiment of the method you mentioned to @ychinamale , since I have decided a while ago to transfer the APP development in our future project and the upcoming one into using Flutter, so, I might not be able to have extra time to do anything related to RN in the near future... I'm sorry for the inconvenience I might cause here, and best wishes to everyone.

Stay safe, guys😆

[jonniebigodes]

@SeasonLeee no worries, no inconvenience whatsoever. Hope if you come back to React Native and Storybook we'll have a better experience for you.

Stay safe

[dannyhw]

This happens because at this point in the tutorial the storybookUI is not loaded or even imported. The storybookUI needs to be running so that it can send the stories list to the server.

I think actually just adding a comment to say that "at this point no stories will be loaded" or something would be enough to move the user on to the next step. In the next steps the storybookUI gets added into the app via the LinksScreen.js which would resolve the issue with stories not loading.

[domyen]

Super helpful context @dannyhw, thank you 🙇

[icaru88]

For those who are here to look for solution why the left pane is empty or not showing as per documentation/tutorial.
run the command below to connect your device/emulator to the port 7007.
adb reverse tcp:7007 tcp:7007

Your device/emulator is now connected to the storybook server. You will be able to see the items on left pane and be able to navigate through the web to your device.

[dannyhw]

Anyone looking for a solution for stories not loading on @storybook/react-native-server should instead look at the issue on the react-native storybook issue here: storybookjs/react-native#55

There are many solutions suggested in this issue and you should be able to resolve it with one of these.

[Luk-kar]

Also, I want to acknowledge that in the case of Storybook for React Native tutorial starting app expo init --template tabs taskbox differs quite dramatically from what it is in the tutorial. That means the following imports in base projects do not exist. BottomTabNavigator.tsx example:

import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';

I'm not sure if does have any influence but my react-native according to package.json is sdk-40.0.1

[dannyhw]

@Luk-kar yes the expo template changed some time ago and the tutorial has been outdated for a little while. Ideally it would be updated, honestly there are a lot of improvements I would like to make to the tutorial but currently its just been hard to make it a priority over things like working on 6.0.

I did make a comment over here about how you might adapt the current template maybe its helpful:
https://github.com/storybookjs/storybook/issues/12358#issuecomment-811375586

[jonniebigodes]

@Luk-kar as @dannyhw mentioned the said template is ahead of the code/content mentioned in the tutorial. I've reached out to @dannyhw on how we could best approach this and use the same "tactic" as mentioned in the other versions of the tutorial. He's ok with it, and I plan on getting in touch with him in the near future, and see how to best address this and the current state of Storybook for React Native. But to be honest with you I had to put this on the back burner for a bit while I was tasked with other items related to the documentation. Me personally and I believe that @dannyhw would welcome additional help and feedback in getting this across.

Let us know!

Stay safe

[jonniebigodes]

Closing this for the time being until the tutorial is redone.