Delay/Flicker in View when setting State in onPageSelected #766
Description
I've created a PagerView with an onPageSelected callback:
const [index, setIndex] = useState(0);
<PagerView
ref={pagerRef}
className={'flex-1'}
onPageSelected={onPageSelected}
initialPage={index}>
<View key="1">
<Text className={'text-black'}>First page</Text>
</View>
<View key="2">
<Text className={'text-black'}>Second page</Text>
</View>
</PagerView>
const onPageSelected = (event) => {
const {position} = event.nativeEvent;
if(position !== index) {
setIndex(position);
}
}
When i change view, there is a small delay. I've traced it back to the setIndex() useState.
I want to use the index to show different button styles based on if it is the active view or not.
How do i get around this?
When i remove the setIndex(), its super smooth, but I dont have access to the current active page.
Can i get the current active page from the ref? Is there a better way to implement this?