# View

The `<ViewContainer>` component is a wrapper for all of your views – you should render all of your content inside of this.&#x20;

{% hint style="warning" %}
Be careful not to confuse this component with React Native's built-in `View` component; which is a generic wrapper for rendering elements on screen.
{% endhint %}

The `<ViewContainer>` houses common components that are present throughout your app, like the status bar, header and banner notification.

```javascript
<ViewContainer header scrollable>
 // children here
</View>
```

## Props

| Prop          | Description                                            | Required | Value     |
| ------------- | ------------------------------------------------------ | -------- | --------- |
| avoidKeyboard | ensure inputs remain visible when the keyboard is open | optional | boolean   |
| children      | custom view                                            | required | component |
| header        | toggles a header section with title and nav button     | optional | boolean   |
| justify       | aligns the content in the centre of the view           | optional | boolean   |
| logo          | shows a logo mark in the header section                | optional | boolean   |
| loading       | show the loading spinner                               | optional | boolean   |
| onRefresh     | callback function when pulling to refresh              | optional | function  |
| refreshing    | onRefresh is in progress                               | optional | function  |
| scrollable    | enable scrolling                                       | optional | boolean   |

## User Permissions

The `ViewContainer` component will check that the user has permission to load this view – as determined by the permissions set in the [router](https://docs.usegravity.app/gravity-native/navigation).