Storybook: Using Storybook in a project with Wix's react-native-navigation?

[gianko]

I can't get it working... has someone tried it?

[Gongreg]

It does work :)

Give me few minutes for an example.

Inside your entry file:

import {Navigation} from 'react-native-navigation';

const StorybookUI = getStorybookUI({port: 7007, host: 'localhost'});
Navigation.registerComponent('YOUR_COMPONENT_NAME', () => StorybookUI);

Navigation.startSingleScreenApp({
  screen: {
    screen: 'YOUR_COMPONENT_NAME',
    title: 'Title'
  },
});

[SuttJ]

This doesn't seem to be working for me. When installing React-Native-Navigation to your project, it requires you to do the following in Xcode:

But my react app was a create-react-native-app so there's no xcode project to open. Did you follow those instructions above by going into Xcode?

[Gongreg]

Yes, I don't know if RNN supports CRNA. I'll quickly ask around.

[Gongreg]

@SuttJ so RNN doesn't support CRNA.

[Charlynux]

Take me some times to understand why Storybook stops on splash screen...

Just in case, I create a repository with correct configuration.
https://github.com/Charlynux/nativestorybook

[malcolm-kee]

Thanks @Charlynux for the sample.

For reference for anyone stumble upon this, I'm able to setup with the following changes on storybook.js:

import React, { Component } from "react";
import { AppRegistry } from "react-native";
import { Navigation } from "react-native-navigation";
import { getStorybookUI, configure } from "@storybook/react-native";

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

// This assumes that storybook is running on the same host as your RN packager,
// to set manually use, e.g. host: 'localhost' option
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 />;
  }
}

Navigation.registerComponent("storybook.UI", () => StorybookUIHMRRoot);
Navigation.startSingleScreenApp({
  screen: {
    screen: "storybook.UI",
    title: "Storybook"
  }
});

export default StorybookUIHMRRoot;

[nenti]

With RNN@v2

const StorybookUI = getStorybookUI({ port: 7007, onDeviceUI: true })
Navigation.registerComponent('storybook.UI', () => StorybookUI)
Navigation.events().registerAppLaunchedListener(async () => {
  await Navigation.setRoot({
    root: {
      component: {
        name: 'storybook.UI',
      },
    },
  })
})

export default StorybookUI

[kdawgwilk]

This still seems to blow up when adding the StorybookUI as another tab in RNN app rather than a single screen app