react-native#ScrollView TypeScript Examples

function ErrorFallback({ resetErrorBoundary, error }: FallbackProps) {
  return (
    <ScreenWrapper>
      <ScrollView>
        <MyHeader>App Crashed:</MyHeader>
        <MyText style={{ marginVertical: 40, fontSize: 16 }}>
          {error?.message}
        </MyText>
        <MyButton
          style={{ marginBottom: 20 }}
          secondary
          onPress={() => Clipboard.setString(error?.stack || "")}
        >
          copy stacktrace to clipboard
        </MyButton>
        <MyButton
          style={{ marginBottom: 20 }}
          secondary
          onPress={() =>
            Linking.openURL("https://github.com/benawad/vsinder/issues")
          }
        >
          report a bug
        </MyButton>
        <MyButton onPress={resetErrorBoundary}>reload app</MyButton>
      </ScrollView>
    </ScreenWrapper>
  );
}

Onboarding = () => {
  const scrollRef = React.useRef<ScrollView>(null);
  return (
    <Box flex={1} backgroundColor="white">
      <StatusBar barStyle="light-content" />
      <ScrollView
        ref={scrollRef}
        horizontal
        snapToInterval={width}
        decelerationRate="fast"
        showsHorizontalScrollIndicator={false}
        bounces={false}
      >
        <Welcome1 />
        <Welcome2 {...{ scrollRef }} />
        <Welcome3 />
        <Welcome4 />
        <Welcome5 />
        <Onboarding1 />
      </ScrollView>
    </Box>
  );
}

Permissions = () => {
  const [i18n] = useI18n();
  return (
    <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.content}>
      <Box paddingHorizontal="xl">
        <Box paddingHorizontal="l" marginTop="m">
          <Text
            variant="bodyTitle"
            color="overlayBodyText"
            marginHorizontal="l"
            marginBottom="l"
            textAlign="center"
            accessibilityRole="header"
          >
            {i18n.translate('OnboardingPermissions.Title')}
          </Text>
        </Box>
        <Box marginBottom="l">
          <Text variant="bodyText" color="overlayBodyText" textAlign="center">
            {i18n.translate('OnboardingPermissions.Body')}
          </Text>
        </Box>
        <Box marginBottom="l">
          <Text variant="bodyText" color="overlayBodyText" textAlign="center">
            {i18n.translate('OnboardingPermissions.Body2')}
          </Text>
        </Box>
        <Box marginBottom="l">
          <Text variant="bodyText" color="overlayBodyText" textAlign="center">
            {i18n.translate('OnboardingPermissions.Body3')}
          </Text>
        </Box>
      </Box>
    </ScrollView>
  );
}

RNMasonryScrollView = ({
  children = [],
  columns = 2,
  columnStyle = null,
  oddColumnStyle = null,
  evenColumnStyle = null,
  horizontal,
  ...otherProps
}: RNMasonryScrollViewProps) => {
  const masonryGrid = generateMasonryGrid(children, columns);

  return (
    <ScrollView
      contentContainerStyle={
        horizontal ? styles.horizontalColumnStyle : styles.verticalColumnStyle
      }
      horizontal={horizontal}
      {...otherProps}
    >
      {masonryGrid.map((column, columnIndex) => {
        return (
          <View
            key={columnIndex}
            style={[
              !horizontal
                ? styles.horizontalColumnStyle
                : styles.verticalColumnStyle,
              columnStyle,
              columnIndex % 2 === 0 ? evenColumnStyle : oddColumnStyle
            ]}
          >
            {column.map(item => item)}
          </View>
        );
      })}
    </ScrollView>
  );
}

render() {
        const { gradientChart } = this.props;

        if (!gradientChart || gradientChart.length <= 0) {
            return null;
        }

        return (
            <>
                <Container style={styles.contentContainer}>
                    <Text style={[TextStyles.h3, styles.title1]}>
                        Mood <Text style={styles.title2}>this week</Text>
                    </Text>
                </Container>
                <ScrollView
                    ref={this.scrollView}
                    onContentSizeChange={() => {
                        this.scrollView.current.scrollToEnd({ animated: true });
                    }}
                    showsHorizontalScrollIndicator={false}
                    horizontal
                    style={[styles.gradientChartContainer]}
                    contentContainerStyle={{ overflow: 'visible' }}
                    automaticallyAdjustContentInsets={false}
                >
                    <GradientChart model={gradientChart} />
                </ScrollView>
            </>
        );
    }

