Setup e inizializzazione di React

Native
1. Cosa è React Native ed Expo

React Native è un framework JavaScript sviluppato da Facebook che ti consente di creare

applicazioni mobile native per iOS e Android utilizzando React. Expo, invece, è un set di
strumenti e servizi che semplifica lo sviluppo di app React Native, soprattutto per chi inizia. Con
Expo, non hai bisogno di configurare complesse build di iOS o Android perché gestisce molte
delle complessità dello sviluppo nativo.

2. Prerequisiti

Prima di iniziare, devi assicurarti di avere alcuni strumenti già installati sul tuo computer:

1. Node.js: React Native e Expo utilizzano Node.js come runtime. Puoi scaricare Node.js
dalla pagina ufficiale. Assicurati di scaricare la versione LTS (Long Term Support).

2. npm o yarn: Sono gestori di pacchetti per JavaScript. npm viene installato
automaticamente con Node.js, mentre yarn può essere installato tramite:

npm install --global yarn

3. Creare progetto con Expo

Inizializza il tuo progetto con Expo inserendo nel terminale il comando:

npx create-expo-app@latest

4. Avvia il progetto

npx expo start

Questo comando avvierà il server di sviluppo Expo, che ti fornirà un’interfaccia web per gestire il
progetto. Ti verrà mostrato un QRCode che puoi scansionare con l’app Expo Go sul tuo telefono,
permettendoti di vedere la tua app direttamente sul dispositivo.

5. Struttura base del progetto

Quando il progetto è creato, avrai una struttura di cartelle simile a questa:

• App.js: Questo è il punto di ingresso della tua app. Qui è dove inizierai a scrivere
il codice dell’interfaccia e la logica dell’app.
 • node_modules/: Contiene tutte le dipendenze installate tramite npm o yarn.
• package.json: Un file importante che contiene le informazioni del progetto e le
dipendenze necessarie. Ogni volta che installi una nuova libreria, questa verrà aggiunta qui.
• assets/: Qui puoi mettere immagini, font o qualsiasi asset statico che la tua app
utilizzerà.

6. Installa le dipendenze

Man mano che sviluppi la tua app, potresti voler aggiungere delle librerie di terze parti (per la
navigazione, la gestione dello stato, ecc.). Puoi farlo utilizzando npm o yarn. Ad esempio, per
installare React Navigation (una libreria comune per gestire la navigazione nelle app React
Native), puoi usare:

npm install @react-navigation/native

Cosa è Expo CLI?

Expo CLI è uno strumento di sviluppo e viene installato automaticamente con il pacchetto expo
quando si crea un nuovo progetto. È possibile utilizzarlo sfruttando npx (un package runner di
Node.js).

È stato progettato per aiutare l'utente a muoversi più velocemente durante la fase di sviluppo
dell'applicazione. Ad esempio, la prima interazione con la CLI di Expo è l'avvio del server di
sviluppo con il comando: npx expo start.

Di seguito è riportato un elenco di comandi comuni che verranno utilizzati con Expo CLI durante lo
sviluppo dell'applicazione:

Comando Descrizione

npx expo start Avvia il server di sviluppo (sia che si utilizzi

una build di sviluppo o Expo Go)

npx expo prebuild Genera directory native per Android e iOS

utilizzando Prebuild

npx expo run:android Compile app native Android localmente

npx expo run:ios Compila app native iOS localmente

npx expo install package-name Si usa per installare una nuova libreria o per
convalidare e aggiornare librerie specifiche
 nel progetto, aggiungendo l'opzione --fix a
questo comando

npx expo lint Imposta e configura ESLint. Se ESLint è già

configurato, questo comando listerà i file del
progetto

In breve, Expo CLI consente di sviluppare, compilare, avviare l'applicazione e altro ancora. Per
ulteriori informazioni sulle opzioni disponibili e sulle azioni che si possono eseguire con la CLI,
consultare il riferimento alla CLI di Expo.

Entry Point e Routing System

In React Native, l’entry point (punto di ingresso) di default è il file `index.js` . Questo file avvia
l'applicazione e definisce il primo componente che verrà renderizzato. Esistono diversi modi per
gestire il routing (la navigazione tra le schermate) in React Native. Di seguito ti spiegherò nel
dettaglio i tre principali approcci per gestire il routing.

1. Entry Point di React Native (`index.js`)

Il file `index.js` è il punto di partenza di ogni app React Native. Quando l’app viene eseguita,
React Native cerca questo file e lo utilizza per montare l’intera applicazione.

Un esempio comune di `index.js`:

```
import { AppRegistry } from 'react-native';
import App from './App'; // Il file App.js contiene la struttura principale dell'app
import { name as appName } from './app.json'; // Recupera il nome dell'app

AppRegistry.registerComponent(appName, () => App);

```

In questo esempio:
- `AppRegistry.registerComponent` : È una funzione fornita da React Native che dice
all'applicazione quale componente usare come punto di ingresso. In questo caso, il componente
`App` è il primo che verrà renderizzato.
- `App.js` : Contiene la struttura dell'app, che potrebbe includere la logica per il routing.

