Slide Flickering in Android also the state changing every index

[Ritik5Prasad]

I want to render my Custom Tab but im chaning the index its keep setting the each index in between and feels like flickering like if I got 1 to 4 the state change like 1 --> 2 --> 3 --> 4 but I want only 4 and in android it swipes to each screen

` const CustomTab: FC<CustomTabProps> = ({ Header, tabs }) => { const containerRef = useRef<CollapsibleRef>(null); const { colors } = useTheme(); const [focusedIndex, setFocusedIndex] = useState(0); const handleSetIndex = (newIndex: number) => { containerRef.current?.setIndex(newIndex); setFocusedIndex(newIndex); };

return ( <CustomSafeAreaView style={styles.container}> <Tabs.Container lazy cancelLazyFadeIn cancelTranslation revealHeaderOnScroll={true} renderHeader={() => <Header />} ref={containerRef} headerContainerStyle={styles.noOpacity} renderTabBar={(props) => ( <TabBar tabNames={props.tabNames} focusedIndex={focusedIndex} onSetIndex={(index) => handleSetIndex(index)} /> )} containerStyle={{ backgroundColor: colors.background, paddingVertical: 0, }} onIndexChange={(i) => { setFocusedIndex(i); }} > {tabs.map((item, index) => { return ( <Tabs.Tab key={index} name={item.name}> {item.component} </Tabs.Tab> ); })} </Tabs.Container> </CustomSafeAreaView> );

https://github.com/PedroBern/react-native-collapsible-tab-view/assets/90846926/0c953485-153d-4bc9-8e33-6b182ed2f17a

};`