ChangeLanguage: ElementType = ({ locale, strings: { languages: { title } }, languages: { long }, changeLocale, toggleChangeLanguage }: Props) => {
  const onButtonPress = (selectedLocale: string) => {
    selectedLocale !== locale && changeLocale(selectedLocale);
    toggleChangeLanguage(false);
  };

  return (
    <>
      <View style={styles.titleWrapper}>
        <Text style={styles.title} bold>{title}</Text>
      </View>

      <ScrollView
        contentContainerStyle={{ alignItems: 'center' }}
        showsVerticalScrollIndicator={false}
      >
        {
            Object.keys(long).map((key: string, index: number) => (
              <TouchableOpacity key={index} onPress={() => onButtonPress(key)}>
                <View style={[styles.languageButton, key === locale && { backgroundColor: MAIN_COLOR }]}>
                  <Text style={[styles.text, key === locale && { color: '#fff' }]} black>{long[key]}</Text>
                </View>
              </TouchableOpacity>
            ))
          }
      </ScrollView>
    </>
  );
}

CalculatorModal: FC<CalculatorModalProps> = () => {
  const {t} = useTranslation();
  const insets = useSafeArea();
  const navigation = useNavigation<StackNavigationProp<any>>();

  return (
    <ScrollView
      keyboardShouldPersistTaps="always"
      style={styles.container}
      contentContainerStyle={[
        styles.contentContainer,
        {paddingBottom: insets.bottom + SPACING_BOTTOM}
      ]}>
      <ModalHeader
        heading="calculator:heading"
        color="amber"
        onClosePress={() => navigation.goBack()}
      />
      <View style={styles.top}>
        <Illustration
          source={CalculatorIllustration}
          accessibilityIgnoresInvertColors={false}
          accessibilityHint={t('calculator:illustrationAlt')}
          accessibilityLabel={t('calculator:illustrationAlt')}
        />
        <Markdown markdownStyles={markdownStyles}>
          {t('calculator:body')}
        </Markdown>
        <Spacing s={18} />
        <Text style={styles.highlight}>{t('calculator:highlight')}</Text>
        <Spacing s={50} />
      </View>
    </ScrollView>
  );
}

DataTable: FC<Props> = ({header, rows, tableWidths}) => {
  const styles = useDynamicValue(dynamicStyles);
  return (
    <>
      <Text style={styles.outputText}>Output</Text>

      <ScrollView
        testID="table"
        accessibilityLabel="output table"
        horizontal={true}
        bounces={false}
      >
        <View style={styles.outPutContainer}>
          <ScrollView bounces={false}>
            <Table borderStyle={styles.tableBorder}>
              <Row
                data={header}
                style={styles.head}
                textStyle={styles.headerText}
                widthArr={tableWidths.current}
              />
              <Rows
                data={rows}
                widthArr={tableWidths.current}
                textStyle={styles.rowTxt}
              />
            </Table>
          </ScrollView>
        </View>
      </ScrollView>
    </>
  );
}

LargeText: React.FC<{ children: string }> = ({ children }) => {
  const styles = useThemedStyles(themedStyles);

  if (Platform.OS === 'ios') {
    /**
     * A readonly TextInput is used because large Text blocks sometimes don't render on iOS
     * See this issue https://github.com/facebook/react-native/issues/19453
     * Note: Even with the fix mentioned in the comments, text with ~10,000 lines still fails to render
     */
    return (
      <TextInput
        style={[styles.content, styles.largeContent]}
        multiline
        editable={false}
      >
        {children}
      </TextInput>
    );
  }

  return (
    <View style={styles.largeContent}>
      <ScrollView nestedScrollEnabled>
        <View>
          <Text style={styles.content}>{children}</Text>
        </View>
      </ScrollView>
    </View>
  );
}

KeyboardAwareScrollView = React.forwardRef<
  ScrollView,
  ScrollViewProps & { children: ReactNode; scrollToEndOnKeyboardOpen?: boolean }
