Component
ScreenContainer
Screen layout wrapper with safe spacing, loading, and error-friendly composition.
React Native
import { ScreenContainer, Text, useTheme } from '@sohantalukder/rn-kit';
export function DashboardScreen() {
const { gutters } = useTheme();
return (
<ScreenContainer
showHeader
containerStyle={gutters.padding_20}
>
<Text variant="heading2" weight="semibold">
Dashboard
</Text>
<Text color="secondary">Your account overview is ready.</Text>
</ScreenContainer>
);
}Live component
defaultscrollable contentcustom background
- Use as the first layer inside app screens.
- Keep screen-level padding consistent.
Usage
import { ScreenContainer } from '@sohantalukder/rn-kit';import { ScreenContainer, Text, useTheme } from '@sohantalukder/rn-kit';
export function DashboardScreen() {
const { gutters } = useTheme();
return (
<ScreenContainer
showHeader
containerStyle={gutters.padding_20}
>
<Text variant="heading2" weight="semibold">
Dashboard
</Text>
<Text color="secondary">Your account overview is ready.</Text>
</ScreenContainer>
);
}Props
These are the most important props to consider first. The custom preview highlights the common setup before you move into app-specific states.
PropTypeDefaultDescription
childrenReactNode-Content rendered inside the component surface.containerStyleunknown-Configures container style for ScreenContainer.bgColorColorValuethemeOverrides the screen background color supplied by the theme.showHeaderunknown-Configures show header for ScreenContainer.Theme
ScreenContainer reads from the rn-kit theme context where applicable. Wrap your app with ThemeProvider and prefer package theme tokens over hardcoded screen-level colors.
Variants
- default
- scrollable content
- custom background
Best Practices
- Use as the first layer inside app screens.
- Keep screen-level padding consistent.