How to make a bottomtabnavigator in react-native? - 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',
},
});