>(({ scrollToEndOnKeyboardOpen, ...props }, ref) => {
  const localRef = useRef<ScrollView>(null);
  return (
    <ScrollView
      ref={(r) => {
        if (ref) {
          // @ts-ignore
          ref.current = r;
        }
        // @ts-ignore
        localRef.current = r;
      }}
      contentInset={useKeyboardContentInset(() => {
        if (scrollToEndOnKeyboardOpen) {
          localRef.current?.scrollToEnd();
        }
      })}
      {...props}
    />
  );
})

function ErrorFallback({ resetErrorBoundary, error }: FallbackProps) {
  return (
    <ScreenWrapper>
      <ScrollView>
        <MyHeader>App Crashed:</MyHeader>
        <MyText style={{ marginVertical: 40, fontSize: 16 }}>
          {error?.message}
        </MyText>
        <MyButton
          style={{ marginBottom: 20 }}
          secondary
          onPress={() => Clipboard.setString(error?.stack || "")}
        >
          copy stacktrace to clipboard
        </MyButton>
        <MyButton onPress={resetErrorBoundary}>reload app</MyButton>
      </ScrollView>
    </ScreenWrapper>
  );
}

App = () => {
  return (
    <SafeAreaView>
      <ScrollView contentContainerStyle={styles.scrollViewContent}>
        <Spacing />
        <Logo />
        <Spacing />
        <Donut2 />
        <Spacing />
        <Donut />
        <Spacing />
        <Progress />
        <Spacing />
        <Stopwatch />
        <Spacing />
        <RandomArc />
        <Spacing />
        <Slider />
        <Spacing />
      </ScrollView>
    </SafeAreaView>
  );
}

Debug = () => {
  const { statusText } = useContactTracer()

  return (
    <MyBackground variant="light">
      <StatusBar
        barStyle="dark-content"
        backgroundColor={COLORS.PRIMARY_LIGHT}
      />
      <SafeAreaView style={{ flex: 1 }}>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}
        >
          <Text>{statusText}</Text>
        </ScrollView>
      </SafeAreaView>
    </MyBackground>
  )
}

SymptomOnsetDateScreen = () => {
  const i18n = useI18n();
  const navigation = useNavigation();
  const secondaryButtonOnPress = useCallback(() => navigation.navigate('TekUploadNoDate'), [navigation]);
  const {data, setSymptomOnsetDate} = useContext(FormContext);
  return (
    <BaseTekUploadView
      buttonText={i18n.translate('DataUpload.SymptomOnsetDate.CTA')}
      contagiousDateInfo={{dateType: ContagiousDateType.SymptomOnsetDate, date: parseDateString(data.symptomOnsetDate)}}
      secondaryButtonText={i18n.translate('DataUpload.SymptomOnsetDate.CTA2')}
      secondaryButtonOnPress={secondaryButtonOnPress}
    >
      <ScrollView style={styles.flex}>
        <Box paddingHorizontal="m">
          <StepXofY currentStep={3} />
          <Text variant="bodyTitle" marginBottom="l" accessibilityRole="header" accessibilityAutoFocus>
            {i18n.translate('DataUpload.SymptomOnsetDate.Title1')}
          </Text>
          <DatePicker
            daysBack={DATE_PICKER_DAYS_BACK}
            selectedDate={data.symptomOnsetDate}
            setDate={setSymptomOnsetDate}
          />
          <Text marginTop="l" color="lightText" variant="bodyDescription" marginBottom="s">
            {i18n.translate('DataUpload.SymptomOnsetDate.Title2')}
          </Text>
          <Text marginBottom="m" variant="bodyDescription" color="lightText">
            {i18n.translate('DataUpload.SymptomOnsetDate.Body1')}
          </Text>
        </Box>
      </ScrollView>
    </BaseTekUploadView>
  );
}

