Flex | NativeBase | Universal Components for React and React Native

Data Display
Typography
Disclosure
Media and Icons
Others
Flex
Flex provides helpful style shorthand and is a with display: flex.
Show Code
Playground
Import
Copy
import { Flex, Spacer } from "native-base";
Flex: a with display: flex
Spacer: creates an adjustable, empty space that can be used to tune the spacing between child elements within Flex
Usage
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.
Example
Playground
Using the Spacer
You can pass Spacer to add Space between Flex items.
Playground
Props
Flex implements , so all the Box Props can be passed to it, i.e. , , , & props from .
Nativebase logo
MadeWithNativeBase