---

2. Gestire il Routing in React Native

In React Native, il routing si riferisce alla navigazione tra diverse schermate o viste dell’app.
Esistono tre modi principali per gestire il routing:

A. React Navigation (il più comune e popolare)

[React Navigation](https://reactnavigation.org/) è una libreria molto utilizzata per gestire la

navigazione nelle app React Native. Supporta diverse modalità di navigazione, come stack, tab e
drawer navigation.

# 1. Installazione
Prima di utilizzarla, devi installare le dipendenze:

npm install @react-navigation/native

npm install @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

# 2. Implementazione di Stack Navigator

Il più comune è lo Stack Navigator , che simula un flusso di navigazione a "pila" (una schermata
sopra l'altra). Ecco un esempio:

`App.js`
```
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';

const Stack = createNativeStackNavigator();

export default function App() {

return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
```

`HomeScreen.js`
```
import React from 'react';
import { Button, View, Text } from 'react-native';

export default function HomeScreen({ navigation }) {

return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => navigation.navigate('Details')}
/>
</View>
);
}
```

`DetailsScreen.js`
```
import React from 'react';
import { View, Text } from 'react-native';

export default function DetailsScreen() {

return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Details Screen</Text>
</View>
);
}
```

In questo esempio:
- `NavigationContainer` : È il componente di livello superiore che gestisce lo stato della
navigazione e dei suoi navigatori.
- `Stack.Navigator` : Definisce un insieme di schermate che si comportano come una pila.
- `navigation.navigate('Details')` : Viene utilizzato per passare alla schermata "Details".

# 3. Altri Tipi di Navigatori in React Navigation

- Tab Navigator : Per una navigazione tramite schede (tabs).
- Drawer Navigator : Per una navigazione tramite menu a scomparsa (drawer).

Per installare questi navigatori, dovresti aggiungere altre dipendenze, ad esempio:

```
npm install @react-navigation/bottom-tabs
npm install @react-navigation/drawer
```

---
 B. React Native Router Flux

[React Native Router Flux](https://github.com/aksonov/react-native-router-flux) è un'altra

libreria per la gestione della navigazione, più semplice e meno personalizzabile rispetto a React
Navigation. Questa libreria integra il routing e la gestione dello stato in un unico pacchetto,
rendendo il codice più compatto.

# 1. Installazione
Per installarlo:

npm install react-native-router-flux

# 2. Implementazione
Ecco un esempio con React Native Router Flux:

`App.js`
```
import React from 'react';
import { Router, Scene } from 'react-native-router-flux';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';

export default function App() {

return (
<Router>
<Scene key="root">
<Scene key="home" component={HomeScreen} title="Home" initial />
<Scene key="details" component={DetailsScreen} title="Details" />
</Scene>
</Router>
);
}
```

`HomeScreen.js`
```
import React from 'react';
import { Button, View, Text } from 'react-native';
import { Actions } from 'react-native-router-flux';

export default function HomeScreen() {

return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
 onPress={() => Actions.details()}
/>
</View>
);
}
```

In questo esempio:
- `<Router>` : È il componente che avvolge la tua applicazione e gestisce la navigazione.
- `<Scene>` : Ogni scena rappresenta una schermata.
- `Actions.details()` : Viene utilizzato per spostarsi tra le schermate.

---

C. React Native Navigation (di Wix)

[React Native Navigation] è una soluzione di routing nativa sviluppata da Wix. È più complessa
da configurare rispetto a React Navigation, ma offre prestazioni migliori poiché utilizza
direttamente le API di navigazione native di iOS e Android.

# 1. Installazione
Per installarlo, segui le istruzioni dettagliate della
[documentazione](https://wix.github.io/react-native-navigation/docs/installation/).
Ecco alcuni comandi di base:
```
npm install react-native-navigation
npx react-native link react-native-navigation
```

# 2. Implementazione Base
Ecco un esempio:

`index.js`
```
import { Navigation } from 'react-native-navigation';
import App from './App';

Navigation.registerComponent('HomeScreen', () => App);

Navigation.events().registerAppLaunchedListener(() => {
Navigation.setRoot({
root: {
stack: {
children: [
{
component: {
name: 'HomeScreen'
 }
}
]
}
}
});
});
```

Qui viene utilizzata una navigazione basata su stack , simile a React Navigation, ma con una
configurazione e gestione più vicina alle funzionalità native.

---

Conclusione

Quindi, per gestire il routing in React Native , hai tre principali soluzioni:

1. React Navigation : La soluzione più comune e flessibile, con molte opzioni per la navigazione
tra stack, tab e drawer.

2. React Native Router Flux : Una libreria più semplice e compatta per gestire il routing.

3. React Native Navigation (Wix) : Un'opzione più avanzata che offre migliori prestazioni
utilizzando le API native.

Ogni soluzione ha i suoi vantaggi, e la scelta dipende dalle esigenze del tuo progetto e dal livello
di complessità della tua app.

Per ora è tutto: se hai dei dubbi sono giù