Box

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

Import

import { Box } from 'react-native-ficus-ui';

Usage

Background color

EDITABLE EXAMPLE

<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>

Shadows

EDITABLE EXAMPLE

<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"
      _dark={{ shadowColor: 'white' }}
    >
      <Text>{shadow}</Text>
    </Box>
  ))}
</HStack>

🎉

React Native 0.76 introduces new style props boxShadow and filter for View, those props are now available on Ficus UI from version 1.3.0. You can pass boxShadow and filter props directly to Box component.

https://reactnative.dev/blog/2024/10/23/release-0.76-new-architecture#box-shadow-and-filter-style-props (opens in a new tab)

EDITABLE EXAMPLE

<Box
  h={40}
  w={40}
  bg="white"
  borderRadius="sm"
  boxShadow="5 5 5 0 rgba(255, 0, 0, 0.5)"
/>

Borders

EDITABLE EXAMPLE

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

Border radius

EDITABLE EXAMPLE

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

Flex

EDITABLE EXAMPLE

<Box direction="row">
  <Box h={40} w={40} bg="red.400" flex={1} />
  <Box h={40} w={40} bg="yellow.400" flex={2} />
  <Box h={40} w={40} bg="green.400" flex={2} />
</Box>

Background image

EDITABLE EXAMPLE

<Box
  borderRadius="md"
  h={150}
  bgImg={{
    uri:
      'https://venngage-wordpress.s3.amazonaws.com/uploads/2018/09/Monochrome-Type-Simple-Background-Image.jpg',
  }}
/>

As prop

The as prop can be used to style any React Native component with Ficus UI.

EDITABLE EXAMPLE

<Box
  as={ReactNative.TouchableOpacity}
  bg="green.400"
  p="xl"
  mt="sm"
  borderRadius="md"
>
  <Text>Style any RN component with Ficus UI with "as" prop !</Text>
</Box>

Switch Center