ImpressionArea

A component that detects whether a specific component is visible on the screen and notifies the outside. Using this component, you can easily implement features like collecting logs or running animations when a specific component becomes visible on the screen. The visibility is detected using the return value of useVisibility and the IOScrollView and InView components that indicate whether the component is displayed within the viewport. When using ScrollView in React, even if a view is not visible on the screen, using ImpressionArea allows you to trigger events only when the view is actually visible on the screen.

Note

ImpressionArea must be used inside IOScrollView. If you need to use it outside of IOScrollView, you can set the UNSAFE__impressFallbackOnMount property to true to detect based on when the component is mounted. If this property is set to false and used outside of IOScrollView, an IOProviderMissingError will occur.

Signature

function ImpressionArea(props: Props): ReactElement;

Parameter

• onImpressionStart() => void
  

  Callback function that is executed when the child component becomes visible on the screen.

• onImpressionEnd() => void
  

  Callback function that is executed when the child component is hidden from the screen.

• enabledboolean · true
  

  Value that directly controls the condition for visibility. Default value is true. If passed as false, the onImpressionStart callback function will not be executed even if the component is visible.

• areaThresholdnumber · 0
  

  Value that sets the ratio of the visible area. If the component appears on the screen with a ratio greater than this value, onImpressionStart is called.

• timeThresholdnumber · 0
  

  Sets the time in milliseconds before onImpressionStart is called after this component becomes visible on the screen. Default value is 0 milliseconds (0 seconds).

• styleViewStyle
  

  style value to be applied to the InView component. Default value is undefined, used when you want to specify a style.

• UNSAFE__impressFallbackOnMountboolean · false
  

  Whether to consider the component as visible immediately when mounted. Default value is false.

The value should be set between 0 and 1. Setting it to 0 triggers the event when even 1px of the component is visible. Conversely, setting it to 1 only triggers the event when the component is 100% visible on the screen.Useful when you cannot determine if the component is in the viewport without using IOScrollView. For example, a component located outside of IOScrollView will be considered visible at mount time if set to true.

Return Value

• ReactElement
  

  Returns a component that can detect visibility on the screen.

Example

Basic Usage Example

import { useState } from 'react';
import { Button, Dimensions, Text, View } from 'react-native';
import { ImpressionArea, IOScrollView } from '@granite-js/react-native';

export default function ImpressionAreaExample() {
  const [isImpressionStart, setIsImpressionStart] = useState(false);

  return (
    <>
      <Text>{isImpressionStart ? 'Impression Start' : 'Impression End'}</Text>
      <IOScrollView
        style={{
          flex: 1,
          margin: 16,
          backgroundColor: 'white',
        }}
      >
        <View
          style={{
            height: Dimensions.get('screen').height,
            borderWidth: 1,
            borderColor: 'black',
          }}
        >
          <Text>Scroll to here</Text>
        </View>

        <ImpressionArea
          onImpressionStart={() => setIsImpressionStart(true)}
          onImpressionEnd={() => setIsImpressionStart(false)}
        >
          <Button title="Button" />
        </ImpressionArea>
      </IOScrollView>
    </>
  );
}

Example of Detection at Mount Time

When ImpressionArea is not located inside a component like IOScrollView, setting UNSAFE__impressFallbackOnMount to true will consider the component as visible when it is mounted.

import { useState } from 'react';
import { Button, Dimensions, ScrollView, Text, View } from 'react-native';
import { ImpressionArea } from '@granite-js/react-native';

export default function ImpressionArea2Example() {
  const [isImpressionStart, setIsImpressionStart] = useState(false);

  return (
    <>
      <Text>{isImpressionStart ? 'Impression Start' : 'Impression End'}</Text>
      <ScrollView
        style={{
          flex: 1,
          margin: 16,
          backgroundColor: 'white',
        }}
      >
        <View
          style={{
            height: Dimensions.get('screen').height,
            borderWidth: 1,
            borderColor: 'black',
          }}
        >
          <Text>Scroll to here</Text>
        </View>

        <ImpressionArea
          UNSAFE__impressFallbackOnMount={true}
          onImpressionStart={() => setIsImpressionStart(true)}
          onImpressionEnd={() => setIsImpressionStart(false)}
        >
          <Button title="Button" />
        </ImpressionArea>
      </ScrollView>
    </>
  );
}