Function ScrollView

components/ScrollView/ScrollView.js:14–52

({ driver, onScroll, primary, style, ...otherProps })

// that is aware of the animation driver context, but want the shoutem themed styling,
// you should use the plain RN ScrollView and connect it to the 'shoutem.ui.ScrollView' stylename
const ScrollView = ({ driver, onScroll, primary, style, ...otherProps }) => {
  const animationDriver = useRef(
    driver ||
      new ScrollDriver(
        { useNativeDriver: true, nativeScrollEventThrottle: 20 },
        onScroll,
      ),
  );
  const animationDriverContext = useContext(AnimationDriverContext);

  // When transition to and back from the screen containing the scrollview,
  // we want to switch to appropriate animation driver. We use the following hook
  // to derive the new driver and cascading styles before the actual navigation transition is done
  // to avoid rerendering when the actual nav transition completes
  useFocusEffect(
    useCallback(() => {
      const { setAnimationDriver } = animationDriverContext;

      if (setAnimationDriver) {
        setAnimationDriver(animationDriver.current, primary);
      }

      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []),
  );

  useEffect(() => {
    if (driver && animationDriver.current !== driver) {
      animationDriver.current = driver;
    }
  }, [driver]);

  const { scrollViewProps } = animationDriver?.current;
  const { contentContainerStyle, ...otherStyle } = style;

  return (
    <Animated.ScrollView
      contentContainerStyle={contentContainerStyle}
      {...scrollViewProps}
      {..._.omit(otherProps, 'onScroll')}
      style={otherStyle}
    />