Añadir Top Tap Navigation usando React Native

Tiempo de lectura: < 1 minuto

Si queremos añadir un TopTapNavigation usando React Native para que el resultado quede como en esta imagen:

Primero tenemos que instalar la dependencia necesaria (recuerda instalar antes React-Navigation):

npm install npm install @react-navigation/material-top-tabs react-native-tab-view --save

Una vez instalada se utiliza de la misma forma que un BottomTapNavigation:

//Importamos las librerías
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

Ahora creamos la instancia para los Tabs

const Tab = createMaterialTopTabNavigator();

Ahora añadimos el árbol de navegación y el NavigationContainer dónde se mostrará cada Screen (recuerda que tienes que importar las screens que deseas utilizar para añadirlas dentro de la variable component={}

  <NavigationContainer >
                    <Tab.Navigator initialRouteName="Vídeos">
                        <Tab.Screen name="Vídeos" component={ListaVideos} options={{ headerShown: false }}  />
                        <Tab.Screen name="Foro" component={ListaForo} options={{ headerShown: false }}  />
                        <Tab.Screen name="Quiz" component={Quiz} options={{ headerShown: false }} />
                    </Tab.Navigator>
                </NavigationContainer>

El código completo montado quedaría así:

//Importamos las librerías
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Tab = createMaterialTopTabNavigator();

//Importamos las pantallas:
import ListaVideos from '../screens/ListaVideos';
import ListaForo from '../screens/ListaForo';
import Quiz from '../screens/Quiz';


//Componente boton
const View = () => {

  
    return (
        <View >
                <NavigationContainer independent={true} >
                    <Tab.Navigator initialRouteName="Vídeos">
                        <Tab.Screen name="Vídeos" component={ListaVideos} options={{ headerShown: false }}  />
                        <Tab.Screen name="Foro" component={ListaForo} options={{ headerShown: false }}  />
                        <Tab.Screen name="Quiz" component={Quiz} options={{ headerShown: false }}  />
                    </Tab.Navigator>
        </View>
    )
};