@coffeebeanslabs/react-native-inviewport

0.2.0 • Public • Published

@coffeebeanslabs/react-native-inviewport

Detect if component is in device viewport. I based this off:https://github.com/yamill/react-native-inviewport with some slight modifications.

Install

npm i @coffeebeanslabs/react-native-inviewport

Usage

import InViewPort from "@coffeebeanslabs/react-native-inviewport";
checkVisible = isVisible => this.setState({visible: isVisible});

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>
  </ScrollView>
  );
}

Dependencies (0)

    Dev Dependencies (0)

      Package Sidebar

      Install

      npm i @coffeebeanslabs/react-native-inviewport

      Weekly Downloads

      600

      Version

      0.2.0

      License

      ISC

      Unpacked Size

      3.06 kB

      Total Files

      3

      Last publish

      Collaborators

      • imsheth
      • raj.dhivya
      • mitech11
      • preetisharma
      • greeshma_p
      • rishabhcb
      • ayub-cb