Storybook not working as stated in home screen
See original GitHub issueAfter following instructions verbatim on install and starting app with npm start, I see the following instructions on the home screen:
After opening settings, I do not see “Toggle Storybook”
Steps to reproduce:
npx ignite-cli new PizzaApp --expo
npm start
- install react-native expo w/
- Start expo app with
- Choosing ‘i’ for iPhone simulator
- CMD-D for settings
ignite doctor
results:
System
platform darwin
arch x64
cpu 8 cores Apple M1
directory OneTappApp /Users/tylerjewell/github/OneTappApp
JavaScript
node 14.15.1 /usr/local/bin/node
npm 7.5.6 /usr/local/bin/npm
yarn 1.22.10 /usr/local/bin/yarn
Ignite
ignite-cli 3.5.3 /usr/local/bin/ignite
ignite src build /Users/tylerjewell/.config/yarn/global/node_modules/ignite-cli/build
generators
Android
java 1.8.0_281 /usr/bin/java
android home - undefined
iOS
xcode 12.4
cocoapods 1.10.0 /usr/local/bin/pod
Update 1:
After some minor debugging - I have found the main issue to be with the DevSettings.addMenuItem function. This doesn’t seem to run the function. The useEffect is running but not entering DevSettings.addMenuItem
// Add our toggle command to the menu
DevSettings.addMenuItem("Toggle Storybook", () => {
setShowStorybook((show) => {
// On toggle, flip the current value
show = !show
// Write it back to storage
saveString("devStorybook", show ? "on" : "off")
// Return it to change the local state
return show
})
})
Issue Analytics
- State:
- Created 3 years ago
- Reactions:7
- Comments:13 (7 by maintainers)
Top Results From Across the Web
How to troubleshoot storybook not loading stories?
Resave save the story file. It makes the component reappear in side panel, and then you can see the errors ...
Read more >Initial Welcome screen does not display - just blank page ...
I am trying to install Storybook into a clean 'create-react-app'. I follow the installation steps but only get a blank page instead of...
Read more >Configure Storybook
Configure story loading. By default, Storybook will load stories from your project based on a glob (pattern matching string) in .storybook/main.js that ...
Read more >Construct a screen - Storybook Tutorials - JS.ORG
As our app is straightforward, the screen we'll build is pretty trivial, simply fetching data from a remote API, wrapping the TaskList component...
Read more >Naming components and hierarchy - Storybook - JS.ORG
We recommend naming components according to the file hierarchy. Single story hoisting. Stories which have no siblings (i.e. the component has only one...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
My temporary work around and somewhat manual is in toggle-storybook.tsx I added this line in the useEffect hook right above the
DevSettings.addMenuItem("Toggle Storybook",
lineThen reload the app. Storybook should show up instead of the original app.
I think Expo doesn’t use that function and might use its own dev menu function. I haven’t dug into it to see if it does. Help on this would be appreciated!