I am new to react native and as part of my learning i decided to create a instagram clone.
The issue i am facing is that my bottomnavigator isnt wokring. I tried setting tabBarPosition=”bottom” and still didnt work.
import { createBottomTabNavigator } from “@react-navigation/bottom-tabs”
import ProfilePage from ‘../screen/ProfilePage’
import ReelsPage from ‘../screen/ReelsPage’
import RecommendationsPage from ‘../screen/RecommendationsPage’
import { View, Image, Text } from “react-native”
const Tab = createBottomTabNavigator();
const BottomNavigation = () => {
return (
<Tab.Navigator tabBarPosition=”bottom”>
<Tab.Screen name=” ” component={RecommendationsPage}
options={{
tabBarIcon: ({ focused }) => (
<Image source={require(‘../../assets/Images/home.png’)} style={{
height: 30,
width: 30,
marginTop: “10%”
}} />
)
}} />
<Tab.Screen name=” ” component={ReelsPage} options={{
tabBarIcon: ({ focused }) => (
<Image source={require(‘../../assets/Images/compass.png’)} style={{
height: 30,
width: 30,
marginTop: “10%”
}} />
)
}} />
<Tab.Screen name=” ” component={ProfilePage}
options={{
tabBarIcon: ({ focused }) => (
<Image source={require(‘../../assets/Images/user.png’)} style={{
height: 30,
width: 30,
marginTop: “10%”
}} />
)
}} />
</Tab.Navigator >
)
}
export default BottomNavigation
this is the code of reference
solution to the above problem
Joe is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.