Looking for documentation on gluestack-ui with NativeWind (alpha) version? Refer to this link.

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
-