Center | NativeBase

NativeBase

3.4.x

⌘

Hire us

NativeBase

Introduction

Getting Started

Installation

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.

Center

Center aligns its contents to the center within itself. It is a layout component.

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 bg="primary.400" _text={{
    color: "white",
    fontWeight: "bold"
  }} height={200} width={{
    base: 200,
    lg: 400
  }}>
      This is the Center
    </Center>;
}function Example() {
  return <Center bg="primary.400" _text={{
    color: "white",
    fontWeight: "bold"
  }} height={200} width={{
    base: 200,
    lg: 400
  }}>
      This is the 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={98} bg="secondary.400">
        <Icon as={<MaterialIcons name="audiotrack" />} color="white" size={8} />
      </Circle>
      <Square size="lg" bg="primary.400">
        <Box _text={{
        fontWeight: "bold",
        fontSize: "lg",
        color: "white"
      }}>
          20
        </Box>
      </Square>
    </HStack>;
}function Example() {
  return <HStack space={3}>
      <Circle size={98} bg="secondary.400">
        <Icon as={<MaterialIcons name="audiotrack" />} color="white" size={8} />
      </Circle>
      <Square size="lg" bg="primary.400">
        <Box _text={{
        fontWeight: "bold",
        fontSize: "lg",
        color: "white"
      }}>
          20
        </Box>
      </Square>
    </HStack>;
}