react-native-visibility-aware-view

A view which is aware of its visibility. It also tracks itself when the view is scrolled or moved.

This library supports both architectures. The old one and fabric (new arch).

Installation

npm install react-native-visibility-aware-view

Usage

import { VisibilityAwareView } from "react-native-visibility-aware-view";

// ...

<VisibilityAwareView
  minVisibleArea={0.5}
  ignoreAppState={ignoreAppState}
  onBecomeVisible={(event) => {}}
  onBecomeInvisible={(event) => {}}
  style={styles.box}
/>;

Testing

New Arch

iOS

yarn clean
yarn
cd example/ios && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install && cd ../..
# and then
yarn example ios

Android

Navigate to example/android/gradle.properties and set newArchEnabled=true then run

yarn clean
yarn
# and then
yarn example android

generate Artifacts

cd ./example/android
./gradlew generateCodegenArtifactsFromSchema
cd ../../
yarn example android

# or
cd ./example/android && ./gradlew generateCodegenArtifactsFromSchema && cd ../../ && yarn example android

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