Flex | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
Flex
Flex provides helpful style shorthand and is a with display: flex.
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 come 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