@se09deluca/react-native-component-inview

A React Native wrapper to check whether a component is in the view port to track impressions and clicks

0.1.4
latest
Source
npm

Version published: last year

Maintainers: 1

Created: last year

Source

@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 .

Installation

using npm

npm install @se09deluca/react-native-component-inview

using Yarn

yarn add @se09deluca/react-native-component-inview

Usage

import 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

Keywords

FAQs

What is @se09deluca/react-native-component-inview?

Is @se09deluca/react-native-component-inview well maintained?

Package last updated on 09 Oct 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install