Utility Props | NativeBase

Style props are a way to alter the style of a component by simply passing props to it. It helps to save time by providing helpful shorthand ways to style components.

Style Props

The following table shows a list of every style prop and the properties within each group.

Margin and padding


Playground
const NBBox = props => {
  return <Box borderRadius="md" bg="primary.600" {...props} />;
};

function Component() {
  return <>
      {
      /* m="2" refers to the value of `theme.space[2]` */
    }
      <NBBox m="2" p="5" />
      {
      /* You can also use custom values */
    }
      <NBBox mx="auto" px="20" py="5" />
      {
      /* sets margin `8px` on all viewports and `16px` from the first breakpoint and up */
    }
      <NBBox m={[2, 3]} pt="10" pr="10" />
    </>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <Component />
      </Center>
    </NativeBaseProvider>;
}const NBBox = props => {
  return <Box borderRadius="md" bg="primary.600" {...props} />;
};

function Component() {
  return <>
      {
      /* m="2" refers to the value of `theme.space[2]` */
    }
      <NBBox m="2" p="5" />
      {
      /* You can also use custom values */
    }
      <NBBox mx="auto" px="20" py="5" />
      {
      /* sets margin `8px` on all viewports and `16px` from the first breakpoint and up */
    }
      <NBBox m={[2, 3]} pt="10" pr="10" />
    </>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <Component />
      </Center>
    </NativeBaseProvider>;
}

Prop

CSS Equivalent

Theme Key

m, margin

margin

space

mt, marginTop

margin-top

space

mr, marginRight

margin-right

space

mb, marginBottom

margin-bottom

space

ml, marginLeft

margin-left

space

margin-left and margin-right

space

margin-top and margin-bottom

space

p, padding

padding

space

pt, paddingTop

padding-top

space

pr, paddingRight

padding-right

space

pb, paddingBottom

padding-bottom

space

pl, paddingLeft

padding-left

space

padding-left and padding-right

space

padding-top and padding-bottom

space

Color and background color


Playground
function NBBox(props) {
  return <Box p="5" m="2" borderRadius="md" bg="primary.200" {...props} />;
}

function Component() {
  return <>
      {
      /* raw CSS color value */
    }
      <NBBox bg="#10b981" />
      {
      /* picks up a nested color value using dot notation */
    }
      {
      /* => `theme.colors.lightBlue[300]` */
    }
      <NBBox bgColor="cyan.100" py="3">
        {
        /* using theme colors to set text color */
      }
        <Text color="cyan.500" fontWeight="bold">
          {" "}
          I love NativeBase
        </Text>
      </NBBox>
      {
      /* verbose prop */
    }
      <NBBox backgroundColor="#eab308" />
    </>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <Component />
      </Center>
    </NativeBaseProvider>;
}function NBBox(props) {
  return <Box p="5" m="2" borderRadius="md" bg="primary.200" {...props} />;
}

function Component() {
  return <>
      {
      /* raw CSS color value */
    }
      <NBBox bg="#10b981" />
      {
      /* picks up a nested color value using dot notation */
    }
      {
      /* => `theme.colors.lightBlue[300]` */
    }
      <NBBox bgColor="cyan.100" py="3">
        {
        /* using theme colors to set text color */
      }
        <Text color="cyan.500" fontWeight="bold">
          {" "}
          I love NativeBase
        </Text>
      </NBBox>
      {
      /* verbose prop */
    }
      <NBBox backgroundColor="#eab308" />
    </>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <Component />
      </Center>
    </NativeBaseProvider>;
}

Prop

CSS Equivalent

Theme Key

color

colors

bg, background

background

colors

bgColor

background-color

colors

opacity

Note: Above props can be written in the format: [color]:alpha.[opacityToken], this gets converted into RGBA color format and the opacityToken is mapped to

Opacity


Playground
function App() {
  return <Stack space="2" alignItems="center">
      <HStack space="2" alignItems="center">
        <Center size="16" bg="primary.400:alpha.30" rounded="md" _text={{
        color: "white"
      }}>
          Box 1
        </Center>
        <Center size="16" bg="primary.400:alpha.70" rounded="md" _text={{
        color: "white"
      }}>
          Box 2
        </Center>
        <Center bg="primary.400" size="16" rounded="md" _text={{
        color: "white"
      }} shadow="1">
          Box 3
        </Center>
      </HStack>
    </Stack>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <App />
      </Center>
    </NativeBaseProvider>;
}function App() {
  return <Stack space="2" alignItems="center">
      <HStack space="2" alignItems="center">
        <Center size="16" bg="primary.400:alpha.30" rounded="md" _text={{
        color: "white"
      }}>
          Box 1
        </Center>
        <Center size="16" bg="primary.400:alpha.70" rounded="md" _text={{
        color: "white"
      }}>
          Box 2
        </Center>
        <Center bg="primary.400" size="16" rounded="md" _text={{
        color: "white"
      }} shadow="1">
          Box 3
        </Center>
      </HStack>
    </Stack>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <App />
      </Center>
    </NativeBaseProvider>;
}

