Learning React-Native

Cos'è React-Native?

React Native è un framework per applicazioni mobile che viene utilizzato principalmente per creare applicazioni per Android, iOS e Web.

Configurazione dell'ambiente

Usare NodeJS

La prima cosa da fare per installare React Native è scaricare NodeJS:

# Using Ubuntu
curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs

# Using Debian, as root
curl -fsSL https://deb.nodesource.com/setup_14.x | bash -
apt-get install -y nodejs

Per usare React-Native è meglio utilizzare la versione 14.x di NodeJS perchè le ultime versioni danno problemi. Quindi se hai installato una versione > 14.x di NodeJS effettua un downgrade alla versione 14.x.

Downgrade NodeJS

Creare un progetto

EXPO

Come prima cosa, bisogna installare expo con il comando: npm install expo, successivamente aggiornare le dipendenze con npx expo install.

opzione1: npx create-expo-app nomeApp --template template
opzione2: npx create-expo-app nomeApp

Se non è stato selezionato un template, bisogna selezionare un template con le frecce (up/down) e premi invio (default è la scelta più comune).

Viene poi creata una cartella contenente il progetto.

Dopodichè potrebbe essere utile rendere il progetto una semplice directory, e non un repository git (viene creato automaticamente); per togliere i file di git lanciare i comandi:

del /F /S /Q /A .git
rmdir /s /q .git

Possiamo poi configurare il routing installando le dipendenze:

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar

Possiamo "ripulire" il progetto portandolo al bare minimum eseguendo lo script npm run reset-project.

TailwindCss

Tailwind CSS è un framework CSS utility-first che ti permette di costruire interfacce utente in modo rapido e personalizzabile. Invece di scrivere regole CSS personalizzate, utilizzi classi predefinite per applicare stili direttamente nel markup HTML o JSX. In altre parole è la stessa cosa di usare BootStrap con HTML.

Per utilizzare TailwindCss digitiamo:

npm install nativewind tailwindcss react-native-reanimated react-native-safe-area-context

Per generare i files di configurazione digitiamo npx tailwindcss init; questo crea il file tailwind.config.js (pagina nativewind).

Dopo aver fatto questo creiamo un nuovo file: /app/global.css, che viene utilizzato per definire stili CSS globali che si applicano a tutta l'applicazione, in cui incolliamo:

@tailwind base;
@tailwind components;
@tailwind utilities;

Creiamo anche un file babel.config.js nella root del progetto; è una configurazione per Babel, un transpiler JavaScript. Babel converte il codice moderno (ES6+, JSX, ecc.) in una versione compatibile con i browser o ambienti che non supportano le funzionalità più recenti. Nel fille scriviamo:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
  };
};

Digitiamo poi npx expo customize metro.config.js, che genera il file metro.config.js; andiamo a sovrascriverne il contenuto con:

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require('nativewind/metro');

const config = getDefaultConfig(__dirname)

module.exports = withNativeWind(config, { input: './global.css' })

Per applicare tutti i cambiamenti avviare il server expo con npx expo start --clear.

No EXPO

npx @react-native-community/cli init Awesome01

Per eseguire basta digitare:

To run your project, navigate to the directory and run one of the following npm commands.

- cd simpleTestApp
- npm run android
- npm run ios # you need to use macOS to build the iOS project - use managed workflow if you need to do iOS development without a Mac
- npm run web

Oppure Se l'applicazione non viene eseguita correttamente, avviare il server metro con il comando: npx react-native start oppure npx react-native run-android (metodo preferito dal corso); quest'ultimo richiede la dipendenza nel file package.json:

"devDependencies": {
    "@react-native-community/cli": "latest",
  }

Per applicare le dipendenze basta reinstallare le dipendenze con npm install; questo comando aggiorna la cartellanode_modules.

Check ADB

Per effettuare un check ADB digitare

$ adb devices -l
> List of devices attached
> emulator-5554          device product:sdk_gphone64_x86_64 
> model:sdk_gphone64_x86_64 device:emu64xa transport_id:5

Struttura del progetto

Un progetto React Native ha diversi files, ed è bene conoscere le funzioni di ognuno di essi.

Files

• app.json: è il file di configurazione principale (buttons, etc.), il file da cui le app prenderanno il nome
• App.tsx: file principale che permette di mostrare a schermo i componenti
• babel.config.js: file di bundler, combina tutti i files javascript e permette l'esecuzione sia su web che mobile.
• index.js: importa il filename dell'app da app.json visto prima

assets/

La cartella assets salva tutti gli asset che stiamo usando in react-native. In questa cartella possiamo aggiungere dei files statici come immagini o fonts.

components/

In questa cartella possiamo creare diversi componenti che vengono usati per "wrappare" i componenti dell'applicazione; questi elementi determineranno il layout finale.

Possiamo suddividere i componenti in diverse categorie:

• Atomi: I componenti più piccoli; in questa categoria rientrano elementi come i buttons, titoli, inputs, animazioni, etc. Anche i fonts vengono salvati nella cartella atoms.
• Molecole: Sono la composizione di uno o più atoms.
• Organismi: La combinazione di più molecole che lavorano insieme in modo da creare interfacce elaborate.
• Templates: La collezione di organismi che creeranno un full-page template.

In questa sezione verranno aggiunti nuovi componenti della struttura man mano che essi verranno studiati; per il momento, fare riferimento a questa pagina.

Concetti Fondamentali

• View
• Text
• Image
• Button
• Touchables
• Alert
• Per altri componenti, fare riferimento a questo link.

View

In React-Native non sono presenti i classici tag come <div> di HTML, ma abbiamo lo stesso dei componenti "contenitori", che possiamo usare per raggruppare o nominare dei figli:

