Skip to content

Commit

Permalink
Refactor drawer navigation
Browse files Browse the repository at this point in the history
  • Loading branch information
kylebarron committed Nov 12, 2019
1 parent dc88cf3 commit 135b418
Show file tree
Hide file tree
Showing 9 changed files with 264 additions and 278 deletions.
31 changes: 11 additions & 20 deletions App.js
Original file line number Diff line number Diff line change
@@ -1,33 +1,24 @@
import React from "react";
import { StyleSheet } from "react-native";
import { Provider as PaperProvider } from "react-native-paper";
import AppContainer from "./navigation/AppNavigator";
import { theme } from "./constants/Theme";
import FontAwesome5 from "react-native-vector-icons/FontAwesome5";

// TODO: Check out how to pass a theme to PaperProvider:
// https://github.com/callstack/react-native-paper-login-template/blob/master/App.tsx
// <Provider theme={theme}>

export default class App extends React.Component {
render() {
return (
<PaperProvider>
<PaperProvider
settings={{
icon: props => <FontAwesome5 name={props.icon} {...props} />
}}
theme={theme}
>
<AppContainer />
</PaperProvider>
);
}
}

const styles = StyleSheet.create({
fab: {
position: "absolute",
margin: 16,
right: 0,
bottom: 0
},
safeAreaViewContainer: {
flex: 1
},
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center"
},
});
23 changes: 23 additions & 0 deletions components/DrawerButton.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import * as React from "react";
import { StyleSheet } from "react-native";
import { FAB } from "react-native-paper";

const DrawerButton = props => (
<FAB
{...props}
style={styles.fab}
small
icon="ellipsis-h"
/>
);

const styles = StyleSheet.create({
fab: {
position: "absolute",
margin: 16,
left: 10,
top: 30
}
});

export default DrawerButton;
11 changes: 11 additions & 0 deletions constants/Theme.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { DefaultTheme } from "react-native-paper";

export const theme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
primary: "#600EE6",
secondary: "#414757",
error: "#f13a59"
}
};
47 changes: 2 additions & 45 deletions navigation/AppNavigator.js
Original file line number Diff line number Diff line change
@@ -1,52 +1,9 @@
import React from 'react';
import {
SafeAreaView,
createAppContainer,
createDrawerNavigator,
} from "react-navigation";
import { ScrollView } from 'react-native';
import { Drawer } from "react-native-paper";

import HomeScreen from "../screens/HomeScreen";
import RoutesScreen from "../screens/RoutesScreen";
import SignInScreen from "../screens/SignInScreen";
import SettingsScreen from '../screens/SettingsScreen';
import MenuDrawerNavigator from './MenuDrawerNavigator.js';

const Menu = createDrawerNavigator(
{
Home: { screen: HomeScreen },
Settings: { screen: SettingsScreen },
SignIn: { screen: SignInScreen },
Routes: { screen: RoutesScreen }
},
{
contentComponent: props => (
<ScrollView>
<SafeAreaView forceInset={{ top: "always", horizontal: "never" }}>
<Drawer.Item
label="Map"
active="true"
onPress={() => props.navigation.navigate("Home")}
/>
<Drawer.Item
label="Settings"
active="true"
onPress={() => props.navigation.navigate("Settings")}
/>
<Drawer.Item
label="SignIn"
active="true"
onPress={() => props.navigation.navigate("SignIn")}
/>
<Drawer.Item
label="Routes"
active="true"
onPress={() => props.navigation.navigate("Routes")}
/>
</SafeAreaView>
</ScrollView>
)
}
);

export default createAppContainer(Menu);
export default createAppContainer(MenuDrawerNavigator);
25 changes: 25 additions & 0 deletions navigation/AuthNavigator.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { createAppContainer, createSwitchNavigator } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";

import HomeScreen from "../screens/HomeScreen"
import SignInScreen from "../screens/SignInScreen"
import AuthLoadingScreen from "../screens/AuthLoadingScreen"

// Implementation of HomeScreen, OtherScreen, SignInScreen, AuthLoadingScreen
// goes here.

const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = createStackNavigator({ SignIn: SignInScreen });

export default createAppContainer(
createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
App: AppStack,
Auth: AuthStack
},
{
initialRouteName: "AuthLoading"
}
)
);
52 changes: 52 additions & 0 deletions navigation/MenuDrawerNavigator.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import React from "react";

import {
SafeAreaView,
createDrawerNavigator
} from "react-navigation";
import { ScrollView } from "react-native";
import { Drawer } from "react-native-paper";

import HomeScreen from "../screens/HomeScreen";
import RoutesScreen from "../screens/RoutesScreen";
import SignInScreen from "../screens/SignInScreen";
import SettingsScreen from "../screens/SettingsScreen";


const MenuDrawerNavigator = createDrawerNavigator(
{
Home: { screen: HomeScreen },
Settings: { screen: SettingsScreen },
SignIn: { screen: SignInScreen },
Routes: { screen: RoutesScreen }
},
{
contentComponent: props => (
<ScrollView>
<SafeAreaView forceInset={{ top: "always", horizontal: "never" }}>
<Drawer.Item
label="Map"
active="true"
onPress={() => props.navigation.navigate("Home")}
/>
<Drawer.Item
label="Settings"
active="true"
onPress={() => props.navigation.navigate("Settings")}
/>
<Drawer.Item
label="Sign In"
active="true"
onPress={() => props.navigation.navigate("SignIn")}
/>
<Drawer.Item
label="Routes"
active="true"
onPress={() => props.navigation.navigate("Routes")}
/>
</SafeAreaView>
</ScrollView>
)
}
);
export default MenuDrawerNavigator;
35 changes: 35 additions & 0 deletions screens/AuthLoadingScreen.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React from "react";
import {
ActivityIndicator,
AsyncStorage,
StatusBar,
StyleSheet,
View
} from "react-native";

class AuthLoadingScreen extends React.Component {
componentDidMount() {
this._bootstrapAsync();
}

// Fetch the token from storage then navigate to our appropriate place
_bootstrapAsync = async () => {
const userToken = await AsyncStorage.getItem("userToken");

// This will switch to the App screen or Auth screen and this loading
// screen will be unmounted and thrown away.
this.props.navigation.navigate(userToken ? "App" : "Auth");
};

// Render any loading content that you like here
render() {
return (
<View>
<ActivityIndicator />
<StatusBar barStyle="default" />
</View>
);
}
}

export default AuthLoadingScreen;
Loading

0 comments on commit 135b418

Please sign in to comment.