Cómo crear una app básica con React Native

Uno de mis propósitos para este año era crear un blog, y mientras estaba aprendiendo a crear una app motivacional se me ocurrió que mi primer post fuera sobre su proceso de creación.

Instalando lo básico

Lo primero es instalarse create-react-native-app, una utilidad que han creado desde Facebook para facilitarnos la vida. Es muy sencillo, y nos va a dejar la app funcionando. Sólo tienes que poner en el terminal lo siguiente

$ npm install -g create-react-native-app 
$ create-react-native-app my-app
$ cd my-app/
$ npm start

Eso instalará globalmente el comando create-react-native-app y nos va a permitir crear una nueva app cuando queramos. Las otras líneas son para ejecutar el comando y crear nuestra app básica, entrar en su carpeta, ejecutarla y ¡listos para empezar!

Te recomiendo que si aún no usas yarn, te lo instales, ya que la velocidad en comparación a npm es muuuuuy superior.

Una vez ejecutado el comando start, te debería aparecer algo como esto:

Básicamente, nos enseña un menú con un montón de cosas útiles, como abrir el emulador de iOS/Android, limpiar la caché del packager (que por cierto, he tenido que hacer unas cuantas veces) o cambiar el entorno de desarrollo. En mi caso, la he desarrollado para iOS, pero para Android es exactamente igual. Así que pulsamos ‘i’.

Después de hacer el build de la app básica nos mostrará esto:

¡Bien! Ya tenemos funcionando nuestra app. No era tan difícil ¿no?. Para meterle un poco más de chicha, vamos a hacer una simple petición POST a una API pública sobre citas célebres. Empezaremos editando el archivo App.js.

Creando la petición

Como nuestra API sólo acepta peticiones de tipo form-data, vamos a tener hacerlo de un método ligeramente más tedioso, porque a diferencia del estándar, vamos a tener que añadir uno por uno nuestros atributos del cuerpo de la petición. Entonces, añadimos lo siguiente justo debajo de los imports:

import React from 'react' 
import { StyleSheet, Text, View, ActivityIndicator } from 'react-native'
const formdata = new FormData()
formdata.append('method', 'getQuote')
formdata.append('key', '457653')
formdata.append('format', 'json')
formdata.append('lang', 'en')
...

Eso nos creará la petición que vamos a usar para recuperar una cita aleatoria. Queremos llamar a la API tan pronto como nuestra app se ponga a funcionar, así que ejecutaremos la llamada en el método de React componentDidMount. Por partes quedaría así la declaración:

...
export default class App extends React.Component {
state = {
isLoading: true,
quote: {}
}
getDailyQuote() {     
return fetch('http://api.forismatic.com/api/1.0/', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'multipart/form-data'
},
body: formdata,
})
.then(response => response.json())
.then(data => {
this.setState({
isLoading: false,
quote: data
})
})
.catch(error => console.error(error))
}
...

Y así la llamada al método:

componentDidMount() {     
this.getDailyQuote()
}

Y ya lo tenemos. El siguiente paso es imprimir esa información en la pantalla de nuestro dispositivo. Para ello, vamos a crear un componente que encapsule el contenido, y que nos muestre un loader cuando ejecutamos la app y el contenido cuando lo hayamos recibido.

...
const Content = ({ state }) => {   
if (state.isLoading) {
return (
<View style={styles.container}>
<ActivityIndicator />
</View>
)
} else {
return (
<View style={styles.container}>
<Text style={styles.text}>{state.quote.quoteText}</Text>
<Text style={[styles.text, styles.author]}>— {state.quote.quoteAuthor}
</Text>
</View>
)
}
}
export default class App extends React.Component {
...

Este componente se declara fuera de la clase React, ya que es un componente distinto. Para que te hagas una idea, en React los componentes son funciones que encapsulan otras funciones. En este caso, nuestro componente es stateless, por lo que no podrás acceder al estado desde él, por eso se lo pasamos como atributo.

Dándole estilo

Con esto ya tenemos todo lo que necesitamos para mostrar por pantalla nuestra cita. Lo último que nos queda es añadir los estilos:

...
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#222',
alignItems: 'center',
justifyContent: 'flex-start',
padding: 30,
paddingTop: 50
},
text: {
fontSize: 30,
fontWeight: 'bold',
color: '#fafafa'
},
author: {
marginTop: 20,
alignSelf: 'flex-start'
}
})

React native utiliza Flexbox como método por defecto para posicionar sus elementos. Y las unidades de medida son pt o %. Si no conoces muy bien Flexbox, puedes encontrar una documentación magnífica aquí (en inglés).

Y con esto, ya tenemos lista nuestra primera app en React Native. Aquí está el repositorio de mi app despertador (aún en progreso).

¡Espero que te haya sido de ayuda!