Typography


Playground
const NBText = props => {
  return <Text m="2" {...props} />;
};

function Component() {
  return <>
      {
      /* font-size of `theme.fontSizes.2xl` */
    }
      <NBText fontSize="2xl" fontWeight="bold">
        Thank You{" "}
      </NBText>
      {
      /* text decoration `underline` */
    }
      <NBText textDecoration="underline">Merci Beaucoup</NBText>
      {
      /* font-size `'2em'` */
    }
      {
      /* font-weight of `theme.fontWeights.semibold i.e. 600` */
    }
      <NBText fontWeight="bold">Danke sehr </NBText>
      {
      /* letter-spacing `0.1 em` */
    }
      <NBText letterSpacing="2xl">Arigatou </NBText>
    </>;
}

function Example() {
  return <Center flex={1}>
      <Component />
    </Center>;
}const NBText = props => {
  return <Text m="2" {...props} />;
};

function Component() {
  return <>
      {
      /* font-size of `theme.fontSizes.2xl` */
    }
      <NBText fontSize="2xl" fontWeight="bold">
        Thank You{" "}
      </NBText>
      {
      /* text decoration `underline` */
    }
      <NBText textDecoration="underline">Merci Beaucoup</NBText>
      {
      /* font-size `'2em'` */
    }
      {
      /* font-weight of `theme.fontWeights.semibold i.e. 600` */
    }
      <NBText fontWeight="bold">Danke sehr </NBText>
      {
      /* letter-spacing `0.1 em` */
    }
      <NBText letterSpacing="2xl">Arigatou </NBText>
    </>;
}

function Example() {
  return <Center flex={1}>
      <Component />
    </Center>;
}

Prop

CSS Equivalent

Theme Key

fontFamily

font-family

fonts

fontSize

font-size

fontSizes

fontWeight

font-weight

fontWeights

lineHeight

line-height

lineHeights

letterSpacing

letter-spacing

letterSpacings

textAlign

text-align

fontStyle

font-style

textTransform

text-transform

textDecoration

text-decoration

Layout, width and height


Playground
const NBBox = props => {
  return <Box m="2" borderRadius="md" bg="primary.600" {...props} />;
};

function Component() {
  return <>
      {
      /* verbose */
    }
      <NBBox width="100%" height="8" />
      {
      /* shorthand */
    }
      <NBBox w="100%" h="32px" />
      {
      /* use boxSizing */
    }
      <NBBox boxSize="12" />
      {
      /* width `50%` */
    }
      <NBBox w="50%" h="8" />
      {
      /* width `256px` h="8" */
    }
      <NBBox w="256" />
      {
      /* width `"40px"` */
    }
      <NBBox w="40px" h="8" />
    </>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <Component />
      </Center>
    </NativeBaseProvider>;
}const NBBox = props => {
  return <Box m="2" borderRadius="md" bg="primary.600" {...props} />;
};

function Component() {
  return <>
      {
      /* verbose */
    }
      <NBBox width="100%" height="8" />
      {
      /* shorthand */
    }
      <NBBox w="100%" h="32px" />
      {
      /* use boxSizing */
    }
      <NBBox boxSize="12" />
      {
      /* width `50%` */
    }
      <NBBox w="50%" h="8" />
      {
      /* width `256px` h="8" */
    }
      <NBBox w="256" />
      {
      /* width `"40px"` */
    }
      <NBBox w="40px" h="8" />
    </>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <Component />
      </Center>
    </NativeBaseProvider>;
}

Prop

CSS Equivalent

Theme Key

w, width

width

sizes

h, height

height

sizes

minW, minWidth

min-width

sizes

maxW, maxWidth

max-width

sizes

minH, minHeight

min-height

sizes

maxH, maxHeight

max-height

sizes

d, display

display

boxSize

width, height

sizes

verticalAlign

vertical-align

overflow

overflowX

overflowY

Flexbox


Playground
const NBBox = props => {
  return <Box p="5" m="2" borderRadius="md" bg="primary.600" {...props} />;
};

function Component() {
  return <>
      {
      /* verbose */
    }
      <Box display="flex" flexDirection="row" justifyContent="space-between">
        <NBBox />
        <NBBox />
        <NBBox />
      </Box>
      {
      /* shorthand using the `Flex` component */
    }
      <Flex align="center" justify="center">
        <NBBox />
        <NBBox />
      </Flex>
    </>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <Component />
      </Center>
    </NativeBaseProvider>;
}const NBBox = props => {
  return <Box p="5" m="2" borderRadius="md" bg="primary.600" {...props} />;
};

