Version: 3.0.0-next.38


Flex is a Box with display: flex and comes with helpful style shorthand.


import { Flex, Spacer } from 'native-base';
  • Flex: a Box with display: flex
  • Spacer: creates an adjustable, empty space that can be used to tune the spacing between child elements within Flex


Flex components comes with some helpful shorthand props:

  • flexDirection is direction
  • flexWrap is wrap
  • alignItems is align
  • justifyContent is justify

While you can pass the verbose props, using the shorthand can save you some time.


Using the Spacer#

You can pass Spacer to add Space between Flex items.


Flex implements Box, so all the Box Props can be passed to it, i.e. color, space, layout, flexbox & border props from style-system.