The Container restricts a content's width according to current breakpoint, while keeping the size fluid.
To include content, wrap it in the Container component.
function ContainerComponent() {
return <Container>
<Heading>
A component library for the
<Heading color="emerald.400">
React Ecosystem
</Heading>
</Heading>
<Heading pt={4} fontWeight="md" size="sm">
NativeBase is a simple, modular and accessible component library that gives you building blocks to build you React applications.
</Heading>
</Container>;
}
function Example() {
return <NativeBaseProvider>
<Center flex={1}>
<ContainerComponent />
</Center>
</NativeBaseProvider>;
}
Container implements
, so all the Box Props can be passed to it.
It'll center child elements based on their content width.