Instalando React Navigation

• React native
• 09-04-2019

¿Que es react navigation?

React Navigation es una dependencia que podemos agregar a nuestros proyectos que usen react native, que nos permite escribir en javascript, componentes que ayuden al usuario en la nevagcion dentro de la app

Es muy facil de instalar, nos permite ocupar elementos como los tabs, drawer o stack navigators

Para instalarlo (tomando en cuenta que tenga yarn) deben agregarlo asi:

yarn add react-navigation

Luego instalar el react-native-gesture-handler, que nos permitira ocupar gestos como arrastrar el dedo en la pantalla

yarn add react-native-gesture-handler

Linkeamos las dependencias con

react-native link react-native-gesture-handler

Para finalizar la integración en Android, necesitamos editar el archivo MainActivity.java 

Agregando los siguientes imports

import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

Y agregando la siguiente funcion en la clase principal

@Override
protected ReactActivityDelegate createReactActivityDelegate() {
  return new ReactActivityDelegate(this, getMainComponentName()) {
    @Override
    protected ReactRootView createRootView() {
     return new RNGestureHandlerEnabledRootView(MainActivity.this);
    }
  };
}

Con eso ya hemos instalado react navigation.

Como recomendacion para partir, deberían implementar un stack navigation para que empiecen a jugar

import React from "react";
import { View, Text } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen
  }
});

export default createAppContainer(AppNavigator);