What are the updated steps for Storybook and seamless typescript integration for 0.57+ ?

[sinewave440hz]

Bug or support request summary

Expected to be able to init a new typesript project and install storybook and work seamlessly with typescript. After solving some issues general to 0.57, I have still not managed to get storybook working with typescript components - in fact, I don't see any components in the storybook server ui.

Steps to reproduce

react-native init tstest --templates typescript

cd tstest && node setup.js

getstorybook

yarn add --dev [email protected]

Update storybook script in package.json to:

"storybook": "storybook start -p 7007 --skip-packager"

yarn run storybook

The storybook ui is available at localhost:7007, but contains no components in the sidebar.

From here on, I'm guessing what I'm supposed to be doing, pieced together from some of the other issues...(such as this one)...it certainly doesn't work out of the box though... :/

(At this stage, in the last few days, you'll also want to solve a general RN issue with:
yarn add --dev @babel/runtime)

yarn add --dev @types/storybook__react-native

change 'App.tsx' to following:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * 
 * Generated with the TypeScript template
 * https://github.com/emin93/react-native-template-typescript
 * 
 * @format
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, View} from 'react-native';
import { getStorybookUI, configure } from '@storybook/react-native';

const StorybookUIRoot = getStorybookUI({});

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

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

interface Props {}
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <StorybookUIRoot />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Add a stories directory, put a typescript component in it.

I would hope at this stage to see the component in the server UI, but I guess there are steps missing. I have tried adding an index in the stories folder similar to the one in the generated storybook folder (except expressed as typescript after having installed the necessary types), but haven't worked out how to get the components showing either in the server UI or on the device. Am I on the right track?

Please specify which version of Storybook and optionally any affected addons that you're running

"@storybook/addon-actions": "^3.4.11",
"@storybook/addon-links": "^3.4.11",
"@storybook/addons": "^3.4.11",
"@storybook/react-native": "^3.4.11

Affected platforms

React Native 0.57.1

Thanks!

[sinewave440hz]

I solved this with the help of issue 4179https://github.com/storybooks/storybook/issues/4179 and a bit of setup. Everything works out of the box using the steps above if you start storybook with the storybook folder as the project root. There is obviously no need for the rn-cli.config.js in this case. This is my tsconfig.json, which may be helpful:

{
    "compilerOptions": {
      "allowJs": true,
      "allowSyntheticDefaultImports": true,
      "esModuleInterop": true,
      "isolatedModules": true,
      "jsx": "react-native",
      "lib": ["es6"],
      "moduleResolution": "node",
      "noEmit": true,
      "strict": true,
      "target": "esnext",
      "skipLibCheck": true
    },
    "exclude": [
      "__tests__",
      "node_modules",

    ],
    "compileOnSave": false
  }