Piano 72h — 36 lezioni basate sui docs ufficiali React Native

Ogni lezione segue una o più pagine della documentazione ufficiale (reactnative.dev/docs). Le 36 lezioni coprono TUTTE le sezioni principali dei docs.

---

BLOCCO 0 — JavaScript Bridge (6 ore, 3 lezioni)

Riferimento: Prerequisites, MDN JavaScript

Lez 01 — Setup Expo + JS Variabili e Tipi

Docs: Environment Setup

Ora	Argomento	Attività
1h	Node.js, Expo, QR code	npx create-expo-app, Expo Go sul telefono
1h	let/const, string/number/boolean, console.log	Convertire variabili Python in JS

Lez 02 — Array, Oggetti, Funzioni

Docs: MDN JavaScript Guide

Ora	Argomento	Attività
1h	Array: map, filter, forEach, find, reduce	10 esercizi array
1h	Oggetti, destrutturazione, spread, arrow functions	Convertire dict Python in oggetti JS

Lez 03 — ES6+ e Template Literals

Docs: MDN JavaScript Guide

Ora	Argomento	Attività
1h	Template literals, ternary operator, optional chaining	String interpolation
1h	Moduli import/export, async/await, promesse	setTimeout, Promise base

---

BLOCCO 1 — React Foundation (6 ore, 3 lezioni)

Riferimento: Intro to React

Lez 04 — Componenti e JSX

Docs: Intro React Native Components, Intro React

Ora	Argomento	Codice chiave
1h	Core Components: View, Text	<View>, <Text>
1h	JSX rules, componenti funzione, export default	const App = () => <Text>Ciao</Text>

Lez 05 — Props e Composizione

Docs: Props

Ora	Argomento	Codice chiave
1h	Props: passare dati, destrutturare, default	({ titolo, prezzo = 0 })
1h	Children, composizione, componenti piccoli riutilizzabili	Card > Avatar + Info

Lez 06 — State ed Eventi

Docs: State, Handling Text Input

Ora	Argomento	Codice chiave
1h	useState: concetto, dichiarazione, aggiornamento	const [x, setX] = useState(0)
1h	onPress, onChangeText, Button, Alert	Alert.alert('Titolo', 'Msg')

---

BLOCCO 2 — Core Components e Stile (6 ore, 3 lezioni)

Riferimento: Components and APIs

Lez 07 — View, Text, StyleSheet

Docs: View, Text, StyleSheet, Style

Ora	Argomento	Codice chiave
1h	View: contenitore, nesting, stili inline	<View style={{flex:1}}>
1h	StyleSheet.create(), Text: fontSize, color, fontWeight	const s = StyleSheet.create({})

Lez 08 — Height, Width e Box Model

Docs: Height and Width, Layout Props

Ora	Argomento	Codice chiave
1h	height, width, flex, %, padding, margin	padding: 20, marginHorizontal: 10
1h	borderWidth, borderRadius, box model completo	Card con ombra e angoli arrotondati

Lez 09 — Image e ImageBackground

Docs: Images, Image, ImageBackground

Ora	Argomento	Codice chiave
1h	Image da web, Image locale, resizeMode	<Image source={{uri:...}} style={...}/>
1h	ImageBackground, Image style props	Sfondi con testo sovrapposto

---

BLOCCO 3 — Flexbox e Layout (6 ore, 3 lezioni)

Riferimento: Flexbox

Lez 10 — Flexbox: Direzione e Allineamento

Docs: Flexbox

Ora	Argomento	Codice chiave
1h	flexDirection, justifyContent	'row', 'column', 'center', 'space-between'
1h	alignItems, alignSelf	'center', 'stretch', 'flex-end'

Lez 11 — Flex: Spazio e Griglie

Docs: Flexbox, Layout Props

Ora	Argomento	Codice chiave
1h	flex: rapporto, grow, shrink	Header 0, Content 1, Footer 0
1h	flexWrap, gap, griglia 2 colonne	Griglia card con wrap

Lez 12 — Layout Avanzato

Docs: Layout Props, Shadow Props, Transforms

Ora	Argomento	Codice chiave
1h	position absolute/relative, overflow, zIndex	Badge sovrapposto a card
1h	elevation, shadow, transform (rotate, scale)	Ombre e trasformazioni

---

BLOCCO 4 — Scroll e Liste (6 ore, 3 lezioni)

Riferimento: Using ScrollView, Using List Views

Lez 13 — ScrollView e SafeAreaView

Docs: ScrollView, SafeAreaView, KeyboardAvoidingView

