@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>
  );
}

/@coffeebeanslabs/react-native-inviewport/

    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