FlatList setNativeProps does not work with onEndReached

[technoplato]

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

1. Run the code above
2. Scroll the list
3. 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>
    )
  }
}

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.