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

import { ThemedView } from '@/components/common/view';

​
Props

PropTypeRequiredDescription
{style}StyleProp<ViewStyle>NoCustom styles for the view component.
{lightColor}stringNoBackground color for light mode.
{darkColor}stringNoBackground color for dark mode.
{...otherProps}ViewPropsNoAdditional props to pass to the underlying View.

​
Usage

​
Basic Usage

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>
    );
};

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

Was this page helpful?

OverviewOverview