1. ¿qué es react native?

2. Qué expo, cómo se instala, para que sirve y cómo se ejecuta

3. Instalar expo, y hacer una visualización en su celular / web
4. defina que es un componente
5. Qué es un props en react native
6. Estilos en react native
7. Cómo pasar props entre componentes
8. Cómo pasar variables y objetos por las propiedades
9. Pasando funciones entre componentes por los props
10. ¿Estado en React native?
11. Cuál es la documentación oficial de react navigation.
12. Cómo se instala, cómo se configura los diferentes tipos de navegación
13. Qué es y para que funciona el react native elements y mencione lo más conocidos
14. Qué es un servicio, cómo se configura en React Native
15. Cómo consumir los servicios para consultar, modificar, eliminar y agregar. (teórico)
16. Cómo hacer un screen react native
17. Cómo funciona las rutas en react native
18. Definir el proyecto de la aplicación móvil que van a desarrollar.

SOLUCION:

1. React Native es un framework de programación de aplicaciones nativas

multiplataforma que está basado en JavaScript y ReactJS.

2. Expo es un conjunto de herramientas, librerías y servicios los cuales te permiten

desarrollar apps nativas en iOS y Android escritas en JavaScript.
Para instalar expo debemos seguir los siguientes pasos:
 Primero instalamos con npm explo-cli y exp (debemos de
tener Node.js y npm instalados)

npm install -g expo-cli exp

 Después creamos nuestra zona de trabajo, le decimos como se quiere llamar la

carpeta:

expo init nombreApp

 Una vez que tengamos la carpeta nos metemos dentro:

cd nombreApp
 Una vez dentro ya arrancamos Expo:

expo start
Expo utiliza Expo SDK, el cual es una librería nativa y de JavaScript que provee acceso a la
funcionalidad del dispositivo como a la cámara, contactos, almacenamiento local, entre
otros.
Expo proporciona componentes de UI que las apps mantienen pero que en React Native
puro no, como, por ejemplo: íconos, imágenes con blur, etc.
3. Listo
4. Los componentes permiten separar la interfaz de usuario en piezas independientes,
reutilizables y pensar en cada pieza de forma aislada.
los componentes son como las funciones de JavaScript. Aceptan entradas arbitrarias
(llamadas “props”) y devuelven a React elementos que describen lo que debe aparecer
en la pantalla.

5. React Props son como argumentos de función en JavaScript y atributos en HTML.

Para enviar accesorios a un componente, use la misma sintaxis que los atributos
HTML:

Ej:

Agregue un atributo "marca" al elemento Automóvil:

const myelement = <Car brand="Ford" />;

El componente recibe el argumento como un props objeto:

Ej:

Utilice el atributo de marca en el componente:

class Car extends React.Component {

render() {
return <h2>I am a {this.props.brand}!</h2>;
}
}

6. La mayoría de los estilos nativos de React son sus formularios CSS, pero en camel case.
Así, el  text-decoration  convierte en  textDecoration  .
 A diferencia de CSS, los estilos no se heredan. Si desea que los componentes
secundarios hereden un cierto estilo, debe proporcionárselos explícitamente al niño.
Esto significa que no puede establecer una familia de fuentes para
una  View  completa.

Algunos ejemplos de estilos relacionados son:

 Añadiendo múltiples estilos

 Estilo condicional

 Estilo usando una hoja de estilo

 Estilismo usando estilos en línea

7. Los props se envían a los componentes al momento de crearlos, y es tan fácil como
mandar las propiedades como un atributo del <tag> del componente, por ejemplo,
supongamos que tenemos un componente <ItemList> , el cual necesita recibir los
datos de un producto, dicho producto debe contener el nombre y un precio:

<ItemList product={item}/>

Mandar objetos es una forma simple y limpia de mandar propiedades, pero también lo
podríamos hacer en varias propiedades, por ejemplo:

<ItemList productName={product.name} productPrice={product.price}/>

8. El método Object.values() devuelve un array con los valores correspondientes a

las propiedades enumerables de un objeto. Las propiedades son devueltas en el mismo
orden a como lo haría un bucle for...in (la única diferencia es que un bucle for-
in también enumera las propiedades en la cadena de prototipo de un objeto).
const object1 = {
a: 'somestring',
b: 42,
c: false
};

console.log(Object.values(object1));
// expected output: Array ["somestring", 42, false]

9. Pasa controladores de eventos y otras funciones como props a componentes hijos:

