[FlatList] Add setNativeProps

[reneweb]

Motivation (required)

Curently FlatList does not implement setting native props directly like the old ListView did. This pr introduce the setNativeProps function which delegates to MetroListView or VirtualizedList. Thos don't have setNativeProps handling either, so, I delegated further to the respective ListView and Scroll components, which do have handling for it, thus, allowing to set the native props through FlatList.

Test Plan (required)

Create a project with a FlatList and change a native property using setNativeProps:

  componentDidMount() {
        setInterval(() => {
            this.list.setNativeProps({ style: {backgroundColor:"white"} })
        }, 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>
    )
  }

Fixes #13501

[ide]

@sahrens this looks good to me, can you take a look?

[chitezh]

@sahrens @ide Please, what is the status of this PR?

[sahrens]

Sweet, thanks! Sorry I missed the earlier mention.

[facebook-github-bot]

@sahrens has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[technoplato]

Can we use setNativeProps with FlatList now? I'm currently unable on RN61.1

edit: I've got setNativeProps working with a subset of FlatList props

@sahrens @ide
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 what I'm doing wrong?

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>
    )
  }
}

[a-eid]

@technoplato why would u wanna setNativeProps for onEndReached or onScroll, you can provide them as normal props and if or when you wanna change the fn you can simply change the reference or change some sort of flag & check for it inside the function.

[technoplato]

@a-eid it’s been a little since I was working on this, but I think I was trying to create a library that would turn your list into one with infinite scroll capabilities. I’m sure there are better ways and that I was missing the forest through the trees.

[aminta]

So, in 2022 is it now possibile?