Stack | NativeBase

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).

Stack

Stack aligns items vertically or horizontally based on the direction prop.

Example


Playground
//@ts-nocheck
function Example() {
  return <ScrollView>
      <VStack space="2.5" mt="4">
        <Heading size="md">row</Heading>
        <Stack direction="row" mb="2.5" mt="1.5" space={3}>
          <Center size="16" bg="primary.500" rounded="sm" _text={{
          color: "warmGray.50",
          fontWeight: "medium"
        }} shadow={"3"}>
            Box 1
          </Center>
          <Center bg="secondary.500" size="16" rounded="sm" _text={{
          color: "warmGray.50",
          fontWeight: "medium"
        }} shadow={"3"}>
            Box 2
          </Center>
          <Center size="16" bg="emerald.500" rounded="sm" _text={{
          color: "warmGray.50",
          fontWeight: "medium"
        }} shadow={"3"}>
            Box 3
          </Center>
        </Stack>
        <Divider />
        <Heading size="md">column</Heading>
        <Stack mb="2.5" mt="1.5" direction="column" space={3}>
          <Center size="16" bg="primary.500" rounded="sm" _text={{
          color: "warmGray.50",
          fontWeight: "medium"
        }} shadow={"3"}>
            Box 1
          </Center>
          <Center bg="secondary.500" size="16" rounded="sm" _text={{
          color: "warmGray.50",
          fontWeight: "medium"
        }} shadow={"3"}>
            Box 2
          </Center>
          <Center size="16" bg="emerald.500" rounded="sm" _text={{
          color: "warmGray.50",
          fontWeight: "medium"
        }} shadow={"3"}>
            Box 3
          </Center>
        </Stack>
        <Divider />
        <Heading size="md">row-reverse</Heading>
        <Stack mb="2.5" mt="1.5" direction="row" reversed space={3}>
          <Center size="16" bg="primary.500" rounded="sm" _text={{
          color: "warmGray.50",
          fontWeight: "medium"
        }} shadow={"3"}>
            Box 1
          </Center>
          <Center bg="secondary.500" size="16" rounded="sm" _text={{
          color: "warmGray.50",
          fontWeight: "medium"
        }} shadow={"3"}>
            Box 2
          </Center>
          <Center size="16" bg="emerald.500" rounded="sm" _text={{
          color: "warmGray.50",
          fontWeight: "medium"
        }} shadow={"3"}>
            Box 3
          </Center>
        </Stack>
        <Divider />
        <Heading size="md">column-reverse</Heading>
        <Stack mb="2.5" mt="1.5" direction="column-reverse" space={3}>
          <Center size="16" bg="primary.500" rounded="sm" _text={{
          color: "warmGray.50",
          fontWeight: "medium"
        }} shadow={"3"}>
            Box 1
          </Center>
          <Center bg="secondary.500" size="16" rounded="sm" _text={{
          color: "warmGray.50",
          fontWeight: "medium"
        }} shadow={"3"}>
            Box 2
          </Center>
          <Center size="16" bg="emerald.500" rounded="sm" _text={{
          color: "warmGray.50",
          fontWeight: "medium"
        }} shadow={"3"}>
            Box 3
          </Center>
        </Stack>
        <Divider />
      </VStack>
    </ScrollView>;
}//@ts-nocheck
function Example() {
  return <ScrollView>
      <VStack space="2.5" mt="4">
        <Heading size="md">row</Heading>
        <Stack direction="row" mb="2.5" mt="1.5" space={3}>
          <Center size="16" bg="primary.500" rounded="sm" _text={{
          color: "warmGray.50",
          fontWeight: "medium"
        }} shadow={"3"}>
            Box 1
          </Center>
          <Center bg="secondary.500" size="16" rounded="sm" _text={{
          color: "warmGray.50",
          fontWeight: "medium"
        }} shadow={"3"}>
            Box 2
          </Center>
          <Center size="16" bg="emerald.500" rounded="sm" _text={{
          color: "warmGray.50",
          fontWeight: "medium"
        }} shadow={"3"}>
            Box 3
          </Center>
        </Stack>
        <Divider />
        <Heading size="md">column</Heading>
        <Stack mb="2.5" mt="1.5" direction="column" space={3}>
          <Center size="16" bg="primary.500" rounded="sm" _text={{
          color: "warmGray.50",
          fontWeight: "medium"
        }} shadow={"3"}>
            Box 1
          </Center>
          <Center bg="secondary.500" size="16" rounded="sm" _text={{
          color: "warmGray.50",
          fontWeight: "medium"
        }} shadow={"3"}>
            Box 2
          </Center>
          <Center size="16" bg="emerald.500" rounded="sm" _text={{
          color: "warmGray.50",
          fontWeight: "medium"
        }} shadow={"3"}>
            Box 3
          </Center>
        </Stack>
        <Divider />
        <Heading size="md">row-reverse</Heading>
        <Stack mb="2.5" mt="1.5" direction="row" reversed space={3}>
          <Center size="16" bg="primary.500" rounded="sm" _text={{
          color: "warmGray.50",
          fontWeight: "medium"
        }} shadow={"3"}>
            Box 1
          </Center>
          <Center bg="secondary.500" size="16" rounded="sm" _text={{
          color: "warmGray.50",
          fontWeight: "medium"
        }} shadow={"3"}>
            Box 2
          </Center>
          <Center size="16" bg="emerald.500" rounded="sm" _text={{
          color: "warmGray.50",
          fontWeight: "medium"
        }} shadow={"3"}>
            Box 3
          </Center>
        </Stack>
        <Divider />
        <Heading size="md">column-reverse</Heading>
        <Stack mb="2.5" mt="1.5" direction="column-reverse" space={3}>
          <Center size="16" bg="primary.500" rounded="sm" _text={{
          color: "warmGray.50",
          fontWeight: "medium"
        }} shadow={"3"}>
            Box 1
          </Center>
          <Center bg="secondary.500" size="16" rounded="sm" _text={{
          color: "warmGray.50",
          fontWeight: "medium"
        }} shadow={"3"}>
            Box 2
          </Center>
          <Center size="16" bg="emerald.500" rounded="sm" _text={{
          color: "warmGray.50",
          fontWeight: "medium"
        }} shadow={"3"}>
            Box 3
          </Center>
        </Stack>
        <Divider />
      </VStack>
    </ScrollView>;
}