> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shipmobilefast.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ThemedView

> A customizable view component that adapts its background color based on the current theme.

`ThemedView` is a customizable view component designed for React Native applications. It adapts its background color based on the current theme (light or dark) and allows for additional styling.

## Installation

Ensure you have the necessary dependencies:

## Import

```typescript theme={null}
import { ThemedView } from '@/components/common/view';
```

## Props

| Prop | Type | Required | Description |
| - | - | - | - |
| `{style}` | `StyleProp<ViewStyle>` | No | Custom styles for the view component. |
| `{lightColor}` | `string` | No | Background color for light mode. |
| `{darkColor}` | `string` | No | Background color for dark mode. |
| `{...otherProps}` | `ViewProps` | No | Additional props to pass to the underlying View. |

## Usage

### Basic Usage

```typescript theme={null}
import React from 'react';
import { PADDING } from '@/constants/appConstants';
import { ThemedText } from '@/components/common/typography';
import { ThemedView } from '@/components/common/view';

const MyComponent = () => {
    return (
        <ThemedView lightColor="#ffffff" darkColor="#000000" style={{ padding: PADDING.md }}>
            <ThemedText>Hello, World!</ThemedText>
        </ThemedView>
    );
};
```

<Info>
  The `{lightColor}` and `{darkColor}` props are optional. If not provided, the component will use the default colors defined in the theme.
</Info>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.