Fix hot reloading storybook

[thani-sh]

Hot module reloading needs to be configured.

TODO

• update changes to story content
• update when adding new kinds and stories
• update when changing or removing kinds and stories

[thani-sh]

PR #10 partially fixes this issue. To fix the third part, clear existing stories for the updated module and load them again.

[arunoda]

I updated the README related to HMR.

[frederickfogerty]

Hey @arunoda, is there any update with this?

[arunoda]

Hey @frederickfogerty HMR is working pretty well and functional (without any additional config)

We still can't to one thing. That's to remove stories if we delete them or renamed them.
That's because we don't have a rich HMR api in RN.
(We may need to find a better way to do this)

[frederickfogerty]

@philcockfield Is HMR working for you now? It wasn't working for us today when I was on Skype with you - has it behaved better since?

[philcockfield]

@frederickfogerty just tried it again now. Seems to be working, now that everything else has settled down.

[arunoda]

@frederickfogerty Just to check. Have you enabled HMR using RN's config menu (CMD + R)

[frederickfogerty]

Yes, I've enabled HMR - I'll try using it again and report back here if I have any issues.

[thedgbrt]

Hey guys, HMR is not working for me (only tested with Android). When I save a file, it does shows "hot loading..." on the device screen. However it doesn't actually update.

[frederickfogerty]

@thedgbrt Hot reloading has been working fine for us for a long time now. Is there anything different about your setup? Have you tried restarting all the separate components (packager, storybook, android)?

[thedgbrt]

@frederickfogerty I'm on windows, using GenyMotion simulator. I have just tried it after restarting my computer.

• Started device simulator (app already installed)
• Ran adb reverse on all required ports (including 7007)
• Ran npm run storybook
• Ran app, opened dev menu, click "enable hot reloading"
• Make an update to a component, save it
• Shows "hot reloading..." on screen, but nothing changes

Update : it does update if I go to the storybook UI and go back and forth between components

[frederickfogerty]

@thedgbrt That all seems fine to me, might be something to with Windows/your environment, I'm not sure to be honest

[thedgbrt]

@frederickfogerty thanks! will report back if I manage to make it work ;)

[andrewn]

I've found that hot reloading mostly doesn't work with Functional components at all in React Native. I see the "hot reloading" banner at the top but then nothing happens.

Class-based (ES6) components seems to hot reload ok (e.g. class Name extends React.Component { ... } form.)

So I wonder whether this is a general issue with HMR, React Native and Functional components and not with react-native-storybook?

[thedgbrt]

That's it! I was indeed using stateless functional components.
I just tried to convert it to a Class and HMR worked as expected within storybook.
Also tried HMR outside of storybook, and functional components didn't reload there either.

Opened an issue in the react native repo.
facebook/react-native#10991

I think we can close this one.

[thani-sh]

Hi @thedgbrt,
We still have an HMR related issue when removing stories. Let's keep this issue open until it's fixed

[thedgbrt]

@mnmtanish my bad

[ucokfm]

For stateless component, it seems we must provide class based higher (wrapper) component.
As a temporary workaround, i can enable HMR by modify storybook/index.android.js :

const StorybookUI = getStorybookUI({port: 7007, host: 'localhost'});

class StorybookUIWrapper extends Component {
  render() {
    return StorybookUI();
  }
}

AppRegistry.registerComponent('MyApp', () => StorybookUIWrapper);

[ndelangen]

It sounds like part 3 is currently impossible? Shell we close this issue, it actually sounds like it's resolved 👍