React Native nello sviluppo mobile: cos'è, concetti chiave e come funziona

Fondamenti (JSX, Functional Component, Hooks)

JSX (JavaScript XML) — estensione sintattica di JavaScript per descrivere l'UI. Sembra HTML ma funziona tramite React.createElement(). Espressioni JSX: {variable}, {condition && <View />}, {array.map()}. Functional Component — una funzione che restituisce JSX. Accetta props come argomento. Standard moderno di React (prima di React 16.8 venivano usati i Class Components). Hooks — funzioni per accedere a stato e ciclo di vita da Functional Component. Regole degli Hooks: solo al livello superiore, solo in Functional Components.

Riferimento Hooks

useState — stato locale. useEffect — effetti collaterali. useContext — accesso a Context. useRef — ref mutabile. useCallback — memorizzazione di funzione. useMemo — memorizzazione di valore. Custom Hooks — logica riutilizzabile: function useDebounce(value, delay).

// Functional Component con hooks in React Native
import React, { useState, useEffect, useCallback } from 'react';
import {
  View, Text, FlatList,
  ActivityIndicator, SafeAreaView
} from 'react-native';

const DATA = Array.from({ length: 100 }, (_, i) => ({
  id: String(i),
  title: `Item ${i + 1}`,
}));

const Item = React.memo(({ title }) => (
  <View>
    <Text>{title}</Text>
  </View>
));

export default function App() {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setTimeout(() => setRefreshing(false), 2000);
  }, []);

  return (
    <SafeAreaView>
      <FlatList
        data={DATA}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={item => item.id}
        refreshing={refreshing}
        onRefresh={onRefresh}
      />
    </SafeAreaView>
  );
}

Hooks (useState, useEffect, useRef, useCallback, useMemo)

useState — restituisce [value, setValue]. setValue — sostituisce (non unisce come setState in Class). Per oggetti: setUser(prev => ({ ...prev, name: 'New' })). useEffect — viene eseguito dopo il rendering. Array di dipendenze: [] — una volta (montaggio), [dep] — quando dep cambia, undefined — ogni rendering. Funzione di pulizia — return () => {}. useContext — const value = useContext(MyContext). Richiede Context.Provider più in alto nell'albero.

useRef — oggetto mutabile che mantiene il valore tra i rendering. .current — mutazione. Usato per: accesso a elementi nativi (ref={inputRef}), memorizzazione di valori precedenti, timer. useCallback — restituisce una funzione memoizzata. const handlePress = useCallback(() => {}, [dep]). useMemo — restituisce un valore memoizzato. const sorted = useMemo(() => data.sort(), [data]). Usa useMemo per calcoli costosi.

useState — per stato semplice. useEffect — per chiamate API e sottoscrizioni. useCallback/useMemo — per ottimizzazione. IT Sectr consiglia di non memoizzare tutto — solo quando ci sono reali problemi di prestazioni.

Custom Hooks

Custom Hook — una funzione che usa hooks integrati. Il nome inizia con use*. Esempi: useDebounce, useNetworkStatus, useAppState, useKeyboard. I Custom Hooks sono il modo principale per riutilizzare la logica in React Native. IT Sectr consiglia di estrarre la logica di business in Custom Hooks e mantenere i componenti puliti (solo JSX + stili).

Componenti (View, Text, FlatList, ScrollView, SafeAreaView)

View — contenitore di base (analogo a div). Text — testo (unico componente per il testo). TextInput — input di testo. ScrollView — contenitore scorrevole. FlatList — lista virtualizzata per grandi dati. SectionList — FlatList con sezioni. SafeAreaView — padding automatico da Safe Area (notch, barra di stato). Pressable — sostituto moderno di TouchableOpacity. useColorScheme — rilevamento tema scuro/chiaro.

Ottimizzazione FlatList

FlatList — virtualizzazione: vengono renderizzati solo gli elementi visibili + windowSize. Ottimizzazione: 1) keyExtractor — chiave univoca, 2) getItemLayout — altezza fissa (salta misurazione onLayout), 3) React.memo per renderItem, 4) maxToRenderPerBatch (predefinito 10), 5) windowSize (predefinito 21), 6) removeClippedSubviews, 7) initialNumToRender.

Navigazione in React Native

React Navigation — stack di navigazione standard. NativeStackNavigator — animazione nativa (push/pop). TabNavigator — schede inferiori. DrawerNavigator — menu laterale. NavigationContainer — componente radice di navigazione. Deep linking — configurazione collegamenti per link esterni. Flusso di autenticazione — navigazione condizionale: isAuth ? AppStack : AuthStack. IT Sectr consiglia NativeStackNavigator per schermate principali e TabNavigator per navigazione di primo livello.

Stili (StyleSheet)

StyleSheet.create() — creazione di stili. Tutte le proprietà in camelCase: backgroundColor, fontSize, marginTop. Flexbox — modello di layout predefinito (flexDirection: 'column'). Nessuna cascata CSS, nessuna ereditarietà, nessun selettore. Inline styles — funzionano ma non consigliati. StyleSheet.compose() — combinazione di stili. Platform.select — stili per piattaforma: Platform.OS === 'ios' ? styles.ios : styles.android. SafeAreaView — gestione degli inset dell'area sicura.

