ScrollView

Provides a scrolling container that can host multiple components and views.

<>
  <ScrollView h="$80" w="$80">
    <Center mt="$3" mb="$4">
      <Heading fontSize="xl">Primary</Heading>
    </Center>
    <VStack flex={1}>
      {Object.keys(config.tokens.colors).map((key, index) => {
        if (
          key.includes("primary") &&
          !(
            key.includes("600") ||
            key.includes("700") ||
            key.includes("800") ||
            key.includes("900") ||
            key.includes("950")
          )
        )
          return (
            <Center py="$4" bg={config.tokens.colors[key]}>
              <Text>{key}</Text>
            </Center>
          )
      })}
    </VStack>
    <Center mt="$10" mb="$4">
      <Heading fontSize="$xl">Yellow</Heading>
    </Center>
    <VStack flex="1">
      {Object.keys(config.tokens.colors).map((key, index) => {
        if (
          key.includes("yellow") &&
          !(
            key.includes("600") ||
            key.includes("700") ||
            key.includes("800") ||
            key.includes("900") ||
            key.includes("950")
          )
        )
          return (
            <Center py="$4" bg={config.tokens.colors[key]}>
              <Text>{key}</Text>
            </Center>
          )
      })}
    </VStack>
    <Center mt="$10" mb="$4">
      <Heading fontSize="$xl">Violet</Heading>
    </Center>
    <VStack flex="1">
      {Object.keys(config.tokens.colors).map((key, index) => {
        if (
          key.includes("violet") &&
          !(
            key.includes("600") ||
            key.includes("700") ||
            key.includes("800") ||
            key.includes("900") ||
            key.includes("950")
          )
        )
          return (
            <Center py="$4" bg={config.tokens.colors[key]}>
              <Text>{key}</Text>
            </Center>
          )
      })}
    </VStack>
  </ScrollView>
</>

Note: You can refer here to learn about default styling of FlatList component

Import

To use this component in your project, include the following import statement in your file.

import { ScrollView } from '@gluestack-ui/themed';

Anatomy

The structure provided below can help you identify and understand a badge component's various parts.

export default () => <ScrollView></ScrollView>

Props

gluestack-ui ScrollView component is created using ScrollView component from react-native. It extends all the props supported by React Native ScrollView, utility props and the props mentioned below.

ScrollView

Name	Value	Default
children	any	-

Edit this page on GitHub