1import { useTheme, useScrollToTop } from '@react-navigation/native';
2import React, { PropsWithChildren, useRef } from 'react';
3import { ScrollViewProps, ScrollView as RNScrollView, Platform } from 'react-native';
4import {
5  NativeViewGestureHandlerProps,
6  ScrollView as RNGHScrollView,
7} from 'react-native-gesture-handler';
8
9import Colors, { ColorTheme } from '../constants/Colors';
10
11type ThemedColors = keyof typeof Colors.light & keyof typeof Colors.dark;
12
13type StyledScrollViewProps = PropsWithChildren<
14  ScrollViewProps &
15    NativeViewGestureHandlerProps & {
16      lightBackgroundColor?: string;
17      darkBackgroundColor?: string;
18    }
19>;
20
21function useThemeBackgroundColor(props: StyledScrollViewProps, colorName: ThemedColors) {
22  const theme = useTheme();
23  const themeName = theme.dark ? ColorTheme.DARK : ColorTheme.LIGHT;
24  const colorFromProps =
25    themeName === ColorTheme.DARK ? props.darkBackgroundColor : props.lightBackgroundColor;
26
27  if (colorFromProps) {
28    return colorFromProps;
29  } else {
30    return Colors[themeName][colorName];
31  }
32}
33
34export default function NavigationScrollView(props: StyledScrollViewProps) {
35  const ref = useRef(null);
36  const { style, ...otherProps } = props;
37  const backgroundColor = useThemeBackgroundColor(props, 'bodyBackground');
38
39  useScrollToTop(ref);
40
41  const ScrollView = Platform.OS === 'android' ? RNScrollView : RNGHScrollView;
42
43  return <ScrollView style={[{ backgroundColor }, style]} {...otherProps} ref={ref} />;
44}
45