function App() {
  const [nightMode, setNightmode] = useState(false);

  return (
    <Provider theme={nightMode ? DarkTheme : DefaultTheme}>
      <ThemeProvider theme={nightMode ? DarkTheme : DefaultTheme}>
        <StatusBar
          backgroundColor={
            nightMode ? DarkTheme.colors.surface : DefaultTheme.colors.primary
          }
          barStyle={'light-content'}
        />
        <Surface style={styles.container}>
          <Appbar.Header>
            <Appbar.Content title="React Native Paper Form Builder" />
            <Appbar.Action
              icon={nightMode ? 'brightness-7' : 'brightness-3'}
              onPress={() => setNightmode(!nightMode)}
            />
          </Appbar.Header>
          <SafeAreaView style={styles.container}>
            <ScrollView
              showsVerticalScrollIndicator={false}
              style={styles.scrollView}
              keyboardShouldPersistTaps={'handled'}>
              <AdvancedExample />
            </ScrollView>
            {Platform.OS === 'ios' && <KeyboardSpacer />}
          </SafeAreaView>
        </Surface>
      </ThemeProvider>
    </Provider>
  );
}

SignScaffold = ({children}: SignScaffoldProps) => {
  return (
    <ScrollView style={styles.container}>
      <View style={styles.background}>
        <Image style={styles.backgroundImage} source={backgroundTop} />
      </View>
      <View>{children}</View>
    </ScrollView>
  );
}

App = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Section title="Step One">
            Edit <Text style={styles.highlight}>App.js</Text> to change this
            screen and then come back to see your edits.
          </Section>
          <Section title="See Your Changes">
            <ReloadInstructions />
          </Section>
          <Section title="Debug">
            <DebugInstructions />
          </Section>
          <Section title="Learn More">
            Read the docs to discover what to do next:
          </Section>
          <LearnMoreLinks />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

measure = async (
  ref: View | Text | ScrollView
): Promise<Position> =>
  new Promise((resolve) =>
    ref.measureInWindow((x: number, y: number, width: number, height: number) =>
      resolve({
        x,
        y,
        width,
        height
      })
    )
  )

Checkout = (props: Props): JSX.Element => (
  <ScrollView>
    {props.products.length > 0 ? (
      _renderCheckout(props)
    ) : (
      <Text style={styles.textEmpty}>You have not ordered any item</Text>
    )}
  </ScrollView>
)

function DeviceList(props: {
  devices: IHealthDevice[];
  connect: (deviceId: string) => Promise<void>;
  refresh: () => void;
}) {
  const [refreshing, setRefreshing] = useState(false);
  const {devices, refresh, connect} = props;
  if (devices.length == 0) {
    return <NotFound retry={refresh} />;
  }
  return (
    <View style={{flex: 4}}>
      <Counter value={devices.length} />
      <ScrollView
        style={{flex: 1}}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={() => {
              setRefreshing(true);
              refresh();
              // Hack! No need to restore refreshing state to false since
              // component will be unmounted by the end of the scan process
            }}
          />
        }>
        {devices.map(device => {
          return <Device key={device.id} device={device} connect={connect} />;
        })}
      </ScrollView>
    </View>
  );
}

DataScreen: FunctionComponent<DataScreenProps> = ({
  componentId,
}) => {
  return (
    <ScrollView style={styles.content}>
      <SyncComponent />
      <DailyStepsPreview componentId={componentId} />
      <DailyDistancePreview componentId={componentId} />
      <HeartRatePreview componentId={componentId} />
    </ScrollView>
  );
}

export function SettingsList() {
    const navigation = useNavigation<SettingsNavigationProp>();
    const handleLibraryClick = useCallback(() => { navigation.navigate('Library'); }, [navigation]);
    const handleCacheClick = useCallback(() => { navigation.navigate('Cache'); }, [navigation]);
    const handleSentryClick = useCallback(() => { navigation.navigate('Sentry'); }, [navigation]);

    return (
        <ScrollView>
            <SafeAreaView>
                <ListButton onPress={handleLibraryClick}>{t('jellyfin-library')}</ListButton>
                <ListButton onPress={handleCacheClick}>{t('setting-cache')}</ListButton>
                <ListButton onPress={handleSentryClick}>{t('error-reporting')}</ListButton>
            </SafeAreaView>
        </ScrollView>
    );
}

export default function Preferences() {
  const styles = useStyles();

  const navigation = useNavigation<StackNavProp<'Profile'>>();
  const { navigate } = navigation;

  const hasFixedColorScheme = FIXED_COLOR_SCHEME !== 'no-preference';

  return (
    <View style={styles.container}>
      <ScrollView>
        <View style={styles.bodyContainer}>
          <View style={styles.menuContainer}>
            {!hasFixedColorScheme && (
              <MenuItem
                title={t('Dark Mode')}
                iconName="Dark"
                onPress={() => navigate('DarkMode')}
              />
            )}
          </View>
        </View>
      </ScrollView>
    </View>
  );
}

