FlatList setNativeProps does not work with onEndReached #26580
Description
I'm trying to use refs to set the onEndReached prop of my FlatList imperatively. Is there a way to do that?
I've modified an example from the PR that adds setNativeProps that toggles the color from black to white on an interval, but can't get onEndReached or onScroll to be called.
Can anyone help me understand why the style is set but the methods aren't?
export default class Testing extends React.Component {
componentDidMount() {
let tick = 0
this.list.setNativeProps({
onEndReached: info => {
// NEVER CALLED 😢
console.log('L231 on Scroll info ===', info)
},
onScroll: info => {
// NEVER CALLED 😢
console.log('L250 info ===', info)
},
// Background DOES flash red on load... 🤔
style: { backgroundColor: 'red' }
})
setInterval(() => {
this.list.setNativeProps({
onEndReached: info => {
console.log('L231 on Scroll info ===', info)
},
// Background DOES toggle black and white... 🤔
style: { backgroundColor: tick++ & 2 ? 'white' : 'black' }
})
}, 1000)
}
render() {
return (
<View style={styles.container}>
<FlatList
ref={component => (this.list = component)}
style={{ backgroundColor: 'black' }}
data={[{ key: 'a' }, { key: 'b' }]}
renderItem={({ item }) => <Text>{item.key}</Text>}
/>
</View>
)
}
}React Native version:
Steps To Reproduce
- Run the code above
- Scroll the list
- No logs are trigged
Describe what you expected to happen:
I expect the logs to be triggered
Snack, code example, screenshot, or link to a repository:
export default class Testing extends React.Component {
componentDidMount() {
let tick = 0
this.list.setNativeProps({
onEndReached: info => {
// NEVER CALLED 😢
console.log('L231 on Scroll info ===', info)
},
onScroll: info => {
// NEVER CALLED 😢
console.log('L250 info ===', info)
},
// Background DOES flash red on load... 🤔
style: { backgroundColor: 'red' }
})
setInterval(() => {
this.list.setNativeProps({
onEndReached: info => {
console.log('L231 on Scroll info ===', info)
},
// Background DOES toggle black and white... 🤔
style: { backgroundColor: tick++ & 2 ? 'white' : 'black' }
})
}, 1000)
}
render() {
return (
<View style={styles.container}>
<FlatList
ref={component => (this.list = component)}
style={{ backgroundColor: 'black' }}
data={[{ key: 'a' }, { key: 'b' }]}
renderItem={({ item }) => <Text>{item.key}</Text>}
/>
</View>
)
}
}