React Native

React és un framework per a JavaScript molt popular desenvolupat per Facebook/Meta.

React Native son unes llibreries per poder desenvolupar aplicacions multiplataforma. A diferència de Cordova que executa el codi Javascript a l'arxiu executable final, React Native traudeix als diferents llenguatges nadius de les plataformes objectiu, en particular Android i iOS.

En React Native no podrem crear tags HTML genèrics com H1 o DIV, ja que aquests no tenen un equivalent als dispositius mòbils (sí que funcionarien en web, però llavors no seria multiplataforma). En el seu lloc, cal emprar els Native Components com View, Text, Image, ScrollView i TextInput.

• Web oficial: https://reactnative.dev/
• Components nadius per a React Native: View, Text, Image, ScrollView i TextInput.

Eines bàsiques

Per poder treballar amb React Native caldrà disposar de:

• NodeJS versió LTS
• Android Studio (o com a mínim disposar de les SDKs al PC).
• XCode si volem treballar en iOS.

Hi ha 2 eines maneres de treballar i que tenen eines diferents:

• Expo: és una plataforma que compila i realitza moltes operacions per tu sobre la seva infraestructura, com compilar.
• React Native CLI: totes les eines estan en local. Ens permet mes personalització i menys dependència de tercers.

Treballarem aquí amb React Native CLI ja que millora la nostra sobirania digital i ens permet disposar de tots els recursos reals a la nostra màquina local.

Creació del projecte

Crear un projecte React Native CLI (ens demanarà el nom del projecte):

$ npx @react-native-community/cli init

Ens demanarà:

• el nom de l'app (crearà la carpeta amb el nom)
• si instal·lem CocoaPods (per a iOS és necessari)

Entrem al projecte.

En Linux ens caldrà obrir un altre terminal per engegar Metro:

$ npx react-native-start

Llancem l'app per a la plataforma que ens interessi:

$ npm run ios
$ npm run android
$ npx react-native run-android
$ npx react-native run-ios

Inicialment la plataforma web no està disponible.

Primer codi exemple

Elimineu el codi d'exemple App.js que ve a la plantilla per defecte i utilitzeu aquest App.jsx

SafeAreaProvider i SafeAreaView impedeixen que el contingut vagi a la barra d'estat del dispositiu. Per disposar d'aquests elements cal instal·lar:

$ npm install react-native-safe-area-context

Utilitzem només els elements permesos per React Native, i fem un bucle per omplir la pantalla i comprovar el ScrollView.

App.jsx

import { NewAppScreen } from '@react-native/new-app-screen';
import { StatusBar, ScrollView, StyleSheet, useColorScheme, Text, View } from 'react-native';
import { SafeAreaProvider, SafeAreaView, useSafeAreaInsets, } from 'react-native-safe-area-context';
 
export default function App() {
	const isDarkMode = false;
 
	const arrayIndices = Array.from({ length: 100 }, (_, i) => i);
 
	return <SafeAreaProvider>
		<SafeAreaView>
			<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
			<ScrollView>
				<View style={styles.container}>
					<Text>Hello World React Native</Text>
					{arrayIndices.map( (elem) => <Text key={elem}>Hola {elem}</Text> )}
				</View>
			</ScrollView>
		</SafeAreaView>
		</SafeAreaProvider>;
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: 'center',
 
  },
});