function Component() {
  return <>
      {
      /* verbose */
    }
      <Box display="flex" flexDirection="row" justifyContent="space-between">
        <NBBox />
        <NBBox />
        <NBBox />
      </Box>
      {
      /* shorthand using the `Flex` component */
    }
      <Flex align="center" justify="center">
        <NBBox />
        <NBBox />
      </Flex>
    </>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <Component />
      </Center>
    </NativeBaseProvider>;
}

Prop

CSS Equivalent

Theme Key

alignItems, *align

align-items

alignContent

align-content

justifyItems

justify-items

justifyContent, *justify

justify-content

flexWrap, *wrap

flex-wrap

flexDirection, flexDir, *direction

flex-direction

flex

flexGrow

flex-grow

flexShrink

flex-shrink

flexBasis

flex-basis

justifySelf

justify-self

alignSelf

align-self

order

Borders


Playground
const NBBox = props => {
  return <Box p="5" m="2" borderRadius="md" bg="primary.200" {...props} />;
};

function Component() {
  return <>
      <NBBox borderWidth="1" borderColor="cyan.500" />
      <NBBox borderWidth="2" borderColor="cyan.500" />
      <NBBox borderColor="cyan.500" borderTopWidth="7" />
    </>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <Component />
      </Center>
    </NativeBaseProvider>;
}const NBBox = props => {
  return <Box p="5" m="2" borderRadius="md" bg="primary.200" {...props} />;
};

function Component() {
  return <>
      <NBBox borderWidth="1" borderColor="cyan.500" />
      <NBBox borderWidth="2" borderColor="cyan.500" />
      <NBBox borderColor="cyan.500" borderTopWidth="7" />
    </>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <Component />
      </Center>
    </NativeBaseProvider>;
}

Prop

CSS Equivalent

Theme Field

borderWidth

border-width

borderWidths

borderStyle

border-style

borderStyles

borderColor

border-color

colors

borderTop

border-top

borders

borderTopWidth

border-top-width

borderWidths

borderTopStyle

border-top-style

borderStyles

borderTopColor

border-top-color

colors

borderRight

border-right

borders

borderRightWidth

border-right-width

borderWidths

borderRightStyle

border-right-style

borderStyles

borderRightColor

border-right-color

colors

borderBottom

border-bottom

borders

borderBottomWidth

border-bottom-width

borderWidths

borderBottomStyle

border-bottom-style

borderStyles

borderBottomColor

border-bottom-color

colors

borderLeft

border-left

borders

borderLeftWidth

border-left-width

borderWidths

borderLeftStyle

border-left-style

borderStyles

borderLeftColor

border-left-color

colors

Borders Radius


Playground
const NBBox = props => {
  return <Box p="5" m="2" bg="primary.500" {...props} />;
};

function Component() {
  return <>
      {
      /* picks up a nested radius value using dot notation */
    }
      {
      /* => `theme.radius.md` */
    }
      <NBBox borderRadius="md" />
      <NBBox borderRadius="full" />
      {
      /* partial border radius */
    }
      <NBBox borderLeftRadius="10" />
      {
      /* absolute value prop */
    }
      <NBBox borderRadius="8" />
    </>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <Component />
      </Center>
    </NativeBaseProvider>;
}const NBBox = props => {
  return <Box p="5" m="2" bg="primary.500" {...props} />;
};

function Component() {
  return <>
      {
      /* picks up a nested radius value using dot notation */
    }
      {
      /* => `theme.radius.md` */
    }
      <NBBox borderRadius="md" />
      <NBBox borderRadius="full" />
      {
      /* partial border radius */
    }
      <NBBox borderLeftRadius="10" />
      {
      /* absolute value prop */
    }
      <NBBox borderRadius="8" />
    </>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <Component />
      </Center>
    </NativeBaseProvider>;
}

Prop

CSS Equivalent

Theme Field

borderRadius, rounded

border-radius

radii

borderTopLeftRadius, roundedTopLeft

border-top-left-radius

radii

borderTopRightRadius, roundedTopRight

border-top-right-radius

radii

borderBottomRightRadius, roundedBottomRight

border-bottom-right-radius

radii

borderBottomLeftRadius, roundedBottomLeft

border-bottom-left-radius

radii

borderTopRadius, roundedTop

border-top-left-radius & border-top-right-radius

radii

borderRightRadius, roundedRight

border-top-right-radius & border-bottom-right-radius

radii

borderBottomRadius, roundedBottom

border-bottom-left-radius & border-bottom-right-radius

radii

borderLeftRadius, roundedLeft

border-top-left-radius & border-bottom-left-radius

radii

Position


Playground
const NBBox = props => {
  return <Box p="5" borderRadius="md" bg="primary.400" {...props} />;
};

