Center | NativeBase


Show Code
Playground
function Example() {
  return <Center bg="primary.400" _text={{
    color: 'white',
    fontWeight: 'bold'
  }} height="32" width="40" shadow={2}>
      Center
    </Center>;
}function Example() {
  return <Center bg="primary.400" _text={{
    color: 'white',
    fontWeight: 'bold'
  }} height="32" width="40" shadow={2}>
      Center
    </Center>;
}

Import

Copy
import { Center, Square, Circle } from 'native-base';

Center: Centers its child, pass width and height

Square: Center but we need to pass size (width and height)

Circle: Center with round borderRadius, pass size (width and height)

Examples

Basic

Put any child element inside it, give it any width or/and height. It'll ensure the child is centered.


Playground
function Example() {
  return <Center>
      <Center bg="primary.400" _text={{
      color: "white",
      fontWeight: "bold"
    }} height={200} width={{
      base: 200,
      lg: 250
    }}>
        This is the Center
      </Center>
    </Center>;
}function Example() {
  return <Center>
      <Center bg="primary.400" _text={{
      color: "white",
      fontWeight: "bold"
    }} height={200} width={{
      base: 200,
      lg: 250
    }}>
        This is the Center
      </Center>
    </Center>;
}

Icon frames

Center can be used to nicely position icons in the center and add frames around them.


Playground
function Example() {
  return <HStack space={1}>
      <Center w="40px" h="40px" bg="primary.400">
        <Icon as={<MaterialIcons name="audiotrack" />} color="white" size={6} />
      </Center>
      <Center w="40px" h="40px" bg="secondary.400">
        <Box _text={{
        fontWeight: "bold",
        fontSize: "lg",
        color: "white"
      }}>
          20
        </Box>
      </Center>
    </HStack>;
}function Example() {
  return <HStack space={1}>
      <Center w="40px" h="40px" bg="primary.400">
        <Icon as={<MaterialIcons name="audiotrack" />} color="white" size={6} />
      </Center>
      <Center w="40px" h="40px" bg="secondary.400">
        <Box _text={{
        fontWeight: "bold",
        fontSize: "lg",
        color: "white"
      }}>
          20
        </Box>
      </Center>
    </HStack>;
}

Square and Circle

Square and Circle automatically center their children.


Playground
function Example() {
  return <HStack space={3}>
      <Circle size="40px" bg="secondary.400">
        <Icon as={<MaterialIcons name="audiotrack" />} color="white" size={5} />
      </Circle>
      <Square size="40px" bg="primary.400">
        <Box _text={{
        fontWeight: "bold",
        fontSize: "lg",
        color: "white"
      }}>
          20
        </Box>
      </Square>
    </HStack>;
}function Example() {
  return <HStack space={3}>
      <Circle size="40px" bg="secondary.400">
        <Icon as={<MaterialIcons name="audiotrack" />} color="white" size={5} />
      </Circle>
      <Square size="40px" bg="primary.400">
        <Box _text={{
        fontWeight: "bold",
        fontSize: "lg",
        color: "white"
      }}>
          20
        </Box>
      </Square>
    </HStack>;
}