Center | NativeBase | Universal Components for React and React Native

Search
K
Hire us
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).
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
Icon frames
Center can be used to nicely position icons in the center and add frames around them.
Playground
Square and Circle
Square and Circle automatically center their children.
Playground
Props
Nativebase logo
MadeWithNativeBase