Flex | NativeBase | Universal Components for React and React Native

Show Code
Playground
function Example() {
  const bgShade100 = useColorModeValue("primary.100", "primary.400");
  const bgShade200 = useColorModeValue("primary.200", "primary.500");
  const bgShade300 = useColorModeValue("primary.300", "primary.600");
  const bgShade400 = useColorModeValue("primary.400", "primary.700");
  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={bgShade100}>
              100
            </Center>
            <Center size="16" bg={bgShade200}>
              200
            </Center>
            <Center size="16" bg={bgShade300}>
              300
            </Center>
            <Center size="16" bg={bgShade400}>
              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={bgShade100}>
              100
            </Center>
            <Center size="16" bg={bgShade200}>
              200
            </Center>
            <Center size="16" bg={bgShade300}>
              300
            </Center>
            <Center size="16" bg={bgShade400}>
              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={bgShade100}>
              100
            </Center>
            <Center size="16" bg={bgShade200}>
              200
            </Center>
            <Center size="16" bg={bgShade300}>
              300
            </Center>
            <Center size="16" bg={bgShade400}>
              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={bgShade100}>
              100
            </Center>
            <Center size="16" bg={bgShade200}>
              200
            </Center>
            <Center size="16" bg={bgShade300}>
              300
            </Center>
            <Center size="16" bg={bgShade400}>
              400
            </Center>
          </Flex>
          <Divider />
        </VStack>
      </ScrollView>
    </Box>;
}
function Example() {
  const bgShade100 = useColorModeValue("primary.100", "primary.400");
  const bgShade200 = useColorModeValue("primary.200", "primary.500");
  const bgShade300 = useColorModeValue("primary.300", "primary.600");
  const bgShade400 = useColorModeValue("primary.400", "primary.700");
  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={bgShade100}>
              100
            </Center>
            <Center size="16" bg={bgShade200}>
              200
            </Center>
            <Center size="16" bg={bgShade300}>
              300
            </Center>
            <Center size="16" bg={bgShade400}>
              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={bgShade100}>
              100
            </Center>
            <Center size="16" bg={bgShade200}>
              200
            </Center>
            <Center size="16" bg={bgShade300}>
              300
            </Center>
            <Center size="16" bg={bgShade400}>
              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={bgShade100}>
              100
            </Center>
            <Center size="16" bg={bgShade200}>
              200
            </Center>
            <Center size="16" bg={bgShade300}>
              300
            </Center>
            <Center size="16" bg={bgShade400}>
              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={bgShade100}>
              100
            </Center>
            <Center size="16" bg={bgShade200}>
              200
            </Center>
            <Center size="16" bg={bgShade300}>
              300
            </Center>
            <Center size="16" bg={bgShade400}>
              400
            </Center>
          </Flex>
          <Divider />
        </VStack>
      </ScrollView>
    </Box>;
}

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

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

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

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