@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 .
Installationusing npmnpm install @se09deluca/react-native-component-inviewusing Yarnyarn add @se09deluca/react-native-component-inviewUsageimport 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