React Native Navigation: BottomTab Navigator

Como no hay segundo malo, vamos con la segunda parte de la miniserie de React Native Navigation, ahora veremos el tab del fondo o BottomTab Navigator.

Puedes pasarte por el capítulo anterior para ver la instalación de la librería que usaremos y algún detalle importante, Capítulo 1.

Lo primero de todo es la importar el componente que necesitaremos que es el createBottomTabNavigator:

import {createBottomTabNavigator} from 'react-navigation'

Los segundo que haremos es agregar las pantallas que tendrá nuestro tab, usaremos las pantallas del capítulo anterior para no volverlas a crear.

const BottomNavigator=createBottomTabNavigator({
    Page1:{screen:Page1},
    Page2:{screen:Page2},
})

Ahora lo dejaremos un poco mas llamativo agregándole unos iconos a cada tab.

const icons={
    user:require('./image/user.png'),
    userFocused:require('./image/user-focus.png'),
    home:require('./image/home.png'),
    homeFocused:require('./image/home-focus.png'),
}

constBottomNavigator=createBottomTabNavigator({
    Page1:{screen:Page1},
    Page2:{screen:Page2},
},
{
    navigationOptions:({navigation})=>({
        tabBarIcon:({focused})=>{
            const{routeName}=navigation.state
            let icon;
            if(routeName==='Page1') {
                icon=focused?icons.homeFocused:icons.home
            }
            else if(routeName==='Page2') {
                icon=focused?icons.userFocused:icons.user
            }
            return <Image source={icon} style={{width:20,height:20}}/>
        }
    })
})

Como se puede ver en el código de arriba agregamos un navigationOptions, que nos permitirá agregar un tabBarIcon que contendrá las imágenes.
También estamos usando el boolean focused que me indica cual tab está seleccionada, también podemos extraer el routeName del state del navigation que me devolverá el nombre de la pantalla y así poder devolver el ícono respectivo en componente Image.

Como paso final solo le hacemos el render a nuestro componente y estaremos listos.

export default class App extends Component{
    render() {
        return(
            <BottomNavigator/>
        );
    }
}

Acá les dejo el código usado para este ejemplo:

En el próximo capítulo veremos el menú lateral o DrawerNavigator. Acá les dejo el video con el proceso así como también el código en GitHub.