Intro

import React, { useState } from 'react';
import { View, Text, Button, StyleSheet, SafeAreaView } from 'react-native';

// ===== The model =====
// - JS thread runs React; bridge or JSI talks to the native UI thread
// - Components like <View>, <Text>, <Image>, <ScrollView> map to UIKit / Android views
// - StyleSheet is a flexbox-flavoured CSS subset
// - Hot reload during dev; OTA updates in prod (CodePush / Expo Updates)

// ===== Hello, app =====
export default function App() {
  const [n, setN] = useState(0);
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={styles.center}>
        <Text style={styles.title}>Clicks: {n}</Text>
        <Button title="+1" onPress={() => setN(n + 1)} />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  center: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: 12 },
  title:  { fontSize: 24, fontWeight: '600' },
});

// ===== Two main toolchains =====
// 1. Expo: managed workflow, OTA updates, easiest start
//    npx create-expo-app my-app
//    npx expo start
// 2. React Native CLI (bare): full native access from the start
//    npx react-native init MyApp

// ===== Ecosystem =====
// Navigation:    react-navigation, expo-router
// State:         Zustand / Redux Toolkit / Jotai
// Data:          TanStack Query, SWR
// Forms:         react-hook-form
// Native APIs:   Expo modules, react-native libraries

// ===== When RN wins =====
// - One JS team building for iOS + Android
// - Apps where 80% of UI is the same on both platforms
// - Teams who want React skills to extend to mobile

// ===== When RN hurts =====
// - Heavy native-feature apps (you'll write platform code anyway)
// - Apps with high-performance graphics needs (Flutter or native)
// - When the team would actually prefer to learn Swift / Kotlin

// ===== Patterns to internalise =====
// - Flexbox is the layout system; row by default? No, column by default
// - Use FlatList for long lists (never ScrollView for >50 items)
// - Image and asset paths are bundler-resolved; use require()
// - Test on a real device early (simulators lie)

// ===== Pitfalls =====
// - Putting a string outside <Text> -> 'Text strings must be rendered within a <Text>'
// - Inline styles in render -> new object every frame; use StyleSheet
// - Forgetting SafeAreaView -> content under notches
// - Treating RN like web React (no <div>, no className)

// React Native: write React, render to native iOS + Android views.
// Created by Meta in 2015. Used by Discord, Shopify, Microsoft, …