Storybook: Pass props to React Native TabNavigator

Created on 8 Feb 2018  路  1Comment  路  Source: storybookjs/storybook

Hi All,

I'd like to get props from storybook/index.js and pass it to my components to control my router.
As my screen is a TabNavigator, my idea is to get the props and set it as the value of initialRouteName.

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

```js
import Temp2 from "./temp2";

...

storiesOf("TabNavigator", module)
.add("Home", () => );
.add("Setting", () => );
.add("Account", () => );

In my TabNavigator
```js
export default TabNavigator(
  {
    Home: {
      screen: Home,
    },
    Account: {
      screen: Account,
    }
  },
  {
    initialRouteName: this.props.route
  }
);

How can I get the "route" props as "Home" in my component?

Most helpful comment

Got the answer!
Just warp your TabNavigator in a React component.

export default class Tab extends React.Component {
  render() {
    const MainTab = TabNavigator(
      {
        Temp1: {
          screen: Temp1
        },
        Temp2: {
          screen: Temp2
        }
      },
      {
        initialRouteName: this.props.route
      }
    );
    return (
      <View style={{ flex: 1 }}>
        <MainTab />
      </View>
    );
  }
}
storiesOf("Temp", module)
  .add("Temp2", () => {
    return <Tab route="Temp2" />;
  });

You are good to go 馃憤

>All comments

Got the answer!
Just warp your TabNavigator in a React component.

export default class Tab extends React.Component {
  render() {
    const MainTab = TabNavigator(
      {
        Temp1: {
          screen: Temp1
        },
        Temp2: {
          screen: Temp2
        }
      },
      {
        initialRouteName: this.props.route
      }
    );
    return (
      <View style={{ flex: 1 }}>
        <MainTab />
      </View>
    );
  }
}
storiesOf("Temp", module)
  .add("Temp2", () => {
    return <Tab route="Temp2" />;
  });

You are good to go 馃憤

Was this page helpful?
0 / 5 - 0 ratings