React-native-in-port NPM

react-native-in-port

Use LightHouse and Ship to detect if a children component is inside the (View)port.

242895017-24eb55c6-abbe-410e-a363-c179f17a9c9d

Installation

npm install react-native-in-port

Example

const ScrollViewExample = () => {
  return (
    // LightHouse's child component can only be ScrollView or FlatList.
    // When scroll and focus events occur, LightHouse asks the Ship if it is within a (view)port.
    // throttleTime: dafault === 500
    <LightHouse throttleTime={100}>
      <ScrollView style={styles.scrollView} scrollEventThrottle={1}>
        {colors.map((color, index) => (
          <Ship
            key={index}
            detectPercent={50}
            // Adjust the detection condition by adjusting the viewport area.
            viewportMargin={{ top: headerHeight, bottom: 70 }}
            onPort={(state) => {
              // You may call the tracking API in this part.
              // --------------------------------------------
              // await analytics().logEvent('viewed', {
              //   useId: 3745092,
              //   description: 'User viewed an ad space.',
              // })
              // --------------------------------------------

              const { isInPort, inPortCount } = state;

              // Return values can be passed as child props.
              return {
                nextProps: { backgroundColor: isInPort ? 'gray' : color },
                isValidInPort: inPortCount < 1,
              };
            }}
          >
            <Box backgroundColor={color} />
          </Ship>
        ))}
      </ScrollView>
    </LightHouse>
  );
};