Overview
ThemedView is a wrapper around React Native’s View component that provides automatic theme-aware background colors. It adapts its background color based on the current color scheme (light or dark mode) while accepting all standard View props.
Import
import { ThemedView } from '@/components/themed-view';
Props
ThemedView extends all standard React Native ViewProps and adds the following theme-specific props:
Custom background color to use in light mode. If not provided, uses the default theme background color.
Custom background color to use in dark mode. If not provided, uses the default theme background color.
Standard React Native style prop. Background colors from theme are applied first, then merged with this style.
Usage Examples
Basic Usage
import { ThemedView } from '@/components/themed-view';
import { ThemedText } from '@/components/themed-text';
export default function ModalScreen() {
return (
<ThemedView style={styles.container}>
<ThemedText type="title">This is a modal</ThemedText>
</ThemedView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
padding: 20,
},
});
With Custom Theme Colors
import { ThemedView } from '@/components/themed-view';
export default function HomeScreen() {
return (
<ThemedView
style={styles.titleContainer}
lightColor="#A1CEDC"
darkColor="#1D3D47"
>
{/* Content */}
</ThemedView>
);
}
const styles = StyleSheet.create({
titleContainer: {
flexDirection: 'row',
alignItems: 'center',
gap: 8,
},
});
Nested Layout Structure
import { ThemedView } from '@/components/themed-view';
import { ThemedText } from '@/components/themed-text';
export default function HomeScreen() {
return (
<ThemedView style={styles.titleContainer}>
<ThemedText type="title">Welcome!</ThemedText>
</ThemedView>
<ThemedView style={styles.stepContainer}>
<ThemedText type="subtitle">Step 1: Try it</ThemedText>
<ThemedText>
Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
</ThemedText>
</ThemedView>
);
}
const styles = StyleSheet.create({
titleContainer: {
flexDirection: 'row',
alignItems: 'center',
gap: 8,
},
stepContainer: {
gap: 8,
marginBottom: 8,
},
});
Implementation Details
The component uses the useThemeColor hook to determine the appropriate background color based on:
- Custom
lightColor or darkColor props if provided
- Default theme background color otherwise
The background color is automatically applied and merged with any additional styles passed via the style prop.
Type Definition
export type ThemedViewProps = ViewProps & {
lightColor?: string;
darkColor?: string;
};