web-ridge / react-native-paper-tabs

Smooth and fast cross platform Material Design Tabs for React Native Paper
https://reactnativepapertabs.com
MIT License
200 stars 35 forks source link

defaultIndex is not working with 3rd or other than default index #52

Closed nasirdeveloper closed 1 year ago

nasirdeveloper commented 1 year ago

Please look up on this issue. Only default tab is in active mode. If I want to set other than default may be second or third index with below syntax it did not work

<Tabs defaultIndex={2} mode="scrollable" style={{ backgroundColor: "transparent", }} dark={false} showLeadingSpace={false} theme={false} uppercase={false}

RichardLindhout commented 1 year ago

Hey we have now a TabProvider which should make it easier to change it outside component. You can't change the defaultIndex after first render

nasirdeveloper commented 1 year ago

Yes we can chnage the defaultIndex changed to 3rd tab index but after a page load it goes to 3rd tab index then comes to first tab Please look into this why this is happening

Below my code snippet: (Tabs are coming dynamically )

<TabsProvider defaultIndex={2} // onChangeIndex={handleChangeIndex} optional

<Tabs // defaultIndex={parseInt(2)} mode="scrollable" style={{ backgroundColor: "transparent", }} dark={false} showLeadingSpace={false} theme={false} uppercase={false}

{productCategoryDetails.productCategoryDetailsList .map((categoryItem, index) => ( <TabScreen label={categoryItem.name} key={index.toString()}> <View style={[globalStyles.flex1, globalStyles.mt20]}> <FlatList data={categoryItem.product_list} renderItem={({ item }) => ( // FlatList data goes here... /> ))}