1
react: "16.11.0",
react-native: "0.62.2",
react-native-navigation: "^6.4.0",
react-native-tab-view: "^2.14.0",

I'm trying to use react-native-tab-view with react-native-navigation V3.

So far I able to use a registered-component in this way:

import EventsScreen from './EventsScreen';
function registerScreens() 
{
    ...
    Navigation.registerComponent('com.events.EventsScreen', () => gestureHandlerRootHOC(EventsScreen));
    ...
}

In the React.Component page where I wants the tab-view:

import EventsScreen from './EventsScreen';

let renderScene = SceneMap({
    first: EventsScreen,
    second: AddEventScreen   });

The above way works, but I can not pass any props to the EventsScreen. I was more likely to expect a design something like,

{
   component: 'com.events.EventsScreen',
   passProps: { .. }
}

Following does not work if I tried in this way:

let renderScene = SceneMap({
        first: 'com.events.EventsScreen',
        second: 'com.events.AddEventScreen'   });

What is the correct way to provide a React.Component view to SceneMap with props?

Santanu Karar
  • 1,034
  • 1
  • 12
  • 27

2 Answers2

0

I able to pass props to renderScene property in this way:

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

    render()
    {
        return (
                <TabView
                    onIndexChange={this._handleIndexChange}
                    navigationState={this.state}
                    renderScene={this.renderScene}
                    initialLayout={initialLayout}
                    style={styles.container}
                />

        );
    }
Santanu Karar
  • 1,034
  • 1
  • 12
  • 27
0

So it seems like you are trying to use the screens registered with RNN to be used as one of tabs in react-native-tab-view.

What you want to do instead is to register a component/screen which contains react-native-tab-view and have components/screens you wish to use as tabs as normal react component (do not register these with RNN).

You will end up something like this:

// index.js
import Home from './route/Home

Navigation.registerComponent('Home', () => Home)

// Home.js
import { TabView, SceneMap } from 'react-native-tab-view'
import EventScreen from './route/Home/tabs/EventScreen'

const renderScene = () => {
  return SceneMap({
    eventScreen: () => <EventScreen {...eventScreenProps} />
  })
}

return (
  <TabView
    renderScene={renderScene}
    {...others}
  />
)
Jin Shin
  • 26
  • 2
  • Thanks! I see it's another way to implementation. I'd glad to hear what you think this advantages over the other. – Santanu Karar May 27 '20 at 04:28
  • 1
    Hmm, if I'm understanding your question correctly, you are trying to use RNN registered component as one of tabs in `react-native-tab-view`. You should not register the screens that you are going to be using as one of the tabs (eg EventsScreen) as react-native-tab-view is expecting a normal React component. – Jin Shin May 27 '20 at 07:37
  • Since you mentioned I noticed that in my original solution, I am actually using the EventsScreen directly and nor in a RNN way! So now if I removed the RNN registration for the EventsScreen my application still running well! Having the change our codes are more or less same I guess ) Thanks! – Santanu Karar May 27 '20 at 11:30