@herberthtk/react-native-viewport

react-native-viewport

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

Demos

1. Track if the view container is 100% visible on the screen

2. Set a custom minimum value to Track and trigger visible if the view container is visible on the screen (For this case, the minimum value 70% to trigger isVisibility)

Installation

    npm i @herberthtk/react-native-viewport

Or

    yarn add @herberthtk/react-native-viewport

Usage

import InViewport from '@herberthtk/react-native-viewport';

 const Section = () => {
  const [focused, setFocused] = useState(false);

  const handleChange = useCallback((isVisible: boolean) => {
    setFocused(isVisible);
  }, []);

  const backgroundColor = focused ? 'red' : '#ccc';

  return (
    <InViewport
      visiblePercentage={70}
      delay={100}
      onChange={handleChange}
      style={[styles.section, { backgroundColor }]}
    >
      <Text style={focused ? { color: '#fff' } : { color: '#000' }}>
        {focused ? 'Focused' : 'Not focused'}
      </Text>
    </InViewport>
  );
};

const App = (): React.JSX.Element => {
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView>
        {[...new Array(5)].map((_, k) => (
          <Section key={k} />
        ))}
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  section: {
    width: Dimensions.get('screen').width,
    height: Dimensions.get('screen').height,
    justifyContent: 'center',
    alignItems: 'center',
    borderBottomColor: 'blue',
    borderBottomWidth: 4,
  },
});

export default App;

Component props

Property	type	Required	Description	Default value
disabled	boolean	false	If enabled the component will not track visibility status	false
delay	number	false	How frequent to check visibility status. Not setting lower less than a second will increase frequency of updates leading performance issues especially in old architecture bridge mode	1000ms
visiblePercentage	number	false	The minimum percentage of the container to be considered visible. By default the container shall be considered visible if 100% of it is visible but you can modify the value to 70, 60, 50 or any other value but it must be less than than 100	100
onChange	Function	true	This is the core and exposed method that listens and updates visibility status	undefined

This component also accepts all properties of the View component like style Check full list of properties here

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with Herbert kavuma