Skip to content
Docs
Components
Layout
ScrollBox

ScrollBox

Wrapper around ScrollView component from react-native, it accepts every props from react native ScrollView component.

Import

import { ScrollBox } from "react-native-ficus-ui";

Usage

EDITABLE EXAMPLE
<ScrollBox h={100}>
  <VStack spacing="md">

    <HStack spacing={10}>
      <Box h={40} w={40} bg="green.500" />
      <Box h={40} w={40} bg="teal.500" />
      <Box h={40} w={40} bg="yellow.500" />
      <Box h={40} w={40} bg="red.500" />
      <Box h={40} w={40} bg="blue.500" />
      <Box h={40} w={40} bg="gray.500" />
    </HStack>

    <HStack spacing={10}>
      {['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'].map(shadow => (
        <Box
          h={40}
          w={40}
          bg="white"
          borderRadius="sm"
          shadow={shadow}
          justifyContent="center"
          alignItems="center"
        >
          <Text>{shadow}</Text>
        </Box>
      ))}
    </HStack>

    <HStack spacing={10}>
      {['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', 'full'].map(radius => (
        <Box h={40} w={40} borderRadius={radius} bg="blue.400" />
      ))}
    </HStack>
  </VStack>
</ScrollBox>

Props

Extends every Box and ScrollView from React Native props.

SafeAreaBoxTabs