Styled Components e CSS-in-JS

Styled Components — libreria per CSS-in-JS in React Native. Restyle — theming + stili responsive. NativeWind — Tailwind CSS per React Native. Unistyles — stili veloci con CSS atomico. Modalità scura — useColorScheme + stili dinamici. IT Sectr consiglia StyleSheet.create per semplicità e NativeWind per progetti con sistema di design.

Animazione (Animated API)

Animated API — animazione dichiarativa. Animated.Value — valore di animazione. Animated.timing — animazione semplice. Animated.spring — animazione a molla. Animated.View — View animabile. useNativeDriver — animazione sul thread nativo (transform, opacity — supportati). Animated.loop — animazione ciclica. LayoutAnimation — animazione automatica al cambio di layout. reanimated 2/3 (libreria) — alternativa più performante. Metro Bundler — bundler JavaScript. Raggruppa JS + asset in un bundle. Supporta Fast Refresh (Hot Reload). Hermes — motore JS ottimizzato per mobile: avvio rapido, meno memoria. Predefinito da RN 0.70+.

Gesture Handler e animazioni

React Native Gesture Handler — elaborazione nativa dei gesti. PanGestureHandler, PinchGestureHandler, TapGestureHandler. Gesture (RNGH 2.x) — API dichiarativa dei gesti. Reanimated + Gesture Handler — combinazione per animazioni a 60fps con gesti. react-native-skia — rendering GPU per grafica 2D complessa. IT Sectr consiglia Reanimated 3 per tutte le animazioni più performanti di Animated API.

Rete (fetch, AsyncStorage, API)

fetch — client HTTP integrato. Supporta GET, POST, headers, body. Axios — libreria popolare con intercettori. AsyncStorage — archivio chiave-valore (simile a UserDefaults). MMKV — alternativa veloce ad AsyncStorage di WeChat. react-native-keychain — archiviazione sicura dei token. React Query (TanStack Query) — gestione stato server: caching, riconvalida, paginazione. IT Sectr consiglia React Query per richieste API e MMKV per archiviazione locale.

import AsyncStorage from '@react-native-async-storage/async-storage';

const storeToken = async (token) => {
  try {
    await AsyncStorage.setItem('@auth_token', token);
  } catch (e) {
    console.error('Storage error:', e);
  }
};

const getToken = async () => {
  try {
    return await AsyncStorage.getItem('@auth_token');
  } catch (e) {
    return null;
  }
};

Native Modules e Turbo Modules

Native Module — ponte tra JS e codice nativo (Java/Kotlin per Android, ObjC/Swift per iOS). Permette di chiamare API native da JS. Turbo Modules (New Architecture) — sostituzione dei vecchi Native Modules. Chiamata sincrona, tipizzazione tramite Codegen, meno overhead. Fabric Renderer — nuovo renderer con layout sincrono. JSI (JavaScript Interface) — accesso diretto di JS a oggetti nativi senza ponte. IT Sectr consiglia Turbo Modules per nuovi progetti e Native Modules per quelli esistenti.

// Modulo nativo Android (Kotlin)
class CalendarModule(reactContext: ReactApplicationContext) :
    ReactContextBaseJavaModule(reactContext) {

    override fun getName() = "CalendarModule"

    @ReactMethod
    fun createCalendarEvent(name: String, location: String) {
        val intent = Intent(Intent.ACTION_EDIT).apply {
            type = "vnd.android.cursor.item/event"
            putExtra(Events.TITLE, name)
            putExtra(Events.EVENT_LOCATION, location)
        }
        reactContext.startActivity(intent)
    }
}

Test (Jest, React Native Testing Library)

Jest — esecutore di test standard. describe/it/expect. React Native Testing Library — test di componenti. render, fireEvent, waitFor. screen.getByText, getByTestId — ricerca. userEvent — simulazione di azioni. Test Snapshot — toMatchSnapshot(). MSW (Mock Service Worker) — mock API. Detox — test E2E per RN (grey-box, nativo). IT Sectr consiglia React Native Testing Library per componenti e Detox per scenari end-to-end.

CodePush (App Center) — aggiornamenti OTA del bundle JS senza pubblicazione su App Store/Google Play. Usato per: fix urgenti, test A/B, modifiche ai contenuti. Limitazioni: non può modificare codice nativo. Alternative: EAS Update (Expo), react-native-update. IT Sectr consiglia CodePush per fix urgenti e EAS Update per progetti Expo.

Expo — framework per React Native. Managed workflow — tutte le configurazioni tramite app.json. Development builds — moduli nativi personalizzati senza eject. Expo SDK — moduli integrati: fotocamera, biometria, notifiche. EAS Build — build cloud. Expo Router — routing basato su file (simile a Next.js). IT Sectr consiglia Expo per nuovi progetti e bare RN per progetti con personalizzazione nativa profonda.