Delay/Flicker in View when setting State in onPageSelected

[RemiHin]

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?

[lucaslucenagithub]

Did you get it?

[RemiHin]

I did fix it, but I did it by rebuilding the entire component from scratch. Dont know what i did different the second time, i think it might be something with multiple state updates or useeffects creating the flicker.

[tmKnight01]

I did fix it, but I did it by rebuilding the entire component from scratch. Dont know what i did different the second time, i think it might be something with multiple state updates or useeffects creating the flicker.

can you tell me how to reslove this problem ? i also have this problem.