Tag: react native, mobile, ios, android, cross-platform, javascript, typescript

Livello: intermedio

TL;DR: Framework per lo sviluppo di applicazioni mobile native usando React e JavaScript/TypeScript. Permette di condividere la logica di business renderizzando vere UI native per iOS e Android.

Concetti chiave

Usa una singola codebase JS/TS per compilare app multipiattaforma.

Mappa componenti React (es. <View>, <Text>) ai rispettivi componenti nativi (es. UIView, TextView).

Lo styling utilizza un sottoinsieme di CSS in JS, basato principalmente su Flexbox.

L'architettura classica usa un Bridge asincrono per comunicare tra il thread JavaScript e quello nativo serializzando in JSON.

La Nuova Architettura (New Architecture) sostituisce il Bridge con JSI (JavaScript Interface), permettendo chiamate dirette C++ sincrone.

Fabric è il nuovo sistema di rendering concorrente della Nuova Architettura.

TurboModules permettono il caricamento lazy dei moduli nativi migliorando il tempo di avvio.

Expo è l'ecosistema/framework standard consigliato per facilitare build, routing e accesso alle API di sistema.

Domande tipiche e risposte pronte

Q: Qual è la differenza tra React e React Native?R: React manipola il DOM web tramite tag HTML come div o p. React Native non ha un DOM e usa componenti primitivi nativi mobili, richiedendo API specifiche al posto di quelle del browser (come window o document).

Q: Come gestisci liste contenenti molti elementi senza bloccare l'app?R: Utilizzo sempre FlatList o SectionList invece di ScrollView. Questi componenti usano la virtualizzazione, renderizzando in memoria solo gli elementi attualmente visibili a schermo.

Q: Che cos'è Metro?R: Metro è il bundler JavaScript predefinito di React Native. Prende tutto il codice JS, gli asset e le dipendenze e li compila in un unico file bundle leggibile dal motore JS dell'app.

Insidie e errori comuni

Inserire stringhe di testo direttamente dentro una <View> senza wrapparle in un componente <Text> (causa un crash immediato).

Dimenticare di assegnare flex: 1 a un contenitore principale, ottenendo una schermata bianca.

Lasciare istruzioni console.log nel codice di produzione, il che può saturare il bridge e degradare pesantemente i frame rate.

Non testare la tastiera a schermo (KeyboardAvoidingView) causando UI coperte sui dispositivi più piccoli.

Scrivere animazioni pesanti nel thread JS invece di offloadarle al thread UI nativo (usando useNativeDriver: true o Reanimated).

Snippet e comandiTypeScript

```import React from 'react';

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

export default function BasicScreen() {

return (

<SafeAreaView style={styles.safeArea}>

<View style={styles.container}>

<Text style={styles.title}>Benvenuto in React Native</Text>

</View>

</SafeAreaView>

);

}

const styles = StyleSheet.create({

safeArea: {

flex: 1,

backgroundColor: '#fff',

},

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

},

title: {

fontSize: 20,

fontWeight: 'bold',

},

});

Inizializzare un nuovo progetto React Native tramite Expo

npx create-expo-app@latest my-app

Avviare il bundler Metro

npx expo start

```

Da ripassare

[ ] Implementazione e differenze pratiche della Nuova Architettura (Fabric e TurboModules).

[ ] Utilizzo di Expo Router per la navigazione file-based al posto di React Navigation puro.

[ ] Creazione di moduli nativi custom scrivendo codice nativo (Swift per iOS, Kotlin per Android).

Riferimenti

React Native Official Docs

Expo Documentation

React Native Reanimated Docs