Styling

import { StyleSheet, View, Text } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    padding: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: '700',
    color: '#111',
  },
});

// Usage
<View style={styles.container}>
  <Text style={styles.title}>Hello</Text>
</View>

<View style={[styles.base, styles.override, { marginTop: 8 }]} />

// Conditional styles
<Text style={[styles.text, isActive && styles.textActive]} />

style={{
  transform: [
    { translateX: 50 },
    { translateY: -20 },
    { scale: 1.5 },
    { scaleX: 2 },
    { scaleY: 0.5 },
    { rotate: '45deg' },
    { rotateX: '30deg' },
    { rotateY: '30deg' },
    { rotateZ: '90deg' },
    { skewX: '10deg' },
    { skewY: '10deg' },
    { perspective: 1000 },
  ],
}}

// iOS
{
  shadowColor: '#000',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.25,
  shadowRadius: 4,
}

// Android
{
  elevation: 5,
}

// Cross-platform helper pattern
const shadow = Platform.select({
  ios: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.15,
    shadowRadius: 6,
  },
  android: { elevation: 4 },
});

// Makes element transparent but still takes space
style={{ opacity: 0.5 }}

// Remove from layout
// Use conditional rendering — there is no CSS display:none equivalent
{visible && <View style={styles.box} />}

// All valid color formats
backgroundColor: '#fff'
backgroundColor: '#ffffff'
backgroundColor: 'white'
backgroundColor: 'rgb(255, 255, 255)'
backgroundColor: 'rgba(255, 255, 255, 0.5)'
backgroundColor: 'hsl(360, 100%, 100%)'
backgroundColor: 'hsla(360, 100%, 100%, 0.5)'
backgroundColor: 0xffffffff   // uint32 — rare
backgroundColor: 'transparent'

# Place fonts in assets/fonts/
# react-native.config.js
module.exports = { assets: ['./assets/fonts/'] };

# Link assets
npx react-native-asset

// Expo
import { useFonts, Inter_400Regular } from '@expo-google-fonts/inter';

const [fontsLoaded] = useFonts({ Inter_400Regular });

// Usage
<Text style={{ fontFamily: 'Inter_400Regular' }}>Hello</Text>

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    paddingTop: Platform.OS === 'ios' ? 44 : 24,
    ...Platform.select({
      ios: { shadowColor: '#000', shadowOpacity: 0.1 },
      android: { elevation: 2 },
    }),
  },
});

import { Dimensions, useWindowDimensions } from 'react-native';

// Static (doesn't update on rotation)
const { width, height } = Dimensions.get('window');
const { width: screenW } = Dimensions.get('screen');

// Hook (updates on rotation — preferred)
const { width, height, scale, fontScale } = useWindowDimensions();

// Responsive percentage helper
const wp = (percent: number) => (width * percent) / 100;
const hp = (percent: number) => (height * percent) / 100;

// Cover the entire parent
const absoluteFill = StyleSheet.absoluteFillObject;
// { position: 'absolute', left: 0, right: 0, top: 0, bottom: 0 }

<View style={StyleSheet.absoluteFillObject} />

// Manual
<View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }} />

// theme.ts — design tokens pattern
export const colors = {
  primary: '#007AFF',
  background: '#F2F2F7',
  surface: '#FFFFFF',
  text: '#000000',
  textSecondary: '#6C6C70',
  border: '#C6C6C8',
};

export const spacing = {
  xs: 4,
  sm: 8,
  md: 16,
  lg: 24,
  xl: 32,
};

export const typography = {
  h1: { fontSize: 28, fontWeight: '700' as const },
  body: { fontSize: 16, fontWeight: '400' as const },
  caption: { fontSize: 12, color: colors.textSecondary },
};