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

<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

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

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

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

Borders

<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

<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

<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

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

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

Props

bg

The background color property (backgroundColor style prop in StyleSheet)

bgImg

The background image property. Will use ImageBackground component as parent wrapper.

bgMode

The background image mode property.

m

The margin property (margin style prop in StyleSheet)

mt

The margin top property (marginTop style prop in StyleSheet)

mb

The margin bottom property (marginBottom style prop in StyleSheet)

mr

The margin right property (marginRight style prop in StyleSheet)

ml

The margin left property (marginLeft style prop in StyleSheet)

mx

The margin horizontal property (marginHorizontal style prop in StyleSheet)

my

The margin vertical property (marginVertical style prop in StyleSheet)

p

The padding property (padding style prop in StyleSheet)

pt

The padding top property (paddingTop style prop in StyleSheet)

pb

The padding bottom property (paddingBottom style prop in StyleSheet)

pr

The padding right property (paddingRight style prop in StyleSheet)

pl

The padding left property (paddingLeft style prop in StyleSheet)

px

The padding horizontal property (paddingHorizontal style prop in StyleSheet)

py

The padding vertical property (paddingVertical style prop in StyleSheet)

gap

The gap property (gap style prop in StyleSheet)

gapX

The gapX property (rowGap style prop in StyleSheet)

gapY

The gapY property (columnGap style prop in StyleSheet)

h

The height property (height style prop in StyleSheet)

w

The width property (width style prop in StyleSheet)

minH

The minimum height property (minHeight style prop in StyleSheet)

minW

The minimum width property (minWidth style prop in StyleSheet)

flex

The flex property for container (flex style prop in StyleSheet)

flexDirection

The flex direction property for container (flexDirection style prop in StyleSheet)

direction

The flex direction property for container (flexDirection style prop in StyleSheet)

flexWrap

The flex wrap property for container (flexWrap style prop in StyleSheet)

wrap

The flex wrap property for container (flexWrap style prop in StyleSheet)

flexGrow

The flex grow property for container (flexGrow style prop in StyleSheet)

grow

The flex grow property for container (flexGrow style prop in StyleSheet)

flexBasis

The flex basis property for container (flexBasis style prop in StyleSheet)

basis

The flex basis property for container (flexBasis style prop in StyleSheet)

flexShrink

The flex shrink property for container (flexShrink style prop in StyleSheet)

shrink

The flex shrink property for container (flexShrink style prop in StyleSheet)

justifyContent

The justify content property for container (justifyContent style prop in StyleSheet)

alignItems

The align items property for container (alignItems style prop in StyleSheet)

alignSelf

The align self property for container (alignSelf style prop in StyleSheet)

position

The position property for container (position style prop in StyleSheet)

top

The top position property for container (top style prop in StyleSheet)

bottom

The bottom position property for container (bottom style prop in StyleSheet)

right

The right position property for container (right style prop in StyleSheet)

left

The left position property for container (left style prop in StyleSheet)

overflow

The overflow property for container (overflow style prop in StyleSheet)

borderRadius

The border radius property (borderRadius style prop in StyleSheet)

borderTopRadius

The border radius top property (borderTopLeftRadius and borderTopRightRadius style props in StyleSheet)

borderBottomRadius

The border radius bottom property (borderBottomLeftRadius and borderBottomRightRadius style props in StyleSheet)

borderLeftRadius

The border radius left property (borderTopLeftRadius and borderBottomLeftRadius style props in StyleSheet)

borderRightRadius

The border radius right property (borderTopRightRadius and borderBottomRightRadius style props in StyleSheet)

borderTopLeftRadius

The border radius top left property (borderTopLeftRadius style prop in StyleSheet)

borderTopRightRadius

The border radius top right property (borderTopRightRadius style prop in StyleSheet)

borderBottomLeftRadius

The border radius bottom left property (borderBottomLeftRadius style prop in StyleSheet)

borderBottomRightRadius

The border radius bottom right property (borderBottomRightRadius style prop in StyleSheet)

borderColor

The border color property (borderColor style prop in StyleSheet)

borderTopColor

The border top color property (borderTopColor style prop in StyleSheet)

borderBottomColor

The border bottom color property (borderBottomColor style prop in StyleSheet)

borderRightColor

The border right color property (borderRightColor style prop in StyleSheet)

borderLeftColor

The border left color property (borderLeftColor style prop in StyleSheet)

borderWidth

The border width property (borderWidth style prop in StyleSheet)

borderTopWidth

The border top width property (borderTopWidth style prop in StyleSheet)

borderBottomWidth

The border bottom width property (borderBottomWidth style prop in StyleSheet)

borderRightWidth

The border right width property (borderRightWidth style prop in StyleSheet)

borderLeftWidth

The border left width property (borderLeftWidth style prop in StyleSheet)

shadow

The shadow property (shadowOffset and elevation style props in StyleSheet)

shadowColor

The shadow color property (shadowColor style props in StyleSheet)

boxShadow

The boxShadow property (boxShadow style prop in StyleSheet)

filter

The filter property (filter style prop in StyleSheet)

opacity

The opacity property (opacity style prop in StyleSheet)