function SearchMain({goBrief, showBookView, showSimpleView}: IProps) {
    if (showBookView) {
        return (
            <BookList goBrief={goBrief}/>
        )
    } else if (showSimpleView) {
        return (
            <Simple goBrief={goBrief}/>
        )
    } else {
        return (
            <ScrollView>
                <Intro goBrief={goBrief}/>
                <SearchHistory/>
            </ScrollView>
        );
    }
}

StoriesWrapperWeb = ({ story }) => (
  <SafeAreaView style={styles.defaultScreen}>
    <ScrollView>
      <View>
        {story && story()}
      </View>
    </ScrollView>
  </SafeAreaView>
)

AuthLayout = ({ children }: { children: ReactNode }) => (
  <ScrollView>
    <GridContainer>
      <GridRow>
        <StyledImage
          resizeMode="contain"
          source={require('../../assets/logo.png')}
        />
      </GridRow>
      {children}
    </GridContainer>
  </ScrollView>
)

PinnedVideo: React.FC = () => {
  const {rtcProps, styleProps} = useContext(PropsContext);
  const [width, setWidth] = useState(Dimensions.get('screen').width);

  useEffect(() => {
    Dimensions.addEventListener('change', () => {
      setWidth(Dimensions.get('screen').width);
    });
  });

  return (
    <>
      <MaxUidConsumer>
        {(maxUsers) =>
          maxUsers[0] ? ( // check if audience & live don't render if uid === local
            <MaxVideoView user={maxUsers[0]} key={maxUsers[0].uid} />
          ) : null
        }
      </MaxUidConsumer>
      <ScrollView
        showsHorizontalScrollIndicator={false}
        horizontal={true}
        style={{
          ...styles.minContainer,
          width: width,
          ...(styleProps?.minViewContainer as Object),
        }}>
        <MinUidConsumer>
          {(minUsers) =>
            minUsers.map((user) =>
              rtcProps.role === ClientRole.Audience &&
              user.uid === 'local' ? null : (
                <MinVideoView user={user} key={user.uid} showOverlay={true} />
              ),
            )
          }
        </MinUidConsumer>
      </ScrollView>
    </>
  );
}

DataSharingScreen = () => {
  const navigation = useNavigation();
  const [i18n] = useI18n();
  const close = useCallback(() => navigation.goBack(), [navigation]);
  const [exposureStatus] = useExposureStatus();
  const [codeValue, setCodeValue] = useState('');
  const handleChange = useCallback(text => setCodeValue(text), []);
  // if keySubmissionStatus is None we need the 1-time code, otherwise we should go right to consent
  const [isVerified, setIsVerified] = useState(exposureStatus.type === 'diagnosed');
  const onError = useCallback(() => {
    Alert.alert(i18n.translate('DataUpload.ErrorTitle'), i18n.translate('DataUpload.ErrorBody'), [
      {text: i18n.translate('DataUpload.ErrorAction')},
    ]);
    setIsVerified(false);
  }, [i18n]);
  const handleVerify = useCallback(async () => {
    setIsVerified(true);
  }, []);

  const handleUploaded = useCallback(() => {
    navigation.goBack();
  }, [navigation]);

  return (
    <Box backgroundColor="overlayBackground" flex={1}>
      <SafeAreaView style={styles.flex}>
        <Toolbar
          title={isVerified ? i18n.translate('DataUpload.ConsentTitle') : ''}
          navIcon="icon-back-arrow"
          navText={i18n.translate('DataUpload.Cancel')}
          navLabel={i18n.translate('DataUpload.Cancel')}
          onIconClicked={close}
        />
        <ScrollView style={styles.flex} keyboardShouldPersistTaps="handled">
          {!isVerified && (
            <FormView value={codeValue} onChange={handleChange} onSuccess={handleVerify} onError={onError} />
          )}
          {isVerified && <ConsentView onSuccess={handleUploaded} onError={onError} />}
        </ScrollView>
      </SafeAreaView>
    </Box>
  );
}

private scrollView: React.RefObject<ScrollView> = React.createRef();