<View style={styles.container}>
    <Text>Open up App.js to start working on your app!</Text>
    <StatusBar style="auto" />
</View>

Cosa sono gli styles?

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

• flex: 1 Indica che questa view è flessibile e può crescre orizzontalmente o verticalmente per riempire degli spazi vuoti. Questo permette alla view di riempire tutto lo schermo.
• backgroundColor: '#fff' indica che lo sfondo sarà di colore bianco; per cambiare il colore ci basta cambiare il valore compreso negli apici singoli. Possiamo usare anche dei nomi per indicare i colori: dodgerblue indica un colore preciso.
• alignItems: 'center' e justifyContent: 'center' questi due elementi ci permettono di posizionare la nostra view al centro dello schermo. Senza questi due elementi il nostro testo andrebbe a posizionarsi nell'angolo in alto a sinistra.

Safe area

Nei nuovi dispositivi potremmo avere il problema di dover posizionare i nostri elementi all'interno di una safe area, ovvero un'area nella quale siamo sicuri di poter posizionare elementi. Questo perchè il dispositivo potrebbe essere dotato di una notch, che impedirebbe la corretta visualizzazione della view.

Per correggere questo comportamento, ci basta aggiungere SafeAreaView nelle importazioni:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, SafeAreaView } from 'react-native';

Possiamo quindi sostituire View con SafeAreaView nel nostro codice:

<SafeAreaView style={styles.container}>
    <Text>Open up App.js to start working on your app!</Text>
    <StatusBar style="auto" />
</SafeAreaView>

Per sostituire più testo allo stesso momento in Visual Studio Code, ci basta selezionare il testo da sostituire, e premere ctrl+d o cmd+d per sostituire più testo contemporaneamente.

Per uscire dalla modalità multi cursor editing ci basterà premere esc .

Quello che SafeAreaView fa, è semplicemente aggiungere la giusta quantità di padding top per essere sicura che il testo sia visibile.

Text

Per aggiungere del testo all'interno della nostra applicazione, dobbiamo sempre farlo tramite il componente <Text> </Text> .

Props

Possiamo aggiungere dei cosiddetti props ai nostri componenti, che specificano un comportamento; ad esempio, se avessimo un testo molto lungo, e volessimo limitare le linee utilizzate per mostrare questo testo, ci basterebbe usare il prop numberOfLines:

<SafeAreaView style={styles.container}>
      <Text numberOfLines={1}>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </SafeAreaView>

In questo modo questo modo, alla fine della prima linea verranno visualizzati dei puntini sospensivi (...) per indicare che il testo continua, ma non è visualizzato interamente.

Eventi

Possiamo anche impostare un'azione che viene eseguita a seguito di un evento:

<SafeAreaView style={styles.container}>
      <Text numberOfLines={1} onPress={() => console.log("Click rilevato")}>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </SafeAreaView>

Possiamo usare onPress={} per eseguire un'azione quando un componente viene cliccato; possiamo eseguire l'azione in due modi:

Inline

Scriviamo una funzione lambda (inline) che esegue un'azione; questo metodo è utile nel momento in cui l'azione da eseguire è poco complessa, come un alert o un log in console.

funzione separata

export default function App() {
  const handlePress = () => console.log("click rilevato");
    
  return (
    <SafeAreaView style={styles.container}>
      <Text numberOfLines={1} onPress={handlePress} >
          Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </SafeAreaView>
  );
}

Image

Button

Touchables

Alert

ToDo List

Per creare il profetto digitiamo questo comando; scegliamo il tipo di progetto blank.

$ expo init ToDoList

Creazione di componenti

Per creare un componente non ci basta altro che creare una nuova cartella chiamata components, al cui interno potremo creare i nostri componenti sottoforma di files javascript.

Nel nostro caso, il primo componente da creare è il Task, ovvero un componente grafico che ci permette di visualizzare un task che dobbiamo completare; la sua forma basilare è la seguente:

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

const Task = () => {
    return(
        <View>
            <Text>
                Questo è un task
            </Text>
        </View>
    )
}

/**
 * gli stili grafici del componente
 */
const styles = StyleSheet.create({

});

export default Task;    // in questo modo può essere referenziato in altri files

A noi interessa creare dei Components perchè dobbiamo poter riutilizzare questi componenti in più aree della nostra applicazione; ad esempio, il component Task verrà utilizzato diverse volte per visualizzare più tasks.

Passare argomenti ai components

Per passare degli argomenti (ad esempio del testo da visualizzare), ci basta dire che il nostro Task riceve dei props:

/**
 * 
 * @param {*} props gli argomenti da visualizzare
 * @returns la view
 */
const Task = (props) => {
    return(
        // visualizzo il testo passato come argomento
        <View>
            <Text>
                {props.text}    
            </Text>
        </View>
    )
}

In questo modo, possiamo "inviare" del testo al nostro task dal file App.js:

<View style={styles.items}>
    {/** qui è dove andranno visualizzati i task */}
	<Task text = {'task 1'}/>
    <Task text = {'task 2'}/>
    <Task text = {'task 3'}/>
</View>

Quello che otteniamo è qualcosa del genere:

Stili utili

• justifyContent: 'space-between': separa due elementi e li posiziona ai lati estremi dello schermo.
• flexDirection: 'row': dispone gli elementi sulla stessa riga (e non in due righe diverse in un'unica colonna).
• alignItems: 'center': allinea più elementi al centro dello schermo.

Creare uno stato

import {useState} from 'react';

const [task, setTask] = useState();

• task: nome dello stato, lo usiamo per effettuare il track dello stato (in questo caso dell'immissione del reminder)
• setTask: la funzione che useremo per impostare lo stato

Usiamo lo stato per le cose che cambiano spesso nella nostra applicazione