Container

Container centers the content with a max-width of defined by Layout (varies depending on screen size)

Refer to Layout docs for setup

Usage

Centered content

<LayoutProvider>
  <Box backgroundColor="#67c6bb" padding={3}>
    <Container
      fluid={false} // Should not contain width
      size={undefined} // Override default container size
    >
      <Box backgroundColor="white" padding={3}>
        <Text>Centered content</Text>
      </Box>
    </Container>
  </Box>
</LayoutProvider>

<LayoutProvider>
  <Box backgroundColor="#67c6bb" padding={3}>
    <Container
      fluid={false} // Should not contain width
      size={undefined} // Override default container size
    >
      <Box backgroundColor="white" padding={3}>
        <Text>Centered content</Text>
      </Box>
    </Container>
  </Box>
</LayoutProvider>

Props

children

Reactnode

fluid

Boolean | undefined

false

size

"small" | "medium" | "large" | "xlarge" | undefined

style

Style<containerprops, viewstyle>

Container

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Usage

Props

Usage