mobileapp/navigation/MainStackNavigator.js

import 'react-native-gesture-handler';
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { DefaultTheme } from 'react-native-paper'
import Intro from '../screens/Intro';
import Login from '../screens/Login';
import { RegistrationFormProvider } from '../contexts/RegisterContext';
import { MockProvider } from '../contexts/MockContext';
import TabsNavigator from './TabsNavigator';
import RegistrationStackNavigator from './RegistrationStackNavigator';

const MainStack = createStackNavigator();
const theme = {
  ...DefaultTheme,
  colors: {
    primary: '#df3f3f',
    accent: 'white',
  },
}

const MainStackNavigator = () => {
  return(
        <MockProvider><RegistrationFormProvider>
          <MainStack.Navigator screenOptions={{
              headerTransparent: true,
              headerTintColor: 'white',
              headerTitle: ""
            }} initialRouteName="MainTabs">
            <MainStack.Screen name="Intro" component={Intro} />
            <MainStack.Screen name="Login" component={Login} />
            <MainStack.Screen name="Registration" component={RegistrationStackNavigator}/>
            <MainStack.Screen name="MainTabs" component={TabsNavigator} />
          </MainStack.Navigator>
        </RegistrationFormProvider></MockProvider>
  )
}

export default MainStackNavigator;