View

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

// ===== Basic =====
export function Card({ title, body }) {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>{title}</Text>
      <Text style={styles.body}>{body}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    padding: 16,
    backgroundColor: 'white',
    borderRadius: 12,
    gap: 8,
  },
  title: { fontSize: 18, fontWeight: '600' },
  body: { fontSize: 14, color: '#475569' },
});

// ===== Flexbox =====
// All View children flex by default. flexDirection: 'column' is the default (NOT row).
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
  <View style={{ width: 40, height: 40, borderRadius: 20, backgroundColor: 'red' }} />
  <Text>Title</Text>
</View>

// Fill the screen:
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }} />

// ===== Borders + shadows =====
<View style={{
  borderWidth: 1, borderColor: '#e2e8f0',
  shadowColor: '#000', shadowOpacity: 0.1, shadowRadius: 4, shadowOffset: { width: 0, height: 2 },
  elevation: 3,   // Android shadow
}} />

// ===== Pressable container =====
<Pressable
  style={({ pressed }) => [
    styles.card,
    pressed && { backgroundColor: '#f1f5f9' },
  ]}
  onPress={onPress}
  android_ripple={{ color: '#e2e8f0' }}
>
  <Text>Tap me</Text>
</Pressable>

// ===== Pointer events =====
<View pointerEvents="none">    {/* This view is invisible to touches */}
  <Text>Overlay</Text>
</View>

// ===== Accessibility =====
<View accessible accessibilityRole="button" accessibilityLabel="Order summary">
  <Text>Summary</Text>
</View>

// ===== SafeAreaView =====
// Use react-native-safe-area-context for notches + status bars:
import { SafeAreaView } from 'react-native-safe-area-context';
<SafeAreaView style={{ flex: 1 }}>{/* content */}</SafeAreaView>

// ===== KeyboardAvoidingView =====
import { KeyboardAvoidingView, Platform } from 'react-native';
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{ flex: 1 }}>
  <View>...</View>
</KeyboardAvoidingView>

// ===== Common pitfalls =====
// - Putting a String OUTSIDE <Text> -> 'Text strings must be rendered within <Text>'
// - flexDirection defaults to column (not row) — different from web
// - Shadows: iOS uses shadow*, Android uses elevation
// - Borders on Android sometimes need overflow: hidden on the parent
// - Margins on the first/last child sometimes do not collapse like in web

// ===== Patterns to internalise =====
// - StyleSheet over inline styles in hot lists
// - Pressable over TouchableOpacity in new code
// - SafeAreaView at the root for screen edges
// - Avoid nesting too deep; each View is a real native view

import { View } from 'react-native';
<View style={{ padding: 16, backgroundColor: '#04AA6D' }}>
    {children}
</View>