question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Storybook not working as stated in home screen

See original GitHub issue

After following instructions verbatim on install and starting app with npm start, I see the following instructions on the home screen:

image

After opening settings, I do not see “Toggle Storybook”

image

Steps to reproduce:

npx ignite-cli new PizzaApp --expo
npm start
  1. install react-native expo w/
  2. Start expo app with
  3. Choosing ‘i’ for iPhone simulator
  4. 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:closed
  • Created 3 years ago
  • Reactions:7
  • Comments:13 (7 by maintainers)

github_iconTop GitHub Comments

6reactions
tran2commented, Apr 2, 2021

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", line

saveString("devStorybook", "on")

Then reload the app. Storybook should show up instead of the original app.

2reactions
jamonholmgrencommented, Mar 13, 2021

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!

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found