storybook on react-native does not work with hmr (hot module reload) properly

For HMR (hot module reload) to work, the root component has to be a class, as it seems.

I therefore added this to storybook/storybook.js :

const StorybookUIOrg = getStorybookUI({ port: 7007, onDeviceUI: true })

const StorybookUI = class extends Component {
  render() {
    return <StorybookUIOrg />
  }
}

AppRegistry.registerComponent('homestory', () => StorybookUI)

This used to work in the past, but with latest version, i just see the native ui menu and some warnings like:

“The prop url is marked as required in StoryView but it’s value is null”

and

“The prop url is marked as required in OnDeviceUI, but it’s value is null”

Edit: without the class above, there is no warning. But hot reload does not work. On the simulator it notifies about “hot reloading”, but nothing changes.

Edit 2: if i change to a different story after hot reload and back, the changes are applied… So what’s wrong?

I now switched back to live reload, HMR seems broken at the time beeing

[jqn]

I’m on “@storybook/react-native”: “^4.0.0-alpha.25” and in order to get hot reloading working again after integrating storybook into my app I had to do the following. Note the comment about react-native hot module loader must take a class.

/**
 * storybook/index.js
 **/
import React, { Component } from "react";
import { AppRegistry } from "react-native";
import { getStorybookUI, configure } from "@storybook/react-native";

import "./rn-addons";

// import stories
configure(() => {
  require("../App/Components/Stories");
}, module);

// Refer to https://github.com/storybooks/storybook/tree/master/app/react-native#start-command-parameters
// To find allowed options for getStorybookUI
const StorybookUIRoot = getStorybookUI({ port: 7007, onDeviceUI: true });

// react-native hot module loader must take in a Class - https://github.com/facebook/react-native/issues/10991
// https://github.com/storybooks/storybook/issues/2081
// eslint-disable-next-line react/prefer-stateless-function
class StorybookUIHMRRoot extends Component {
  render() {
    return <StorybookUIRoot />;
  }
}

// If you are using React Native vanilla and after installation you don't see your app name here, write it manually.
// If you use Expo you can safely remove this line.
// AppRegistry.registerComponent("ExportPro", () => StorybookUIRoot);

export default StorybookUIHMRRoot;

[shilman]

We’ve released a brand new @storybook/react-native with a bunch of core improvements. It’s available in the latest 5.1-alpha on next and has been verified by several RN users on their existing apps. It should fix a bunch of compatibility issues, especially if you’re using the web server feature. Please give it a try and comment here if it fixes your problem. Migration instructions available here: https://github.com/storybooks/storybook/blob/next/MIGRATION.md#react-native-server

@macrozone @odino @b3ngineer @maxhungry @tonyxiao @Bardiamist @danielduan @EskelCz @Maxim-Filimonov @axelnormand @jqn @jjm340 @iamolegga @FunkSoulNinja @miltoneiji @Gongreg