ScrollViewInertialBackground

Adds background colors to the top and bottom spaces of iOS ScrollView content to provide a natural visual effect when scrolling. In iOS, when scrolling reaches the end, a slight bouncing effect occurs, known as the Bounce effect. Setting background colors in the spaces above and below the content can provide a more consistent user experience.

Signature

function ScrollViewInertialBackground({
  topColor,
  bottomColor,
  spacer: _spacer,
}: ScrollViewInertialBackgroundProps): import('react/jsx-runtime').JSX.Element;

Parameter

• propsobject
  

  props object passed to the component.

  • props.topColorstring
    

    Background color to apply to the top area of the scroll. Default is adaptive.background which is automatically applied based on the system theme.

  • props.bottomColorstring
    

    Background color to apply to the bottom area of the scroll. Default is adaptive.background which is automatically applied based on the system theme.

  • props.spacernumber
    

    Specifies the size of the space between the top and bottom areas where the background color is applied. Default uses the screen height obtained from `useWindowDimensions`.

Example

Adding background colors to the top and bottom of a scroll view

Adds red background color to the top and blue to the bottom of the scroll view. The background color is applied to areas outside the scroll.

import { ScrollView, View, Text } from 'react-native';
import { ScrollViewInertialBackground } from '@granite-js/react-native';

const dummies = Array.from({ length: 20 }, (_, i) => i);

export function InertialBackgroundExample() {
  return (
    <ScrollView>
      <ScrollViewInertialBackground topColor="red" bottomColor="blue" />
      {dummies.map((i) => (
        <View
          key={`dummy-${i}`}
          style={{ width: '100%', height: 100, borderBottomColor: 'black', borderBottomWidth: 1 }}
        >
          <Text>Try scrolling.</Text>
        </View>
      ))}
    </ScrollView>
  );
}