How to make a bottomtabnavigator in react-native?

Question

i have been trying to make a BottomTabNavigator for my app but has been unable to do so. Kindly help me in identifying error in the code.

This is the code written in App.js

import * as React from 'react';

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

import mapscreen from './screens/MapScreen';
import groupscreen from './screens/GroupScreen';


import { NavigationContainer } from '@react-navigation/native';

const Tab = createBottomTabNavigator();

export default () => (
         <NavigationContainer>
         
    <Tab.Navigator>

      <Tab.Screen name="map" component={mapscreen}/>

      <Tab.Screen name="group" component={groupscreen} />

      
    </Tab.Navigator>
         </NavigationContainer>
       );

This the code written in MapScreen.js

import * as React from 'react';
import { View, Text,StyleSheet} from 'react-native';

export const mapscreen = () => {

    <View style = {styles.container}>
    <Text>
        Map will exist here!!
    </Text>
    </View>
};



const styles = StyleSheet.create({
    container: {
      flex: 1, 
      alignItems: 'center', 
      justifyContent: 'center',
      

    },
  });

This is the code written in GroupScreen.js

import * as React from 'react';
import { View, Text,StyleSheet} from 'react-native';

export const groupscreen = () => {

    <View style = {styles.container}>
    <Text>
        group exist here!!
    </Text>
    </View>
};


const styles = StyleSheet.create({
    container: {
      flex: 1, 
      alignItems: 'center', 
      justifyContent: 'center',

    },
  });

Answer 1

Working App: Expo Snack

There were few syntactical errors, other than that everything was fine.

//App.js
import * as React from 'react';

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

import MapsScreen from './screens/MapsScreen';
import GroupScreen from './screens/GroupScreen';

import { NavigationContainer } from '@react-navigation/native';

const Tab = createBottomTabNavigator();

export default App=() => (
  <NavigationContainer>
    <Tab.Navigator>
      <Tab.Screen name="Map" component={MapsScreen} />
      <Tab.Screen name="Group" component={GroupScreen} />
    </Tab.Navigator>
  </NavigationContainer>
);

//MapsScreen.js
import * as React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default  MapsScreen = ({navigation}) => {
  return <View style={styles.container}>
    <Text>Map will exist here!!</Text>
  </View>;
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

//GroupScreen.js
import * as React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default GroupScreen = ({navigation}) => {
  return <View style={styles.container}>
    <Text>group exist here!!</Text>
  </View>;
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});