React Native nos permite crear aplicaciones reales nativas para iOS y Android basado en React JS. Utilizando ReactJS, en lugar de obtener una aplicación web híbrida, obtenemos una aplicación real nativa.
Una aplicación híbrida es aquella que ejecuta código HTML, CSS y Javascript dentro de un componente de la aplicación móvil destinado a cargar páginas web (una especie de iframe). Una aplicación nativa es la que está programada utilizando el lenguaje nativo de la plataforma.

El código que programemos usando React Native será traducido al lenguaje nativo de la plataforma, mientras que cuando desarrollamos una aplicación híbrida, ejecutamos código HTML, CSS y JavaScript dentro de esta especie de iframe.

Para programar una aplicación nativa para Android, necesitaríamos conocer el lenguaje Kotlin, mientras que si la aplicación es para IOS, necesitaríamos saber Swift. Sin embargo, con React Native, podremos realizar una aplicación nativa para ambas plataformas conociendo una sola tecnología.

Las aplicaciones nativas, respecto de las aplicaciones híbridas, tienen:

Mejor rendimiento
Menor consumo de memoria.
Mayor velocidad.

Crear una aplicación en React Native con Expo

Documentación de la instalación.

1. Instalamos Expo en el sistema operativo:

npm install -g expo-cli

2. Creamos nuestro proyecto Expo. Si estamos usando windows, es recomendable que ejecutemos este comando desde la cmd, no desde powershell ni git bash.

expo init AwesomeProject

3. Ejecutamos el proyecto que hemos creado

npm start

4. Instalamos la aplicación Expo en el teléfono móvil: Expo

5. Para desplegar escanemos el código qr generado. Para evitar problemas…

En el teléfono móvil Android, iremos a ajustes → Aplicaciones → Expo → Mostrar sobre otras apps.
Ejecutaremos bajo la opción Tunnel connection.

Componentes básicos de React Native

Equivalente a los div de HTML. Sirve para agrupar componentes.

<View><View>

<Text>El texto<Text>

<TextInput />

<Button title="Cerrar" onPress={ btnPulsado }/>

El componete Button no se puede estilizar (sólo en Android). En su lugar, usaremos TouchableOpacity. Para que el editor lo reconozca, tendremos que importar:

import styled from 'styled-components/native';

<Image source={imagen} />

Cargar un combo desplegable:

<Picker style={styles.container} 
  selectedValue={microCicloActivo}
  onValueChange={valor => setValor(valor)}>
    <Picker.Item key=0 value=0 label="titulo 0"/>
    <Picker.Item key=1 value=1 label="titulo 1"/>
    <Picker.Item key=2 value=2 label="titulo 2"/>
</Picker>

Cargar un cuadro de diálogo. Cargaremos una librería externa para hacerlo.<

Otros componentes:

FlatList / mainList (listas de elementos)
AsyncStorage (equivalente a localStorage)

styled-components en react-native

Es posible utilizar Styled Components en React native sin ningún tipo de limitación. Sin embargo, para maquetar los componentes en React Native, hemos de tener en cuenta lo siguiente:

El valor por defecto el estilo display es flex. Los posibles valores de este estilo son: flex y none.
El valor por defecto del estilo flex-direction es column, al contrario de lo que ocurre en una aplicación web, es es row.
La unidad de medida que usaremos será px. Ni %, ni em, ni rem.

import React from 'react';
import { View } from 'react-native';
import styled from 'styled-components/native';

export const VerticalLayout = styled.View`
  flex-direction: column;
`;

Bottom Navigation

npm i react-navigation

./src/navigation/index.js

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import BottomNavigation from './bottomNavigation';

export default ()=>
<NavigationContainer>
    <BottomNavigation/>
</NavigationContainer>

./src/navigation/bottomNavigation/index.js

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import test from '../../screens/home';

const Tab = createBottomTabNavigator();

export default () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={test} />
      <Tab.Screen name="Settings" component={test} />
    </Tab.Navigator>
  );
}

Stack Navigator

El stack es el contenedor donde se precargan las pantallas.

Las pantallas son los screen.

npm install @react-navigation/native
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
npm install @react-navigation/stack

./App.js

import 'react-native-gesture-handler';
import React from 'react';
import Navigation from './src/navigation';

export default () => <Navigation />

./src/navigation/index.js

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import Main from './stacks/index'

export default ()=>
<NavigationContainer>
    <Main/>
</NavigationContainer>

./src/navigation/stacks/index.js

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import test from '../../screens/home';
const Stack = createStackNavigator();
export default ()=> {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={test} />
      <Stack.Screen name="page2" component={test} />
    </Stack.Navigator>
  );
}

./src/screens/home/index.js

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

export default ({navigation, route})=>
<View>
    <Text>screen {route.name}</Text>
    <Button title="Change Screen" onPress={ () =>
        navigation.navigate('page2')
        }></Button>
</View>