Setting tab index other than 0.

[Saad-Bashar]

I want to set the default active tab index to 1. I am using setIndex to change the index value to 1 from 0. But it does not change the tab whereas a hard refresh on the simulator works. Not sure where I am going wrong with this. All the components are declared outside of my component. Any suggestion on this, please? Maybe I am doing something very silly.

My tabview version is ---- "react-native-tab-view": "^2.15.2",

1. I am trying to change the index inside a useEffect depending on my data.

useEffect(() => {
      if(_.size(newReservations) === 0 && _.size(acceptedReservations) > 0) {
        console.log("SETINDEX") // this console log works as well.
        setIndex(1) // even after setting the index here to 1, the active tab remains at index 0
      }
  }, [reservation.list]);

Here even the index is 1 when I console.log(index). But the tab is not moving.

2. This is my tab view.

<TabView
        navigationState={{index, routes}}
        renderScene={renderScene}
        onIndexChange={(index) => setIndex(index)}
        initialLayout={initialLayout}
        renderTabBar={renderTabBar}    
 />

3. This is my renderScene func

 const renderScene = ({ route }) => {
    switch (route.key) {
      case 'new':
        return (
          <View style={[styles.scene]}>
            <NewTab type="new" list={newReservations} />
          </View>
        );
      case 'accepted':
        return (
          <View style={[styles.scene]}>
            <AcceptedTab type="accepted" list={acceptedReservations} />
          </View>
        );
      default:
        return null;
    }
  };

Like in the image, the active indicator is at new whereas it should be on accepted.

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-tab-view
• react-native-pager-view

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[github-actions]

Hey! Thanks for opening the issue. Can you provide a minimal repro which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it's not usually straightforward to run. A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

The easiest way to provide a repro is on snack.expo.dev. If it's not possible to repro it on snack.expo.dev, then please provide the repro in a GitHub repository.

[khanhtn91]

Hi @Saad-Bashar ,
I have this same issue as well, I can't set the default active tab via props
I found a solution to fix it
Init default index value for the state, this value will set the default for the first render of the tab

const [state, setState] = useState({
  index: props.indexSelectTab || 0,
  routes: props.routes,
})

const onPressTab = (i) => {
  setState({
    ...state,
    index: i,
  })
}

<TabView
  navigationState={{index: state.index, routes: state.routes}}
  renderScene={_renderScene}
  renderTabBar={_renderTabBar}
  onIndexChange={_handleIndexChange}
  onSwipeEnd={() => onPressTab(state.index)}
/>

hope this helps.

[Saad-Bashar]

Hey @khanhtn91 , thanks for your comment! In my use case, it was a bit different. Not I am setting the index and while setting it I am not showing the tab bar. something like this

useEffect(() => {
    const tab = route.params?.tab ?? 'active';
    if(tab === 'upcoming') {
      setIndex(1)
    } else {
      setDefaultTab()
    }
  }, [navigation]);

const setDefaultTab = () => {
    if(_.size(activeBookings) === 0 && _.size(upcomingBookings) > 0) {
      setIndex(1)
    } else {
      setIndex(0)
    }
  }

Am I making it way too complicated?

[github-actions]

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.

[sabonis]

from https://beta.reactjs.org/learn/you-might-not-need-an-effect

useEffect is unneeded, just calling setIndex() in the function is better.

[cxt19951016]

same issue,could you please tell me how to solve it?