Flex | NativeBase

NativeBase

3.4.x

⌘

Hire us

NativeBase

Introduction

Getting Started

Installation

Setup NativeBase Provider

Resources

Contribution

Core Concepts

Utility First

Utility Props Specificity

New

Design Tokens

Pseudo Props: Overview

New

Pseudo Props: Dos & Don'ts

Features

Color mode (Dark Mode)

Theme

Customizing Components

Making components dark mode compatible

Layout

Forms

Data Display

Feedback

Typography

Overlay

Disclosure

Media and Icons

Transition

Others

ReactNative Components

Hooks

Examples

Recipes

Designs

Forms

Layout

Migration

Upgrading to 3.2.0 from 3.x

Components Migration

If you are starting a new project, please try gluestack-ui for better performance and new design.

Flex

Flex provides helpful style shorthand and is a

Box

with display: flex.

Import

Copy
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

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
function Example() {
  return <Box flex="1" safeAreaTop>
      <ScrollView>
        <VStack space={2.5} w="100%" px="3">
          {
          /* flexDirection -> row */
        }
          <Heading size="md">row</Heading>
          <Flex direction="row" mb="2.5" mt="1.5" _text={{
          color: "coolGray.800"
        }}>
            <Center size="16" bg="primary.100">
              100
            </Center>
            <Center size="16" bg="primary.200">
              200
            </Center>
            <Center bg="primary.300" size="16">
              300
            </Center>
            <Center size="16" bg="primary.400">
              400
            </Center>
          </Flex>
          <Divider />
          {
          /* flexDirection -> column */
        }
          <Heading size="md">column</Heading>

          <Flex direction="column" mb="2.5" mt="1.5" _text={{
          color: "coolGray.800"
        }}>
            <Center size="16" bg="primary.100">
              100
            </Center>
            <Center size="16" bg="primary.200">
              200
            </Center>
            <Center bg="primary.300" size="16">
              300
            </Center>
            <Center size="16" bg="primary.400">
              400
            </Center>
          </Flex>
          <Divider />
          {
          /* flexDirection -> row-reverse */
        }
          <Heading size="md">row-reverse</Heading>
          <Flex direction="row-reverse" mb="2.5" mt="1.5" _text={{
          color: "coolGray.800"
        }}>
            <Center size="16" bg="primary.100">
              100
            </Center>
            <Center size="16" bg="primary.200">
              200
            </Center>
            <Center bg="primary.300" size="16">
              300
            </Center>
            <Center size="16" bg="primary.400">
              400
            </Center>
          </Flex>
          <Divider />
          {
          /* flexDirection -> column-reverse */
        }
          <Heading size="md">column-reverse</Heading>
          <Flex direction="column-reverse" mb="2.5" mt="1.5" _text={{
          color: "coolGray.800"
        }}>
            <Center size="16" bg="primary.100">
              100
            </Center>
            <Center size="16" bg="primary.200">
              200
            </Center>
            <Center bg="primary.300" size="16">
              300
            </Center>
            <Center size="16" bg="primary.400">
              400
            </Center>
          </Flex>
          <Divider />
        </VStack>
      </ScrollView>
    </Box>;
}function Example() {
  return <Box flex="1" safeAreaTop>
      <ScrollView>
        <VStack space={2.5} w="100%" px="3">
          {
          /* flexDirection -> row */
        }
          <Heading size="md">row</Heading>
          <Flex direction="row" mb="2.5" mt="1.5" _text={{
          color: "coolGray.800"
        }}>
            <Center size="16" bg="primary.100">
              100
            </Center>
            <Center size="16" bg="primary.200">
              200
            </Center>
            <Center bg="primary.300" size="16">
              300
            </Center>
            <Center size="16" bg="primary.400">
              400
            </Center>
          </Flex>
          <Divider />
          {
          /* flexDirection -> column */
        }
          <Heading size="md">column</Heading>

          <Flex direction="column" mb="2.5" mt="1.5" _text={{
          color: "coolGray.800"
        }}>
            <Center size="16" bg="primary.100">
              100
            </Center>
            <Center size="16" bg="primary.200">
              200
            </Center>
            <Center bg="primary.300" size="16">
              300
            </Center>
            <Center size="16" bg="primary.400">
              400
            </Center>
          </Flex>
          <Divider />
          {
          /* flexDirection -> row-reverse */
        }
          <Heading size="md">row-reverse</Heading>
          <Flex direction="row-reverse" mb="2.5" mt="1.5" _text={{
          color: "coolGray.800"
        }}>
            <Center size="16" bg="primary.100">
              100
            </Center>
            <Center size="16" bg="primary.200">
              200
            </Center>
            <Center bg="primary.300" size="16">
              300
            </Center>
            <Center size="16" bg="primary.400">
              400
            </Center>
          </Flex>
          <Divider />
          {
          /* flexDirection -> column-reverse */
        }
          <Heading size="md">column-reverse</Heading>
          <Flex direction="column-reverse" mb="2.5" mt="1.5" _text={{
          color: "coolGray.800"
        }}>
            <Center size="16" bg="primary.100">
              100
            </Center>
            <Center size="16" bg="primary.200">
              200
            </Center>
            <Center bg="primary.300" size="16">
              300
            </Center>
            <Center size="16" bg="primary.400">
              400
            </Center>
          </Flex>
          <Divider />
        </VStack>
      </ScrollView>
    </Box>;
}

Using the Spacer

You can pass Spacer to add Space between Flex items.


Playground
const Example = () => {
  return <Flex h={40} w={20} mt={6}>
      <Center size={16} bg="primary.500" _dark={{
      bg: "primary.400"
    }} rounded="sm" _text={{
      color: "warmGray.50",
      fontWeight: "medium"
    }}>
        Box 1
      </Center>
      <Spacer />
      <Center size={16} bg="secondary.500" _dark={{
      bg: "secondary.400"
    }} rounded="sm" _text={{
      color: "warmGray.50",
      fontWeight: "medium"
    }}>
        Box 2
      </Center>
    </Flex>;
};const Example = () => {
  return <Flex h={40} w={20} mt={6}>
      <Center size={16} bg="primary.500" _dark={{
      bg: "primary.400"
    }} rounded="sm" _text={{
      color: "warmGray.50",
      fontWeight: "medium"
    }}>
        Box 1
      </Center>
      <Spacer />
      <Center size={16} bg="secondary.500" _dark={{
      bg: "secondary.400"
    }} rounded="sm" _text={{
      color: "warmGray.50",
      fontWeight: "medium"
    }}>
        Box 2
      </Center>
    </Flex>;
};