React Native Styling
Priority: P1 (OPERATIONAL)
Implementation Guidelines
- StyleSheet.create: Always use over inline objects (optimized, validated).
- Flexbox: Default layout. No CSS Grid.
- Responsive: Use
Dimensions, useWindowDimensions, or percentage widths.
- Theming: Centralize colors, fonts in
theme/ folder.
- Platform Styles: Use
Platform.select for conditional styles.
- Dark Mode: Use React Context +
useColorScheme().
Code
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
paddingHorizontal: 16, // Use consistent spacing (8, 12, 16, 24)
},
title: {
fontSize: 20,
fontWeight: '600',
...Platform.select({
ios: { fontFamily: 'SF Pro' },
android: { fontFamily: 'Roboto' },
}),
},
});
Responsive Design
const { width } = useWindowDimensions();
const isSmall = width < 375;
Anti-Patterns
- No Inline Styles: Use
StyleSheet.create.
- No Magic Numbers: Use theme constants.
- No Absolute Positioning: Avoid unless necessary.
- No Fixed Widths: Use flex or percentages.
Reference & Examples
See references/theming.md for Design Tokens, Theme Systems, Responsive Scaling, and Shadow Helpers.
Related Topics
common/best-practices | components
1---2name: react-native-styling3description: StyleSheet API, Flexbox, theming, and responsive design.4metadata:5 labels: [react-native, styling, theme, flexbox, responsive]6 triggers:7 files: ['**/*.tsx', '**/*.ts']8 keywords: [StyleSheet, style, theme, responsive, flexbox]9---1011# React Native Styling1213## **Priority: P1 (OPERATIONAL)**1415## Implementation Guidelines1617- **StyleSheet.create**: Always use over inline objects (optimized, validated).18- **Flexbox**: Default layout. No CSS Grid.19- **Responsive**: Use `Dimensions`, `useWindowDimensions`, or percentage widths.20- **Theming**: Centralize colors, fonts in `theme/` folder.21- **Platform Styles**: Use `Platform.select` for conditional styles.22- **Dark Mode**: Use React Context + `useColorScheme()`.2324## Code2526```tsx27const styles = StyleSheet.create({28 container: {29 flex: 1,30 backgroundColor: '#fff',31 paddingHorizontal: 16, // Use consistent spacing (8, 12, 16, 24)32 },33 title: {34 fontSize: 20,35 fontWeight: '600',36 ...Platform.select({37 ios: { fontFamily: 'SF Pro' },38 android: { fontFamily: 'Roboto' },39 }),40 },41});42```4344## Responsive Design4546```tsx47const { width } = useWindowDimensions();48const isSmall = width < 375;49```5051## Anti-Patterns5253- **No Inline Styles**: Use `StyleSheet.create`.54- **No Magic Numbers**: Use theme constants.55- **No Absolute Positioning**: Avoid unless necessary.56- **No Fixed Widths**: Use flex or percentages.5758## Reference & Examples5960See [references/theming.md](references/theming.md) for Design Tokens, Theme Systems, Responsive Scaling, and Shadow Helpers.6162## Related Topics6364common/best-practices | components
fierzone