The Container component is used to wrap child components and provide a safe area.

​
Props

PropTypeDescription
childrenReact.ReactNodeThe child components to be rendered inside the container.
styleStyleProp<ViewStyle>Optional styles to apply to the container.
edgesEdge[]Determines which edges of the safe area should be considered.
bgColorstringThe background color of the container.

​
Usage Example

First, you need to import the Container component.

1

You can use the Container component like below:

import { Container } from '@/components/common/Container';
2

You can use it like below:

  <Container edges={['top', 'bottom']} 
    // Default bgColor is working with your device theme.
    // If you want to change it, you can do it.
     bgColor="red" 
    >
     {children}
  </Container>
3

You can use it in Chat Screens, Video Swiping Screens, etc.. It is useful for these screens. Otherwise, I don’t recommend to use it too much.

## Properties:

Was this page helpful?

CollapsibleTypography