React Native tabnavigation in seperate component?

Question

I'm trying to make a RN-app, but I dont want to show the navigation on every screen. For example the registration and login screen shouldn't show the navigation. So I wanted to put the navigation in a component and import that component into the screens that should show it. I'm not sure if that works with navigation but I couldn't find anything saying that it won't work. I could be doing completely wrong.

The component I tried to create:

import React, { Component } from 'react'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

class Navigation extends Component {
    render() {
        <Tab.Navigator>
            <Tab.Screen name="Home" component={}/>
            <Tab.Screen name="Explore" component={}/>
            <Tab.Screen name="Account" component={}/>
        </Tab.Navigator>
    }
}

export default Navigation;

The way I wanted to import the component:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Navigation } from './components';

export default function App() {
  return (
    <View style={styles.container}>
      <Navigation/>
    </View>
  );
}

Answer 1

I ever had the same issue. And this react navigation documentation is very helpful. Please check here https://reactnavigation.org/docs/auth-flow/

If you just want keep the navigation and just need to hide the tab bar please read this one https://reactnavigation.org/docs/hiding-tabbar-in-screens