hi , i am new in expo react native
i make a expo navigation with tab or drawer but in have a problem
my sdk v : 3.21.3
platform : android
at first install all package in order
1:npm install -g expo-cli
2:expo init my-project
for navigation
1: npm install @react-navigation/native @react-navigation/stack
2: expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
3: npm install @react-navigation/bottom-tabs
4: npm install @react-navigation/drawer
after then start : npm start but when change my code to this i get error
my code this
import React from 'react';
import 'react-native-gesture-handler';
import { StyleSheet, Text, View } from 'react-native';
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { NavigationContainer } from "@react-navigation/native";
import { createDrawerNavigator } from "@react-navigation/drawer";
function HomeScreen(){
return(
<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
<Text>Home</Text>
</View>
)
}
function SettingsScreen(){
return(
<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
<Text>Settings</Text>
</View>
)
}
const Tab=createBottomTabNavigator();
const drawer =createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen}/>
<Tab.Screen name="Settings" component={SettingsScreen}/>
</Tab.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
please help me i try two days to solve this error
i can’t
It’s been awhile since I was picking a bottom tabs package, but I do remember, it took a bit to find one that I could get working.
I ended up going with:
import { createMaterialBottomTabNavigator } from ‘@react-navigation/material-bottom-tabs’;
You should be able to use that import and things work fine. I’m not seeing anything wrong with your code. Let me know if that helps.
hi,
don’t work with materialtabnavigation
please help me!
this is my package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@react-native-community/masked-view": "0.1.6",
"@react-navigation/bottom-tabs": "^5.5.1",
"@react-navigation/drawer": "^5.8.1",
"@react-navigation/material-bottom-tabs": "^5.2.9",
"@react-navigation/native": "^5.1.5",
"@react-navigation/stack": "^5.2.10",
"expo": "~37.0.3",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
"react-native-gesture-handler": "~1.6.0",
"react-native-paper": "^3.10.1",
"react-native-reanimated": "~1.7.0",
"react-native-safe-area-context": "0.7.3",
"react-native-screens": "~2.2.0",
"react-native-web": "~0.11.7"
},
"devDependencies": {
"babel-preset-expo": "~8.1.0",
"@babel/core": "^7.8.6"
},
"private": true
}
function HomeScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home</Text>
</View>
);
}
function SettingsScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings</Text>
</View>
);
}
const Tab = createMaterialBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}
This code snippet worked for me using react-native sdk-36.0 and slightly older dependencies
hi
i use this way , and it works. use ready template
system
Closed
6
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.