Ora	Argomento	Codice chiave
1h	ScrollView verticale, orizzontale, contentContainerStyle	<ScrollView> profilo scrollabile
1h	SafeAreaView, KeyboardAvoidingView	Form che non si nasconde con tastiera

Lez 14 — FlatList Base

Docs: FlatList

Ora	Argomento	Codice chiave
1h	data, renderItem, keyExtractor	<FlatList data={d} renderItem={fn}/>
1h	ListEmptyComponent, ItemSeparatorComponent, ListHeader/Footer	Lista contatti completa

Lez 15 — FlatList Avanzato

Docs: SectionList, Optimizing FlatList Config, VirtualizedList

Ora	Argomento	Codice chiave
1h	SectionList, numColumns, refreshing/onRefresh	Lista con sezioni
1h	Ottimizzazione: windowSize, getItemLayout, maxToRenderPerBatch	Performance checklist

---

BLOCCO 5 — Touch e Interazioni (6 ore, 3 lezioni)

Riferimento: Handling Touches

Lez 16 — TouchableOpacity e Pressable

Docs: TouchableOpacity, TouchableHighlight, TouchableNativeFeedback

Ora	Argomento	Codice chiave
1h	TouchableOpacity: onPress, onLongPress, activeOpacity	Card cliccabile
1h	Pressable: hitSlop, pressRetentionOffset, stati	Bottone personalizzato con feedback

Lez 17 — Gesture Responder System

Docs: Gesture Responder System, Handling Touches

Ora	Argomento	Codice chiave
1h	onStartShouldSetResponder, onMoveShouldSetResponder	View che cattura tocchi
1h	PanResponder: gestureState, dx, dy, moveX/Y	Elemento dragabile

Lez 18 — Switch, Modal, ActivityIndicator

Docs: Switch, Modal, ActivityIndicator, RefreshControl

Ora	Argomento	Codice chiave
1h	Switch on/off, Modal apri/chiudi	Impostazioni con toggle
1h	ActivityIndicator, RefreshControl, ProgressBar	Stati di caricamento

---

BLOCCO 6 — Form e Input (6 ore, 3 lezioni)

Riferimento: Handling Text Input, TextInput

Lez 19 — TextInput Approfondito

Docs: TextInput

Ora	Argomento	Codice chiave
1h	value, onChangeText, placeholder, keyboardType, secureTextEntry	Form login
1h	multiline, onSubmitEditing, blurOnSubmit, maxLength	Form registrazione

Lez 20 — Button, Alert, Picker

Docs: Button, Alert

Ora	Argomento	Codice chiave
1h	Button: title, onPress, color, disabled	Pulsanti vari
1h	Alert: alert(), alert con bottoni, prompt iOS	Conferme, scelte, errori

Lez 21 — Validazione Form

Combinazione di TextInput, Alert, Button, stato

Ora	Argomento	Codice chiave
1h	Pattern validazione: stato errori, check per campo	setErrori({email: 'Email invalida'})
1h	Form complesso multi-campo, submit, reset	Form completo con validazione

---

BLOCCO 7 — Dati e Persistenza (6 ore, 3 lezioni)

Riferimento: AsyncStorage, Network

Lez 22 — AsyncStorage

Docs: AsyncStorage

Ora	Argomento	Codice chiave
1h	setItem, getItem, removeItem, JSON.stringify/parse	AsyncStorage.setItem('k', JSON.stringify(d))
1h	useEffect per caricamento/salvataggio automatico	Todo List persistente

Lez 23 — fetch GET

Docs: Network, Using Fetch

Ora	Argomento	Codice chiave
1h	useEffect + fetch, async/await, response.json()	const res = await fetch(url)
1h	ActivityIndicator, gestione errori, try/catch	Lista posts da API

Lez 24 — fetch POST e WebSocket

Docs: Network, WebSocket

Ora	Argomento	Codice chiave
1h	POST: method, headers, body, JSON.stringify	Inviare dati a API
1h	WebSocket: onopen, onmessage, onerror, onclose	Chat in tempo reale

---

BLOCCO 8 — Navigazione (6 ore, 3 lezioni)

Riferimento: Navigation

Lez 25 — React Navigation Stack

Docs: Navigation, React Navigation docs

Ora	Argomento	Codice chiave
1h	Installazione, createNativeStackNavigator	createNativeStackNavigator()
1h	navigation.navigate, route.params, header options	Lista → Dettaglio con parametri

Lez 26 — React Navigation Tab

Docs: React Navigation Tab docs

