====== React Native =====

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

  * [[https://reactnative.dev/docs/intro-react-native-components|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.

<file javascript 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',

  },
});

</file>