react-native-inviewport-pr
v0.2.0
Published
Detect if component is in device viewport
Downloads
3
Maintainers
Readme
react-native-inviewport-pr
Detect if component is in device viewport. I based this off:https://github.com/yamill/react-native-inviewport with some slight modifications.
npm install react-native-inviewport-pr --save
Assuming you already setup your component, here's a quick example.
import InViewPort from "react-native-inviewport-pr";
checkVisible = (isVisible) => {
if(isVisible){
if(!this.state.visible){
this.setState({visible: true});
}
}else{
if(this.state.visible){
this.setState({visible: false});
}
}
}
render() {
return (
<ScrollView style={{flex: 1}}>
<InViewPort onChange={(isVisible) => this.checkVisible(isVisible)}>
<View style={{flex: 1, height: 200, backgroundColor: 'blue'}}>
<Text style={{color: 'white'}}>View is visible? {this.state.visible}</Text>
</View>
</InViewPort>
<InViewPort onChange={(isVisible) => this.checkVisible(isVisible)}>
<View style={{flex: 1, height: 200, backgroundColor: 'green'}}>
<Text style={{color: 'white'}}>View is visible? {this.state.visible}</Text>
</View>
</InViewPort>
<InViewPort onChange={(isVisible) => this.checkVisible(isVisible)}>
<View style={{flex: 1, height: 200, backgroundColor: 'red'}}>
<Text style={{color: 'white'}}>View is visible? {this.state.visible}</Text>
</View>
</InViewPort>
<InViewPort onChange={onChange={(isVisible) => this.checkVisible(isVisible)}>
<View style={{flex: 1, height: 200, backgroundColor: 'orange'}}>
<Text style={{color: 'white'}}>View is visible? {this.state.visible}</Text>
</View>
</InViewPort>
<InViewPort onChange={(isVisible) => this.checkVisible(isVisible)}>
<View style={{flex: 1, height: 200}}>
<Text>View is visible? {this.state.visible}</Text>
</View>
</InViewPort>
</ScrollView>
);
}