Implement with Flatlist about react-native-intersection-observer

[zhbhun]

try to use withIO generate IOFlatlist.

import { Flatlist, Text } from 'react-native';
import {  InView, withIO } from 'react-native-intersection-observer';

const IOFlatlist = withIO(Flatlist);

const Demo = () => (
  <IOFlatlist>
    <InView onChange={(inView: boolean) => console.log('Inview:', inView)}>
      <Text>Plain children are always rendered. Use onChange to monitor state.</Text>
    </InView>
  </IOFlatlist>  
)

[mirabledictu]

Thank you so much! I'll try it asap and update you.

[mirabledictu]

Can I do something like this?

import { FlatList, Text } from 'react-native';
import {  InView, withIO } from 'react-native-intersection-observer';

const IOFlatlist = withIO(FlatList);

<IOFlatlist
  data={posts}
  renderItem={({ item }) => {
    return (
      <InView onChange={(inView: boolean) => console.log('Inview:', inView)}>
        <Text>{item.name}.</Text>
      </InView>
    )
  }}
  keyExtractor={(item) => item.id}
/>

Edit: It works! Only problem now is to type the array passed. I tried this

<IOFlatlist<Post[]>
  data={posts}
  renderItem={({ item }) => { // Cannot type this
    return (
      <InView onChange={(inView: boolean) => console.log('Inview:', inView)}>
        <Text>{item.name}.</Text>
      </InView>
    )
  }}
  keyExtractor={(item) => item.id}
/>

but I still get TS errors

[zhbhun]

Sorry, currently not supported.

[zhbhun]

FlatList is now supported in 0.2.0.