I have a FlatList and I'm implementing a custom pull to refresh, and the idea is to scroll it to a negative offset to reveal the animation underneath it upon release. Here's the code for my FlatList.

const flatListRef = useRef(null);

const handleRelease = () => {
    flatlistRef.current.scrollToOffset({ y: -100 });
    setTimeout(() => {
        flatlistRef.current.scrollToOffset({ y: 0 });
    }, 1000)
}

return (
    <FlatList
        data={data}
        renderItem={({ item }) => {
            return (
                <View style={styles.row}>
                    <Text style={styles.text}>{item}</Text>
                </View>
            )
        }}
        onScroll={onScroll}
        scrollEventThrottle={16}
        onResponderRelease={handleRelease}
        ref={flatListRef}
    />  
)

Upon releasing, the FlatList should scroll to offset -100 to reveal the animation underneath, and then scrolls back up after 1 second. But what's happening is that it is scrolling to offset 0 (I could tell because I tried scrolling down immediately upon releasing, it will immediately try to scroll back up).

Is it possible to programmatically scroll the FlatList to a negative offset?

I have a FlatList and I'm implementing a custom pull to refresh, and the idea is to scroll it to a negative offset to reveal the animation underneath it upon release. Here's the code for my FlatList.

const flatListRef = useRef(null);

const handleRelease = () => {
    flatlistRef.current.scrollToOffset({ y: -100 });
    setTimeout(() => {
        flatlistRef.current.scrollToOffset({ y: 0 });
    }, 1000)
}

return (
    <FlatList
        data={data}
        renderItem={({ item }) => {
            return (
                <View style={styles.row}>
                    <Text style={styles.text}>{item}</Text>
                </View>
            )
        }}
        onScroll={onScroll}
        scrollEventThrottle={16}
        onResponderRelease={handleRelease}
        ref={flatListRef}
    />  
)

Upon releasing, the FlatList should scroll to offset -100 to reveal the animation underneath, and then scrolls back up after 1 second. But what's happening is that it is scrolling to offset 0 (I could tell because I tried scrolling down immediately upon releasing, it will immediately try to scroll back up).

Is it possible to programmatically scroll the FlatList to a negative offset?

• javascript
• react-native
• scroll
• react-native-flatlist

2 Answers 2

It looks you need to set scrollToOverflowEnabled to true to apply this behavior.

ScrollView(Flatlist inherits ScrollView Props )

PS: Here is a different idea. Maybe you can add a fixed height View if you wanna go to -100. (looks same) And after time set the view close. (back to origin position?) (If it doesn't work....)

------------------edit-----

<FlatList
        data={data}
        renderItem={({ item }) => {
            return (
                <View style={styles.row}>
                    <Text style={styles.text}>{item}</Text>
                </View>
            )
        }}
        onScroll={onScroll}
        scrollEventThrottle={16}
        onResponderRelease={handleRelease}
        ref={flatListRef}
        scrollToOverflowEnabled={true}  // Just put in here 
    />  

Use offset instead of y as the parameter key for scrollToOffset as stated in the docs:

flatlistRef.current.scrollToOffset({ offset: -100 });