Añade fuentes en iOS y Android con React-native – modo fáci

OS muestro la forma más sencilla para hacer que React-nativo sea capaz de instalar nuestras fuentes dentro de los proyectos de forma automática en aplicaciones iOS y Android.

  1. Primer paso

Elige una carpeta dentro de tu proyecto y copia ahí las fuentes, en nuestro caso
vamos a usar el directorio ./src/assets/fonts/

  1. Paso segundo

añade este trozo de código dentro de tu proyecto, en el archivo de configuración en la raíz del proyecto package.json:

  "rnpm": {
    "assets": ["./src/assets/fonts"]
  },

solo tienes que reemplazar tu directorio por ./src/assets/fonts.

  1. Paso final

corre el siguiente comando en tu terminal.

$ react-native link

Ahora, cada vez que quieras instalar una fuente en tu aplicación móvil, solo tienes que dejar caer la fuente y correr el último comando, i voailá ya puedes usar la fuente.

Pro Tip: Cada vez que corres el comando react-native link deberas recompliar el proyecto para que carge las nuevas librerías.

Configurar Atom para React-native y flow

1) Instalar Atom

Descarga la ultima versión de Atom desde la página oficial, Si usas mac y tienes Hombrew y Cas, puedes instalaro con el siguente comando:

$ brew cask install atom
2) Instalar Nuclide para Atom

Nuclide es un conjunto de herramientas de código abierto perfecto para trabajar con React.

Busca el plugin en el buscador de paquetes en las preferencias de atom o usando el siguente comando:

$ apm install nuclide
3) Configuramos nuclide

Abre Atom,
Busca “Ajustes > Paquetes instalados” o con el shortcut CMD + SHIFT + P y busca “paquetes instalados”:

Busca “Nuclide” y dale a “Ajustes”:

Busca la opción “Instalar paquetes recomendados al arrancar”, la activamos.

En la sección de “Nuclide-flow” activa la opción de usar flow de manera local en cada proyecto, esto requerira que instales flow-bin en cada proyecto de React, es lo que nos recomiendan hacer la gente de facebook.

4) Instalar Prettier para Atom

Prettier es tu mejor amigo, se encarga de hacer que tu código sea bonito y agradable de leer. Además es capaz de seguir una reglas que tu le marques en los archivos de configuración que tengas.
Para instalarlo desde la ventana de comandos:

$ apm install prettier-atom
5) Configuramos Prettier

Como en la sección anterior, buscamos el plugin instalado y nos vamos a editar sus preferencias:

Tenemos que asegurarnos que la opción de “Integrarse con ESlint” esté activada.

Reiniciamos Atom.

6) Listos!

Ya estamos lístos para trabajar como máquinas con un monton de herramientas creadas por los creadores de React.

— Así nos queda una instalación limpia con todos los plugins instalados —

Asi quedarían los paquetes instalados

Es hora de programar con mucho @flow.