@se09deluca/react-native-component-inview

A React Native wrapper to check whether a component is in the viewport. Useful to track impressions, clicks or implements custom logic.

It works on Android, iOS & Web .

Installation

using npm

npm install @se09deluca/react-native-component-inview

using Yarn

yarn add @se09deluca/react-native-component-inview

Usage

import InView from '@se09deluca/react-native-component-inview'

const [isInView, setIsInView] = useState(false)

const checkVisible = (isVisible:boolean) => {
  if (isVisible){
    setIsInView(isVisible)
  } else {
    setIsInView(isVisible)
  }
}

<ScrollView>
  <InView onChange={(isVisible) => this.checkVisible(isVisible)}>
    <View style={[styles.item, {backgroundColor: isInView ? 'yellow' : '#f9c2ff'}]}>
      <Text>This View is currently visible? {isInView ? 'yes': 'no'}</Text>
    </View>
  </InView>
</ScrollView>

// ...

Demo

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library