function Component() {
  return <Box justifyContent="center" alignItems="center" flexDirection="row">
      <NBBox position="relative" p="7" />
      <NBBox bg="yellow.400" zIndex={2} position="absolute" />
      <NBBox bg="emerald.400" position="relative" p="7" />
    </Box>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <Component />
      </Center>
    </NativeBaseProvider>;
}const NBBox = props => {
  return <Box p="5" borderRadius="md" bg="primary.400" {...props} />;
};

function Component() {
  return <Box justifyContent="center" alignItems="center" flexDirection="row">
      <NBBox position="relative" p="7" />
      <NBBox bg="yellow.400" zIndex={2} position="absolute" />
      <NBBox bg="emerald.400" position="relative" p="7" />
    </Box>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <Component />
      </Center>
    </NativeBaseProvider>;
}

Prop

CSS Equivalent

Theme Field

pos,position

position

zIndex

z-index

zIndices

top

space

right

space

bottom

space

left

space

Shadow


Playground
const NBBox = props => {
  return <Box p="5" m="2" borderRadius="md" bg="primary.500" {...props} />;
};

function Component() {
  return <>
      {
      /* => `theme.shadows.md` */
    }
      <NBBox shadow="1" />
      <NBBox shadow="3" />
      <NBBox shadow="5" />
      <NBBox shadow="7" />
      <NBBox shadow="9" />
    </>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <Component />
      </Center>
    </NativeBaseProvider>;
}const NBBox = props => {
  return <Box p="5" m="2" borderRadius="md" bg="primary.500" {...props} />;
};

function Component() {
  return <>
      {
      /* => `theme.shadows.md` */
    }
      <NBBox shadow="1" />
      <NBBox shadow="3" />
      <NBBox shadow="5" />
      <NBBox shadow="7" />
      <NBBox shadow="9" />
    </>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <Component />
      </Center>
    </NativeBaseProvider>;
}

Prop

CSS Equivalent

Theme Field

shadow

box-shadow

shadows

Underscore Props

Internal Props

Provides a way to pass props to child components inside Composite components.


Playground
function App() {
  return <Button _text={{
    // below props will will let you style the text of the button
    color: "primary.100",
    fontSize: "md",
    fontWeight: "bold",
    underline: true
  }}>
      Save
    </Button>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <App />
      </Center>
    </NativeBaseProvider>;
}function App() {
  return <Button _text={{
    // below props will will let you style the text of the button
    color: "primary.100",
    fontSize: "md",
    fontWeight: "bold",
    underline: true
  }}>
      Save
    </Button>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <App />
      </Center>
    </NativeBaseProvider>;
}

Prop

Type

Description

_stack

IStackProps

Passed props will be provided to

Stack

child.

_text

ITextProps

Passed props will be provided to

Text

child.

Interaction Props

Provides a way to pass props on certain interaction.


Playground
function App() {
  return <Button colorScheme="yellow" _pressed={{
    // below props will only be applied on button is pressed
    bg: "yellow.600",
    _text: {
      color: "warmGray.50"
    }
  }}>
      Save
    </Button>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <App />
      </Center>
    </NativeBaseProvider>;
}function App() {
  return <Button colorScheme="yellow" _pressed={{
    // below props will only be applied on button is pressed
    bg: "yellow.600",
    _text: {
      color: "warmGray.50"
    }
  }}>
      Save
    </Button>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <App />
      </Center>
    </NativeBaseProvider>;
}

Prop

Type

Description

_disabled

Same as the component

Passed props will be applied on disabled state.

_focus

Same as the component

Passed props will be applied on focused state.

_hover

Same as the component

Passed props will be applied on hovered state.

_invalid

Same as the component

Passed props will be applied on invalid state.

_pressed

Same as the component

Passed props will be applied on pressed state.

Platform Props

Provides a way to pass props based on Platform (android, ios or web).


Playground
function App() {
  return <Button _web={{
    // below props will only be applied on 'web' platform
    bg: "yellow.400",
    _text: {
      color: "coolGray.800",
      fontWeight: "medium"
    },
    _pressed: {
      // below props will only be applied on button is pressed
      bg: "yellow.600",
      _text: {
        color: "warmGray.50"
      }
    }
  }}>
      Save
    </Button>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <App />
      </Center>
    </NativeBaseProvider>;
}function App() {
  return <Button _web={{
    // below props will only be applied on 'web' platform
    bg: "yellow.400",
    _text: {
      color: "coolGray.800",
      fontWeight: "medium"
    },
    _pressed: {
      // below props will only be applied on button is pressed
      bg: "yellow.600",
      _text: {
        color: "warmGray.50"
      }
    }
  }}>
      Save
    </Button>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <App />
      </Center>
    </NativeBaseProvider>;
}