React-native-tab-view: How to pass additional props using SceneMap?

[joncursi]

How do you pass additional props to a tab using SceneMap?

  _renderScene = SceneMap({
    [TAB_KEY_ONE]: TabOne,
    [TAB_KEY_TWO]: TabTwo,
  });

TabOne and TabTwo may be functional components, or classes. How do you pass additional props to them?

[satya164]

You can define them as key: () => <TabOne prop={this.props.someProp} />, but note that it won't update as this.prop.someProp changes (it didn't with a normal renderScene function` anyway).

Scenes defined this way also won't update if the state changes, which is great for perf. If you absolutely need them to update, you should use the function manually as you did before.

[imansalhi]

@satya164 so vague :|

[flavluc]

from the official documentation:

IMPORTANT: Do not pass inline functions to SceneMap, for example, don't do the following:

SceneMap({
  first: () => <FirstRoute foo={this.props.foo} />,
  second: SecondRoute,
});

[pacozaa]

@flaviolc18 any solution?

[pacozaa]

@satya164 why your answer contradicts with the document?

[satya164]

@pacozaa my answer is from 2 years ago with an older version of the library :/

[asososo]

@flaviolc18 any solution?

from document, use a custom renderScene function:

const renderScene = ({ route }) => {
  switch (route.key) {
    case 'first':
      return <FirstRoute foo={this.props.foo} />;
    case 'second':
      return <SecondRoute />;
    default:
      return null;
  }
};

[ShubhamKushwah]

Requesting re-open of this issue, it's not solved yet!