SafeAreaBox

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

Import

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

Usage

Background color

EDITABLE EXAMPLE

<SafeAreaBox bg="blue.100" h="100%">
  <HStack spacing={10} p="lg">
    <Box h={40} w={40} bg="green.500" />
    <Box h={40} w={40} bg="teal.500" />
    <Box h={40} w={40} bg="yellow.500" />
  </HStack>
</SafeAreaBox>

Props

`bg`

The background color property (backgroundColor style prop in StyleSheet)

Type	Required
string	No

`m`

The margin property (margin style prop in StyleSheet)

Type	Required
number, string	No

`mt`

The margin top property (marginTop style prop in StyleSheet)

Type	Required
number, string	No

`mb`

The margin bottom property (marginBottom style prop in StyleSheet)

Type	Required
number, string	No

`mr`

The margin right property (marginRight style prop in StyleSheet)

Type	Required
number, string	No

`ml`

The margin left property (marginLeft style prop in StyleSheet)

Type	Required
number, string	No

`mx`

The margin horizontal property (marginHorizontal style prop in StyleSheet)

Type	Required
number, string	No

`my`

The margin vertical property (marginVertical style prop in StyleSheet)

Type	Required
number, string	No

`h`

The height property (height style prop in StyleSheet)

Type	Required
number, string	No

`w`

The width property (width style prop in StyleSheet)

Type	Required
number, string	No

`minH`

The minimum height property (minHeight style prop in StyleSheet)

Type	Required
number, string	No

`minW`

The minimum width property (minWidth style prop in StyleSheet)

Type	Required
number, string	No

`flex`

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

Type	Required
number	No

`flexDirection`

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

Type	Required
enum("row", "column", "row-reverse", "column-reverse")	No

`direction`

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

Type	Required
enum("row", "column", "row-reverse", "column-reverse")	No

`flexWrap`

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

Type	Required
enum("wrap", "nowrap", "wrap-reverse")	No

`wrap`

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

Type	Required
enum("wrap", "nowrap", "wrap-reverse")	No

`flexGrow`

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

Type	Required
number	No

`grow`

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

Type	Required
number	No

`flexBasis`

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

Type	Required
number, string	No

`basis`

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

Type	Required
number, string	No

`flexShrink`

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

Type	Required
number	No

`shrink`

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

Type	Required
number	No

`justifyContent`

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

Type	Required
enum("flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly")	No

`alignItems`

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

Type	Required
enum("flex-start", "flex-end", "center", "stretch", "baseline")	No

`alignSelf`

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

Type	Required
enum("auto", "flex-start", "flex-end", "center", "stretch", "baseline")	No

`position`

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

Type	Required
enum("absolute", "relative")	No

`top`

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

Type	Required
number	No

`bottom`

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

Type	Required
number	No

`right`

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

Type	Required
number	No

`left`

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

Type	Required
number	No

`overflow`

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

Type	Required	Default
enum("visible", "scroll", "hidden")	No	"hidden"

`borderRadius`

The border radius property (borderRadius style prop in StyleSheet)

Type	Required	Default
number, string	No	none

`borderTopRadius`

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

Type	Required	Default
number, string	No	none

`borderBottomRadius`

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

Type	Required	Default
number, string	No	none

`borderLeftRadius`

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

Type	Required	Default
number, string	No	none

`borderRightRadius`

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

Type	Required	Default
number, string	No	none

`borderTopLeftRadius`

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

Type	Required	Default
number, string	No	none

`borderTopRightRadius`

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

Type	Required	Default
number, string	No	none

`borderBottomLeftRadius`

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

Type	Required	Default
number, string	No	none

`borderBottomRightRadius`

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

Type	Required	Default
number, string	No	none

`borderColor`

The border color property (borderColor style prop in StyleSheet)

Type	Required
string	No

`borderTopColor`

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

Type	Required
string	No

`borderBottomColor`

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

Type	Required
string	No

`borderRightColor`

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

Type	Required
string	No

`borderLeftColor`

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

Type	Required
string	No

`borderWidth`

The border width property (borderWidth style prop in StyleSheet)

Type	Required
number	No

`borderTopWidth`

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

Type	Required
number	No

`borderBottomWidth`

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

Type	Required
number	No

`borderRightWidth`

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

Type	Required
number	No

`borderLeftWidth`

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

Type	Required
number	No

`shadow`

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

Type	Required
number	No

`shadowColor`

The shadow color property (shadowColor style props in StyleSheet)

Type	Required
string	No

`opacity`

The opacity property (opacity style prop in StyleSheet)

Type	Required
number	No

Box ScrollBox