Ora	Argomento	Codice chiave
1h	createBottomTabNavigator, tabBarIcon, screenOptions	3 tab: Home, Cerca, Profilo
1h	Icone con @expo/vector-icons, badge, colori	Tab personalizzato

Lez 27 — Navigator Compositi

Docs: React Navigation nesting navigators

Ora	Argomento	Codice chiave
1h	Stack dentro Tab, navigate tra tab	Pattern standard: Tab + Stack per ogni tab
1h	Drawer navigation, combinazioni multiple	Drawer + Tab + Stack

---

BLOCCO 9 — UI Platform (6 ore, 3 lezioni)

Riferimento: Platform Specific Code, Appearance

Lez 28 — Platform e ColorScheme

Docs: Platform, Platform Specific Code, Appearance, useColorScheme

Ora	Argomento	Codice chiave
1h	Platform.OS, Platform.select, estensioni .android/.ios	Codice diverso per Android/iOS
1h	useColorScheme, Appearance, dark mode	Tema chiaro/scuro automatico

Lez 29 — StatusBar, Dimensions, PixelRatio

Docs: StatusBar, Dimensions, useWindowDimensions, PixelRatio

Ora	Argomento	Codice chiave
1h	StatusBar, SafeAreaView, insets	Barra di stato personalizzata
1h	Dimensions, useWindowDimensions, PixelRatio	Layout responsive

Lez 30 — Share, Linking, Vibration

Docs: Share, Linking, Vibration, BackHandler

Ora	Argomento	Codice chiave
1h	Share.share(), Linking.openURL, Linking.canOpenURL	Condividere contenuti, aprire link
1h	Vibration.vibrate(), BackHandler, AppState	Feedback tattile, stato app

---

BLOCCO 10 — Animazioni (6 ore, 3 lezioni)

Riferimento: Animations

Lez 31 — Animated Base

Docs: Animations, Animated

Ora	Argomento	Codice chiave
1h	Animated.Value, Animated.timing, useNativeDriver	FadeIn, SlideIn all’avvio
1h	Animated.View, Animated.Text, interpolate	Opacity + translateY combinati

Lez 32 — Animated Avanzato

Docs: Animated, Easing, AnimatedValue, AnimatedValueXY

Ora	Argomento	Codice chiave
1h	spring, sequence, parallel, delay, loop, stagger	Animazioni composte
1h	Easing, Animated.event, scroll-linked animations	Animazioni legate allo scroll

Lez 33 — LayoutAnimation e Transforms

Docs: LayoutAnimation, Transforms

Ora	Argomento	Codice chiave
1h	LayoutAnimation.configureNext, preset	Animazioni layout automatiche
1h	Transform: rotate, scale, translate, perspective	Card che ruota al click

---

BLOCCO 11 — TypeScript (6 ore, 3 lezioni)

Riferimento: Using TypeScript

Lez 34 — TypeScript Base

Docs: Using TypeScript

Ora	Argomento	Codice chiave
1h	Tipi base, type vs interface, array, unioni	string, number, type Props={}
1h	tsconfig.json, strict mode, inferenza, any (evitare)	Configurare progetto TS

Lez 35 — TypeScript in React Native

Docs: Using TypeScript, Strict TypeScript API

Ora	Argomento	Codice chiave
1h	Props tipizzate, useState, FlatList	Componenti React con TS
1h	Navigazione tipizzata, API types, errori comuni	Convertire Todo List in TS

Lez 36 — Build APK e Presentazione

Docs: Publishing to App Store, Signed APK

Ora	Argomento	Codice chiave
1h	app.json, icon, splash, EAS Build	eas build -p android --profile preview
1h	Presentazione progetto, demo su telefono	README, screenshot, APK

---

RIEPILOGO

Blocco	Lezioni	Argomento	Docs ufficiali
0	01-03	JavaScript Bridge	Prerequisites
1	04-06	React Foundation	Intro React, Props, State
2	07-09	Core Components + Style	View, Text, Image, StyleSheet
3	10-12	Flexbox e Layout	Flexbox, Layout Props
4	13-15	Scroll e Liste	ScrollView, FlatList, SectionList
5	16-18	Touch e Interazioni	Handling Touches, Pressable
6	19-21	Form e Input	TextInput, Form validation
7	22-24	Persistenza e API	AsyncStorage, Network
8	25-27	Navigazione	React Navigation
9	28-30	UI Platform	Platform, Appearance, Share
10	31-33	Animazioni	Animated, LayoutAnimation
11	34-36	TypeScript + Build	Using TypeScript, Publishing