React Native

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

• Components nadius per a React Native: View, Text, Image, ScrollView i TextInput.

Hi ha 2 maneres de treballar:

• 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 amb React Native CLI ja que l'altra opció disminueix la nostra sobirania digital i ens permet disposar de tots els recuros reals a la nostra màquina local.

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 i llancem l'app per a la plataforma que ens interessi:

$ npm run ios
$ npm run android

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.

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',
 
  },
});