Navegando dentro de react native con flux

Hola amigos de la #nerdytud.

En el día de hoy, quiero compartirles la forma más sencilla de instalar y utilizar la librería react-native-router-flux para una sólida navegación dentro de nuestra aplicación react native.

Crear aplicación

npx react-app init dummy

cd dummy

Instalar librerias requeridas

npm i @react-navigation/native

npm i react-native-screens 

npm i react-native-safe-area-context

npm i npm install react-native-gesture-handler

npm i react-native-reanimated

npm i @react-native-community/masked-view

Instalar flux

npm i react-native-router-flux

Creando router

Desde el root de la aplicación, crear las siguientes carpetas

Dentro de la carpeta router, crearemos el archivo AppRouter.js

mkdir -p /src/router

import React from 'react';
import { Router, Scene } from 'react-native-router-flux';
import Main from '../pages/Main';
import About from '../pages/About';

const AppRouter = () => {
  return (
    <Router>
      <Scene key="root">
        <Scene key="main" component={Main} title="Main" initial={true} />
        <Scene key="about" component={About} title="About" />
      </Scene>
    </Router>
  );
};

export default AppRouter;

Crear páginas de prueba

mkdir -p /src/pages

import React from 'react';
import { View, Text } from 'react-native';
import { TouchableHighlight } from 'react-native-gesture-handler';
import { Actions } from 'react-native-router-flux';

const Main = () => {
  return (
    <View>
      <Text h3>Main</Text>
      <TouchableHighlight onPress={() => Actions.push('about', '')}>
        <Text>Ir a about</Text>
      </TouchableHighlight>
    </View>
  );
};

export default Main;

Ejecutar aplicación

npm start

npm run android