Content jumping as you scroll down

alexpchin commented 3 years ago

Current behavior

As I'm scrolling down a Tab.FlatList, I'm seeing small content adjustments happening. Please see the attached video.

simulator1.mov.zip

This is on a bare react-native app.

Expected behaviour

The scroll should be smooth.

alexpchin commented 3 years ago

The problem seems to go away if I comment out:

onContentSizeChange: scrollContentSizeChangeHandlers

In Tab.FlatList.

Update

More specifically, I think the issue is in scrollContentSizeChange.

const scrollContentSizeChange = useUpdateScrollViewContentSize({
  name,
  setContentHeights
});
const scrollContentSizeChangeHandlers = useChainCallback(
  // scrollContentSizeChange, 
  onContentSizeChange
);

Should contentHeights be a ref/useSharedValue rather than state? Perhaps it's triggering a re-render which is causing jittery behaviour? I can see the comment here?

// note(@andreialecu): this was an useSharedValue but it was behaving erratically in the scroll handler
// by missing updates and showing stale values inside the handler. Only normal state seems to work.
// this may be a reanimated 2 bug
const [contentHeights, setContentHeights] = useState({})

alexpchin commented 3 years ago

The issue is magnified when the list is large... Please see repro here:

https://github.com/andreialecu/rnctv-react-native-bare-test/pull/3

andreialecu commented 3 years ago

See #146

PedroBern / react-native-collapsible-tab-view