youneshenniwrites / ReactNativeAuth

Mobile user authentication flow with React Native, Expo, and AWS Amplify: Sign In, Sign Up, Confirm Sign Up, Forget Password, Reset Password.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Navigation has changed. I adjusted App.js .

SeanRenet opened this issue · comments

`import React from 'react';
import { View, TouchableOpacity } from 'react-native';

import {
createSwitchNavigator,
createAppContainer
} from 'react-navigation';
import { createMaterialTopTabNavigator } from 'react-navigation-tabs';
import { createStackNavigator } from 'react-navigation-stack';
import { createDrawerNavigator } from 'react-navigation-drawer';
import { Ionicons } from '@expo/vector-icons';

// Auth stack screen imports
import AuthLoadingScreen from './src/components/screens/AuthLoadingScreen';
import WelcomeScreen from './src/components/screens/WelcomeScreen';
import SignUpScreen from './src/components/screens/SignUpScreen';
import SignInScreen from './src/components/screens/SignInScreen';
import ForgetPasswordScreen from './src/components/screens/ForgetPasswordScreen';

// App stack screen imports
import HomeScreen from './src/components/screens/HomeScreen';
import SettingsScreen from './src/components/screens/SettingsScreen';
import ProfileScreen from './src/components/screens/ProfileScreen';

// Amplify imports and config
import Amplify from '@aws-amplify/core';
import config from './src/aws-exports';
Amplify.configure(config);

// Configurations and options for the AppTabNavigator
const configurations = {
Home: {
screen: HomeScreen,
navigationOptions: {
tabBarLabel: 'Home',
tabBarIcon: ({ tintColor }) => (
<Ionicons style={{fontSize: 26, color: tintColor}} name="ios-home" />
)
}
},
Profile: {
screen: ProfileScreen,
navigationOptions: {
tabBarLabel: 'Profile',
tabBarIcon: ({tintColor}) => (
<Ionicons style={{fontSize: 26, color: tintColor}} name="ios-person" />
)
}
},
Settings: {
screen: SettingsScreen,
navigationOptions: {
tabBarLabel: 'Settings',
tabBarIcon: ({ tintColor }) => (
<Ionicons style={{fontSize: 26, color: tintColor}} name="ios-settings" />
)
}
},
}

const options = {
tabBarPosition: 'bottom',
swipeEnabled: true,
animationEnabled: true,
navigationOptions: {
tabBarVisible: true
},
tabBarOptions: {
showLabel: true,
activeTintColor: '#fff',
inactiveTintColor: '#fff9',
style: {
backgroundColor: '#f16f69',
},
labelStyle: {
fontSize: 12,
fontWeight: 'bold',
marginBottom: 12,
marginTop:12,
},
indicatorStyle: {
height: 0,
},
showIcon: true,
}
}

// Bottom App tabs
const AppTabNavigator = createMaterialTopTabNavigator(configurations, options)

// Making the common header title dynamic in AppTabNavigator
AppTabNavigator.navigationOptions = ({ navigation }) => {
let { routeName } = navigation.state.routes[navigation.state.index]
let headerTitle = routeName
return {
headerTitle,
}
}

const AppStackNavigator = createStackNavigator({
Header: {
screen: AppTabNavigator,
// Set the header icon
navigationOptions: ({navigation}) => ({
headerLeft: (
<TouchableOpacity onPress={() => navigation.toggleDrawer()}>
<View style={{paddingHorizontal: 10}}>



)
})
}
})

// App stack for the drawer
const AppDrawerNavigator = createDrawerNavigator({
Tabs: AppStackNavigator, // defined above
Home: HomeScreen,
Profile: ProfileScreen,
Settings: SettingsScreen
})

// Auth stack
const AuthStackNavigator = createStackNavigator({
Welcome: {
screen: WelcomeScreen,
navigationOptions: () => ({
title: Welcome to this App, // for the header screen
headerBackTitle: 'Back'
}),
},
SignUp: {
screen: SignUpScreen,
navigationOptions: () => ({
title: Create a new account,
}),
},
SignIn: {
screen: SignInScreen,
navigationOptions: () => ({
title: Log in to your account,
}),
},
ForgetPassword: {
screen: ForgetPasswordScreen,
navigationOptions: () => ({
title: Create a new password,
}),
},
})

const SwitchNavigator = createSwitchNavigator({
Authloading: AuthLoadingScreen,
Auth: AuthStackNavigator, // the Auth stack
App: AppDrawerNavigator, // the App stack
})
export default createAppContainer(SwitchNavigator);`

@SeanRenet I submitted a PR to fix this issue.