javascriptreact-nativereact-navigation-v5react-native-tab-view

react-native-tab-view jump to specific tab from react navigation screen


I have 2 libs for my navigation. React navigation v5 and react-native-tab-view. 3 tabs from react navigation : Home/Discover/Profile. Discover is a screen with react native tab view. I have few buttons in Home, after press them they should navigate me to Discover tab and specific tab in Tab View. For now, I made the navigation from Home to Discover with react navigation. But how can i jump to a specific tab after i navigate to Discover?

This is sone element in Home which holds the button that will navigate me from Home to Discover:

render() {
    const { error, pending, refresh, videos } = this.props;

    return (
      <HomeViewItem
        headerText={'Top Videos'}
        footerText={'More Videos'}
        navigate={() =>
          this.props.navigation.navigate('TabNavigator', {
            screen: 'Discover',
          })  // this will navigate me to Discover
        }
        view={this._renderVideos(videos, pending, error, refresh)}
      />
    );
  }

this is tab view in Discover screen:

export default class DiscoverTabView extends React.Component<DiscoverProps> {
  _StreamsRoute = () => <StreamsTabScreen navigation={this.props.navigation} />;
  _NewsRoute = () => <NewsTabScreen navigation={this.props.navigation} />;
  _VideosRoute = () => <VideosTabScreen navigation={this.props.navigation} />;
  _RedditRoute = () => <RedditTabScreen navigation={this.props.navigation} />;
  _PicturesRoute = () => (
    <PicturesTabScreen navigation={this.props.navigation} />
  );

  state = {
    index: 0,
    routes: [
      { key: 'streams', title: 'Streams' },
      { key: 'news', title: 'News' },
      { key: 'videos', title: 'Videos' },
      { key: 'reddit', title: 'Reddit' },
      { key: 'pictures', title: 'Pictures' },
    ],
  };

  _handleIndexChange = (index: number) => this.setState({ index });

  componentWillUpdate() {}

  render() {
    const renderTabBar = (
      props: SceneRendererProps & { navigationState: State }
    ) => (
      <TabBar
        {...props}
        indicatorStyle={{ bottom: 6 }}
        style={{ backgroundColor: '#0C2B33', elevation: 0, shadowOpacity: 0 }}
        scrollEnabled={true}
        renderLabel={renderLabel}
        renderIndicator={renderIndicator}
        tabStyle={{ width: 87, height: 44 }}
      />
    );
    const renderLabel = ({
      route,
      focused,
      color,
    }: {
      route: Route;
      focused: boolean;
      color: String;
    }) => {
      return (
        <View style={{ width: 87, height: 44 }}>
          <Text style={focused ? styles.active : styles.inactive}>
            {route.title}
          </Text>
          <Image
            source={
              route.key === this.state.routes[this.state.routes.length - 1].key
                ? null
                : images.tabViewSeparator
            }
            style={{ position: 'absolute', alignSelf: 'flex-end', top: 10 }}
          />
          <Image
            source={
              focused ? images.tabViewIconActive : images.tabViewIconInactive
            }
            style={{
              width: 20,
              height: 20,
              alignSelf: 'center',
              position: 'absolute',
              top: 21,
            }}
          />
        </View>
      );
    };

    return (
      <TabView
        lazy={false}
        navigationState={this.state}
        renderScene={SceneMap({
          streams: this._StreamsRoute,
          news: this._NewsRoute,
          videos: this._VideosRoute,
          reddit: this._RedditRoute,
          pictures: this._PicturesRoute,
        })}
        renderTabBar={renderTabBar}
        onIndexChange={this._handleIndexChange}
        initialLayout={{ width: Dimensions.get('window').width }}
      />
    );
  }
} 

Solution

  • You do it by using a specific tab action: jumpTo.

    The function goes as follows:

    import { TabActions } from '@react-navigation/native';
    
    const jumpToAction = TabActions.jumpTo("TabName", { params });
    navigation.dispatch(jumpToAction);