<button onClick={this.handleClick}>
10. Los componentes con estado son aquellos que almacenan datos de manera local al
componente. Estos datos pueden variar variar a lo largo del tiempo bajo diversas
circunstancias, por ejemplo, por la interacción del usuario con el componente.
Un ejemplo de componente con estado podría ser un contador. Ese contador puede
incrementarse o decrementarse. Incluso podrían pasarnos como propiedad el valor
inicial del contador, pero el valor actual de la cuenta lo guardaremos en el estado.
Ej:
import React from 'react'

export default class Contador extends React.Component {

constructor(...args) {
super(...args)
this.state = {
contador: 0
}
}

render() {
return (
<div>Cuenta actual: {this.state.contador}</div>
)
}
}
11. Este es el link de la documentación oficial de react navigation:
https://reactnavigation.org/docs/getting-started/

12.
 Para instalar se requiere el siguiente código en la terminal:
npm install @react-navigation/native
 Para usar el navegador de pila, necesitamos instalar @react-navigation/stack:
npm install @react-navigation/stack
Toda la configuración de la ruta se especifica como accesorios para nuestro
navegador. No hemos pasado ningún accesorio a nuestro navegador, por lo que solo
usa la configuración predeterminada.
Agreguemos una segunda pantalla a nuestro navegador de pila y configuremos
la Homepantalla para renderizar primero:

function DetailsScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent:
'center' }}>
<Text>Details Screen</Text>
</View>
);
}

const Stack = createStackNavigator();

function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
Ahora nuestra pila tiene dos rutas , una Homeruta y una Detailsruta. Se puede
especificar una ruta utilizando el Screencomponente. El Screencomponente acepta
un nameaccesorio que corresponde al nombre de la ruta que usaremos para navegar, y
un componentaccesorio que corresponde al componente que renderizará.

Aquí, la Homeruta corresponde al HomeScreencomponente y la Detailsruta

corresponde al DetailsScreencomponente. La ruta inicial de la pila es la Homeruta. 

13. React Native Elements es un Kit de herramientas de interfaz de usuario nativa

de React multiplataforma.
El objetivo de React Native Elements es proporcionar un kit de interfaz de
usuario todo en uno para crear aplicaciones en react native. Hay muchos
componentes de interfaz de usuario excelentes creados por desarrolladores en
todo el código abierto. React Native Elements se toma la molestia de ensamblar
estos paquetes al brindarle un kit listo para usar con api y apariencia
consistentes.
Los mas conocidos son:
 Avatar
 Insignia
 Bajera
 Botón
 ButtonGroup
 Tarjeta
 Caja
 Divisor
 Encabezamiento
 Encabezados de estilo HTML
 Icono
 Imagen
 Entrada
 ListItem
 Cubrir
 Precios
 Clasificación
 Barra de búsqueda
 Deslizador
 Iconos sociales / Botones de iconos sociales
 Loseta
 Descripción emergente
14. Un servicio es como un componente de una aplicación que puede realizar operaciones
de larga ejecución en segundo plano y que no proporciona una interfaz de usuario
Una tarea es una función asíncrona en la que se registra AppRegistry, similar al registro de
aplicaciones React:
import { AppRegistry } from 'react-native';
AppRegistry.registerHeadlessTask('SomeTaskName', () =>
require('SomeTaskName')
);

Luego, en SomeTaskName.js:
module.exports = async (taskData) => {
// do stuff
};
Sí, esto todavía requiere algo de código nativo, pero es bastante delgado. Necesita
extender HeadlessJsTaskServicey anular getTaskConfig, por ejemplo:
package com.your_application_name;
import android.content.Intent;
import android.os.Bundle;
import com.facebook.react.HeadlessJsTaskService;
import com.facebook.react.bridge.Arguments;
import com.facebook.react.jstasks.HeadlessJsTaskConfig;
import javax.annotation.Nullable;

public class MyTaskService extends HeadlessJsTaskService {

@Override
protected @Nullable HeadlessJsTaskConfig getTaskConfig(Intent intent) {
Bundle extras = intent.getExtras();
if (extras != null) {
return new HeadlessJsTaskConfig(
"SomeTaskName",
Arguments.fromBundle(extras),
 5000, // timeout for the task
false // optional: defines whether or not the task is allowed in foreground. Default is false
);
}
return null;
}
}
Luego agregue el servicio a su AndroidManifest.xmlarchivo:
<service android:name="com.example.MyTaskService" />
Ahora, siempre que inicie su servicio , por ejemplo, como una tarea periódica o en
respuesta a algún evento / transmisión del sistema, JS girará, ejecutará su tarea y luego se
detendrá.
Ejemplo:
Intent service = new Intent(getApplicationContext(), MyTaskService.class);
Bundle bundle = new Bundle();

bundle.putString("foo", "bar");
service.putExtras(bundle);

