Flex | NativeBase | Universal Components for React and React Native

Show Code
Playground
function Example() {
  return <Box flex="1" safeAreaTop>
      <ScrollView _contentContainerStyle={{
      h: '40',
      px: '20px',
      mb: '4',
      minW: '72'
    }}>
        <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 _contentContainerStyle={{
      h: '40',
      px: '20px',
      mb: '4',
      minW: '72'
    }}>
        <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>;
}

Copy
import { Flex, Spacer } from 'native-base';

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>;
}

Playground
const Example = () => {
  return <Flex h={40} alignItems="center">
      <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} alignItems="center">
      <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>;
};