Change state of RenderItem on screenLeave

Jat90 0
Viewed 56

Does anyone know how I can change the state of a renderItem when it leaves screen? Below I have the Flatlist with uses an Item, I want to change the state of the item once it exits the renderview.

const Item = memo(({content}) => {
  const [outOfView, setOutOfView] = useState(false)

  const onScroll= () => {
    if (!outOfView) setOutOfView(true) //Trying to get this to work
  }

  return (  
    <View style={styles.item} onScroll={onScroll}>
      <Text>{content.title}</Text>
    </View>
  )
})

const Slider = props => {
  const flatList = useRef()

  const _renderItem = ({ item, index }) => <Item content={item} />

  return (
    <View style={styles.container} >
      {props.header ? <AppText style={styles.header} text={props.header} /> : null}
      <FlatList
        data={props.data}
        horizontal
        pagingEnabled
        renderItem={_renderItem}
        keyExtractor={item => item._id}
        ref={flatList}
      />
    </View>
  )
}
react-native-flatlist react-native
1 Answers

YOu can do something like this

import { useIsFocused } from '@react-navigation/native';

const Item = memo(({content}) => {
  const [outOfView, setOutOfView] = useState(false)

  const onScroll= () => {
    if (!outOfView) setOutOfView(true) //Trying to get this to work
  }

  const isFocused = useIsFocused();

  return (  
    <View style={styles.item} onScroll={onScroll}>
      <Text>{isFocused?content.title:"Offline"}</Text>
    </View>
  )
})

hope it helps. feel free for doubts

Gaurav Roy0
Related