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