How to navigate to a screen and also focus on a tab

[omerfaran]

When navigating to a screen that contains the tab view of two tabs, the focus will be on the left tab, or the one the user already switched to before.
Is it possible to focus on one of the tab?

Expected behaviour

Choose tab to focus on when navigating to the screen containing the tabs

Code sample

This is my code of the screen that contains the two tabs:

import _ from 'lodash'
import { TabView, SceneMap, TabBar } from 'react-native-tab-view'

import FirstTab from '../organisms/service.first.organism'
import SecondTab from '../organisms/second.organism'

export default class ServiceScreen extends ComponentSuperclass {
  constructor (props) {
    super(props, 'ServiceScreen', true)

    this.state = {
      index: _.get(this.getStore().ui, 'tabService', 0),
      routes: this.getRoutes(),
    }

    this.view.tab.onIndexChange = this.onIndexChange
    this.view.tab.renderTabBar = this.renderTabBar
  }

  getRoutes () {
    const route = key => ({ key, title: this.lang.tab[key] })
    return [ route('current'), route('history') ]
  }

  renderTabBar (props) {
    const tabBar = {
      ...props,
      ...this.tab.bar,
    }
    return <TabBar {...tabBar} />
  }

  tabHistory () { return <FirstTab/> }
  tabCurrent () { return <SecondTab /> }

  onIndexChange (index) {
    this.ui('tabService', index)
    this.setState({ index: index })
  }

  render () {
    this.view.tab.navigationState = {
      index: this.state.index,
      routes: this.state.routes,
    }

    this.view.tab.renderScene = SceneMap({
      current: this.tabCurrent,
      history: this.tabHistory,
    })

    return <TabView {...this.view.tab} />
  }
}

Screenshots (if applicable)

What have you tried

I cannot use the above screen to focus on one of the tabs, because this screen will not be re-rendered once re-navigated to.

Is there a way to focus on one of the tabs from outside this screen?

Your Environment

software	version
ios or android
react-native	0.62.2
react-native-tab-view	2.14.0
react-native-gesture-handler
react-native-reanimated
node
npm or yarn

[aravi365]

@omerfaran did you managed to find a solution?

[jackiewung]

I solved this using a "Context Provider" to save the state of index that the Tab component refers to

  // Tabs
  return (
        <TabView
          swipeEnabled
          renderTabBar={() => null}
          navigationState={tabContext.state}
          renderScene={SceneMap({
            first: First,
            second: Second,
            third: Third,
          })}
          onIndexChange={index => tabContext.setTab(index)}
        />

  // Misc Component
  return (
    <TouchableOpacity onPress={() => tabContext.setTab(1)} />
  )

[GFean]

any other solutions for this ? Context API doesn't seem to be working for me.

[GFean]

Lol I've found a solution by passing the current index as 'position' prop to tabbar