getApplicationContext().startService(service);

15. Antes de nada lo que vamos a hacer va a ser renombrar de content a body allí dónde se
haga referencia, porque en la API que vamos a utilizar, la variable que tiene el
contenido del post se llama body en vez de content.

1 // src/components/PostItem.js
2 ...
3         <p>{this.props.post.body}</p>
4 ...
5  
6     body: PropTypes.string.isRequired
7 ...
8  
9  
10 // src/components/PostForm.js
11 ...
12           <label htmlFor="body">Content</label>
13           <textarea id="body" />
14 ...

De momento solamente eso, porque en el componente PostList.js lo cambiaremos ahora.

Ahora, vamos hacer el listado. Para ello, debemos tener un estado ( state) para guardar los
posts (ya lo tenemos de las entradas anteriores) y vamos a utilizar un método del ciclo de vida
de un componente para que cuando cargue el componente nos haga una llamada a la API y
nos rellene el estado con los posts.

1 class PostList extends React.Component {

2   state = {
3     posts: []
4   };
5  
6   componentDidMount() {
7     fetch("https://jsonplaceholder.typicode.com/posts")
8       .then(response => response.json())
9       .then(posts => this.setState({ posts }));
10   }
11   ...
12 }

Con esto, si arrancas el servidor ( npm run start ) ya deberías ver los posts que nos devuelve
la API.

Por cierto, la API que estamos utilizando es JSONPlanceholder que es una herramienta

gratuita y open source creada con JSON Server por el mismo autor que Hotel que sirve para
crear endpoints falsos para pruebas. Al ser open source, si quieres la puedes instalar en tu
local. Yo voy a utilizar la opción online, no lo voy a instalar en mi local. Tiene una cosa
interesante y es que cuando haces peticiones a la API que van a modificar el
contenido, realmente no lo modifica, pero te devuelve como si lo hubiera modificado.

Ya tenemos el listado adaptado, ahora vamos a adaptar el formulario de creación de posts:

1 ...
2   handleSubmit = event => {
3     event.preventDefault();
4     const lastPost = this.state.posts.slice(-1).pop();
5     let newPostObj = {
6       id: lastPost ? lastPost.id + 1 : 0,
7       title: event.target.title.value,
8       body: event.target.body.value
9     };
10  
11     fetch("https://jsonplaceholder.typicode.com/posts", {
12       method: "POST",
13       body: JSON.stringify(newPostObj),
14       headers: {
15         "Content-type": "application/json; charset=UTF-8"
16       }
17     })
18       .then(response => response.json())
19       .then(newPost => {
20         const posts = [...this.state.posts, newPost];
21         this.setState({ posts: posts });
22       });
23   };
24 ...

Básicamente, lo que se hace es crear el objeto del nuevo posts, se envía a la API mediante
POST y si la respuesta es correcta se añade al listado de posts.

Y, por último, solamente queda eliminar:

1 ...
2   handleDelete = postToDelete => {
3     fetch(`https://jsonplaceholder.typicode.com/posts/${postToDelete.id}`, {
4       method: "DELETE"
5     }).then(response => {
6       let posts = this.state.posts.filter(post => post.id !== postToDelete.id);
7       this.setState({ posts: posts });
8     });
9   };
10 ...

Se pasa por parámetro en la URL el id del post que queremos eliminar y si la respuesta
es correcta, se elimina del array de posts.

16. Este componente es un contenedor de vistas que queremos mostrar en una

pantalla de navegación. Está diseñado para reproducirse solo como un hijo
directo de ScreenContainer. Además de los accesorios simples de React
Native View, este componente solo acepta una propiedad adicional
llamada active. Cuando activese establece en 0, el contenedor principal
separará sus vistas de la jerarquía de vistas nativas. De lo contrario, las
vistas se adjuntarán siempre que el contenedor principal también esté
adjunto.
Ejemplo:

< ScreenContainer >

  < Pantalla > { tab1 } < / Pantalla >

  < Pantalla activa = { 1 } > { tab2 } < / Pantalla >

  < Pantalla > { tab3 } < / Pantalla >

< / ScreenContainer >

17. Para definir las diferentes rutas de nuestra aplicación, podemos usar el

componente Route. La función de este componente es elegir que renderizar según la

locación actual. Este es el caso que vimos anteriormente, todos los

componentes Route siempre renderizan, pero algunas veces renderizan un componente y

otras veces retornan null.

import React, { Component } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';export default class App
extends Component {
render() {
 return (
<BrowserRouter>
<Switch>
<Route path='/' exact />
<Route path='/index' exact />
<Route path='/post/:id' />
</Switch>
</BrowserRouter>
);
}
}