I’m using the React NavigationV6 to create a static app for now.
After setting up my Navigation process like this Im having an issue moving to the Home Screen from the Login and Register Screen. And also the Home screen is not rendering the Bottom Tab which is meant to show icons.
I did it this way
package.json
"@react-native-community/masked-view": "^0.1.11",
"@react-native-masked-view/masked-view": "^0.2.6",
"@react-navigation/bottom-tabs": "^6.0.9",
"@react-navigation/material-bottom-tabs": "^6.0.9",
"@react-navigation/native": "^6.0.6",
"@react-navigation/native-stack": "^6.2.5",
"@react-navigation/stack": "^6.0.11",
"axios": "^0.24.0",
"expo": "~44.0.0",
"expo-status-bar": "~1.2.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-confirmation-code-field": "^7.2.0",
"react-native-gesture-handler": "~2.1.0",
"react-native-paper": "^4.11.2",
"react-native-reanimated": "~2.3.1",
"react-native-safe-area-context": "3.3.2",
"react-native-safe-area-view": "^1.1.1",
"react-native-screens": "~3.10.1",
"react-native-vector-icons": "^9.0.0",
"react-native-web": "0.17.1",
"react-redux": "^7.2.6"
App.js
import React from "react";
import RootNavigation from './src/navigation/RootNavigation';
export default function App() {
return (
<RootNavigation/>
);
}
RootNavigation.js
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { SafeAreaProvider } from "react-native-safe-area-context";
import AuthNavigation from "./AuthNavigation";
const RootNavigation = () => {
return (
<SafeAreaProvider>
<NavigationContainer>
<AuthNavigation />
</NavigationContainer>
</SafeAreaProvider>
);
};
export default RootNavigation;
AuthNavigation.js
import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
// Screens
import Onboarding from "../screens/Auth/Onboarding";
import Login from "../screens/Auth/Login";
import Register from "../screens/Auth/Register";
import VerifyCode from "../screens/Auth/VerifyCode";
import ForgotPassword from "../screens/Auth/ForgotPassword";
import MainTabNavigation from "../navigation/MainTabNavigation";
const Stack = createStackNavigator();
const AuthNavigation = () => {
return (
<Stack.Navigator
screenOptions={{ headerShown: false }}
initialRouteName="Onboarding"
>
<Stack.Screen name="Onboarding" component={Onboarding} />
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="Register" component={Register} />
<Stack.Screen name="VerifyCode" component={VerifyCode} />
<Stack.Screen name="ForgotPassword" component={ForgotPassword} />
<Stack.Screen name="MainTabNavigation" component={MainTabNavigation} />
</Stack.Navigator>
);
};
export default AuthNavigation;
MainTabNavigation.js
import React from "react";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";
import HomeStackNavigation from "../navigation/HomeStackNavigation";
import WalletStackNavigation from "../navigation/WalletStackNavigation";
import HistoryStackNavigation from "../navigation/HistoryStackNavigation";
import ProfileStackNavigation from "../navigation/ProfileStackNavigation";
const Tab = createMaterialBottomTabNavigator();
const MainTabNavigation = () => {
return (
<Tab.Navigator
initialRouteName="Home"
activeColor="#e91e63"
barStyle={{ backgroundColor: "tomato" }}
>
<Tab.Screen
name="Home"
component={HomeStackNavigation}
options={{
tabBarLabel: "Home",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={24} />
),
}}
/>
<Tab.Screen
name="Wallet"
component={WalletStackNavigation}
options={{
tabBarLabel: "Wallet",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={black} size={24} />
),
}}
/>
<Tab.Screen
name="History"
component={HistoryStackNavigation}
options={{
tabBarLabel: "History",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="bell" color={color} size={24} />
),
}}
/>
<Tab.Screen
name="Profile"
component={ProfileStackNavigation}
options={{
tabBarLabel: "Profile",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="account" color={color} size={24} />
),
}}
/>
</Tab.Navigator>
);
};
export default MainTabNavigation;
HomeStackNavigation.js
import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import Home from "../screens/Home/Home";
import Wallet from "../screens/Home/Wallet/Wallet";
import History from "../screens/Home/History/History";
import Profile from "../screens/Home/Profile/Profile";
const HomeStack = createStackNavigator();
const HomeStackNavigation = () => {
return (
<HomeStack.Navigator>
<HomeStack.Screen name="Home" component={Home} />
<HomeStack.Screen name="Wallet" component={Wallet} />
</HomeStack.Navigator>
);
};
export default HomeStackNavigation;
WalletStackNavigation.js
import React from "react";
import { createStackNavigator } from '@react-navigation/stack';
import Wallet from "../screens/Home/Wallet/Wallet";
const WalletStack = createStackNavigator();
const WalletStackNavigation = () => {
return (
<WalletStack.Navigator>
<WalletStack.Screen name="Wallet" component={Wallet} />
</WalletStack.Navigator>
);
};
export default WalletStackNavigation;
Login.js
import React, { useState } from "react";
import {
StyleSheet,
View,
Text,
Image,
TouchableOpacity,
TextInput,
} from "react-native";
const Login = (props) => {
const [email, setEmail] = useState();
const [password, setPassword] = useState();
return (
<View style={styles.container}>
<View style={styles.textContainer}>
<View style={styles.backButtonContainer}>
<TouchableOpacity onPress={() => navigation.goBack()}>
<Image
source={require("../../../assets/images/back-arrow.png")}
style={styles.backButton}
/>
</TouchableOpacity>
</View>
<Text style={styles.text}>Let's sign you in!</Text>
<Text style={styles.textTwo}>Welcome back. You've been missed!</Text>
</View>
<View style={styles.registerFormContainer}>
<View style={styles.textInputContainer}>
<TextInput
style={styles.textInput}
onChangeText={setEmail}
value={email}
placeholder="Email"
/>
</View>
<View style={styles.textInputContainer}>
<TextInput
style={styles.textInput}
onChangeText={setPassword}
value={password}
placeholder="Password"
/>
</View>
<TouchableOpacity style={styles.forgotPasswordButton} onPress={() => navigation.navigate("ForgotPassword")}>
<Text style={styles.forgotPasswordText}>Forgot Password?</Text>
</TouchableOpacity>
<View style={styles.buttonContainer}>
<TouchableOpacity
style={styles.button}
onPress={() => props.navigation.navigate("Home")}
>
<Text style={styles.buttonText}>Login</Text>
</TouchableOpacity>
</View>
<View style={styles.haveAnAccount}>
<Text>
Dont Have an Account?
<Text
style={styles.haveAnAccountText}
onPress={() => props.navigation.navigate("Register")}
>
{" "}
Create One
</Text>
</Text>
</View>
</View>
</View>
);
};
export default Login;
