Flex | NativeBase

NativeBase

3.4.x

🎉 Prompt to React Native UI

→

⌘

Introduction

Setup NativeBase Provider

Resources

Core Concepts

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

Community Integration

React Hook Forms

Formik

Recipes

Designs

Forms

Layout

Migration

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() {
  const [direction, setDirection] = React.useState("column");
  return <Center>
      <Box>
        <Heading size="md" mb={3}>
          Primary Shades
        </Heading>
      </Box>
      <Button my={3} onPress={() => setDirection(direction === "row" ? "column" : "row")}>
        Change Flex Direction
      </Button>
      <Box>
        {
        /* @ts-ignore */
      }
        <Flex direction={direction}>
          <Center size={16} bg="primary.100" _text={{
          color: "gray.800"
        }}>
            100
          </Center>
          <Center size={16} bg="primary.200" _text={{
          color: "white"
        }}>
            200
          </Center>
          <Center bg="primary.300" size={16} _text={{
          color: "white"
        }}>
            300
          </Center>
          <Center size={16} bg="primary.400" _text={{
          color: "white"
        }}>
            400
          </Center>
        </Flex>
      </Box>
    </Center>;
}function Example() {
  const [direction, setDirection] = React.useState("column");
  return <Center>
      <Box>
        <Heading size="md" mb={3}>
          Primary Shades
        </Heading>
      </Box>
      <Button my={3} onPress={() => setDirection(direction === "row" ? "column" : "row")}>
        Change Flex Direction
      </Button>
      <Box>
        {
        /* @ts-ignore */
      }
        <Flex direction={direction}>
          <Center size={16} bg="primary.100" _text={{
          color: "gray.800"
        }}>
            100
          </Center>
          <Center size={16} bg="primary.200" _text={{
          color: "white"
        }}>
            200
          </Center>
          <Center bg="primary.300" size={16} _text={{
          color: "white"
        }}>
            300
          </Center>
          <Center size={16} bg="primary.400" _text={{
          color: "white"
        }}>
            400
          </Center>
        </Flex>
      </Box>
    </Center>;
}

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.400" rounded="xl" _text={{
      color: "white"
    }}>
        Box 1
      </Center>
      <Spacer />
      <Center size={16} bg="secondary.400" rounded="xl" _text={{
      color: "white"
    }}>
        Box 2
      </Center>
    </Flex>;
};const Example = () => {
  return <Flex h={40} w={20} mt={6}>
      <Center size={16} bg="primary.400" rounded="xl" _text={{
      color: "white"
    }}>
        Box 1
      </Center>
      <Spacer />
      <Center size={16} bg="secondary.400" rounded="xl" _text={{
      color: "white"
    }}>
        Box 2
      </Center>
    </Flex>;
};