Complex Navigation with Guest Access using React Navigation

tutorials/complex-react-nav-with-guest-access/.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": ["babel-preset-expo"],
+  "env": {
+    "development": {
+      "plugins": ["transform-react-jsx-source"]
+    }
+  }
+}

tutorials/complex-react-nav-with-guest-access/.expo/packager-info.json

@@ -1,3 +1,9 @@
 {
-  "expoServerPort": null
+  "devToolsPort": 19002,
+  "expoServerPort": 19000,
+  "packagerPort": 19001,
+  "packagerPid": 31613,
+  "expoServerNgrokUrl": "https://ub-jxc.mybetterjourney.complex-react-nav-with-guest-access.exp.direct",
+  "packagerNgrokUrl": "https://packager.ub-jxc.mybetterjourney.complex-react-nav-with-guest-access.exp.direct",
+  "ngrokPid": 31641
 }

tutorials/complex-react-nav-with-guest-access/.gitignore

@@ -0,0 +1,3 @@
+node_modules/**/*
+.expo/*
+npm-debug.*

tutorials/complex-react-nav-with-guest-access/.watchmanconfig

@@ -0,0 +1 @@
+{}

tutorials/complex-react-nav-with-guest-access/App.js

@@ -0,0 +1,3 @@
+import App from './src';
+
+export default App;

tutorials/complex-react-nav-with-guest-access/app.json

@@ -0,0 +1,27 @@
+{
+  "expo": {
+    "name": "complex-react-nav-with-guest-access",
+    "description": "This project is really great.",
+    "slug": "complex-react-nav-with-guest-access",
+    "privacy": "public",
+    "sdkVersion": "30.0.0",
+    "platforms": ["ios", "android"],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

tutorials/complex-react-nav-with-guest-access/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "empty-project-template",
+  "main": "node_modules/expo/AppEntry.js",
+  "private": true,
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "expo": "^30.0.1",
+    "react": "16.3.1",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",
+    "react-navigation": "^2.18.0"
+  }
+}

tutorials/complex-react-nav-with-guest-access/src/api/auth.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { AsyncStorage } from 'react-native';
+
+const defaultState = {
+  checkedAuth: false,
+  isLoggedIn: false,
+};
+
+export const AUTH_KEY = 'auth-demo-key';
+
+const AuthContext = React.createContext(defaultState);
+
+export const Consumer = AuthContext.Consumer;
+
+export class Provider extends React.Component {
+  state = defaultState;
+
+  componentDidMount() {
+    AsyncStorage.getItem('authData')
+      .then((state) => {
+        this.setState({
+          ...JSON.parse(state),
+          checkedAuth: true,
+        });
+      });
+  }
+
+  componentDidUpdate() {
+    AsyncStorage.setItem('authData', JSON.stringify({ ...this.state, checkedAuth: false }));
+  }
+
+  createAccount = () => new Promise((resolve) => {
+    this.setState({ isLoggedIn: true, checkedAuth: true }, () => resolve());
+  })
+
+  logIn = () => new Promise((resolve) => {
+    this.setState({ isLoggedIn: true, checkedAuth: true }, () => resolve());
+  });
+
+  logOut = () => new Promise((resolve) => {
+    this.setState({ ...defaultState, checkedAuth: true }, () => resolve());
+  })
+
+  render() {
+    return (
+      <AuthContext.Provider
+        value={{
+          ...this.state,
+          createAccount: this.createAccount,
+          logIn: this.logIn,
+          logOut: this.logOut,
+        }}
+      >
+        {this.props.children}
+      </AuthContext.Provider>
+    );
+  }
+}

tutorials/complex-react-nav-with-guest-access/src/components/Button.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { StyleSheet, TouchableOpacity, Text } from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#007991',
+    marginVertical: 10,
+    marginHorizontal: 15,
+    borderRadius: 3,
+  },
+  containerClear: {
+    backgroundColor: 'transparent',
+    marginVertical: 5,
+  },
+  text: {
+    textAlign: 'center',
+    color: 'rgba(255, 255, 255, 0.9)',
+    fontWeight: '600',
+    fontSize: 16,
+    padding: 15,
+  },
+  textClear: {
+    color: '#007991',
+    paddingVertical: 5,
+  },
+});
+
+class Btn extends React.Component {
+  static defaultProps = {
+    theme: 'default',
+  };
+
+  render() {
+    const { onPress, text, theme } = this.props;
+    const containerStyles = [styles.container];
+    const textStyles = [styles.text];
+
+    if (theme === 'clear') {
+      containerStyles.push(styles.containerClear);
+      textStyles.push(styles.textClear);
+    }
+
+    return (
+      <TouchableOpacity onPress={onPress} style={containerStyles}>
+        <Text style={textStyles}>{text}</Text>
+      </TouchableOpacity>
+    );
+  }
+}
+
+export default Btn;

tutorials/complex-react-nav-with-guest-access/src/components/Input.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import {
+  Text,
+  View,
+  TextInput,
+  StyleSheet,
+} from 'react-native';
+
+const styles = StyleSheet.create({
+  label: {
+    color: '#98989d',
+    paddingHorizontal: 20,
+    marginBottom: 5,
+    marginTop: 10,
+    fontSize: 16,
+  },
+  inputContainer: {
+    backgroundColor: '#fff',
+    paddingHorizontal: 20,
+  },
+  input: {
+    fontSize: 16,
+    paddingVertical: 10,
+  },
+});
+
+class Input extends React.Component {
+  render() {
+    const { label, ...props } = this.props;
+    return (
+      <React.Fragment>
+        <Text style={styles.label}>{label}</Text>
+        <View style={styles.inputContainer}>
+          <TextInput
+            style={styles.input}
+            {...props}
+          />
+        </View>
+      </React.Fragment>
+    );
+  }
+}
+
+export default Input;

tutorials/complex-react-nav-with-guest-access/src/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import {
+  AppTabs,
+  // AuthStack
+} from './router';
+import * as Auth from './api/auth';
+
+class App extends React.Component {
+  render() {
+    return (
+      <Auth.Provider>
+        <AppTabs />
+        {/* <AuthStack /> */}
+      </Auth.Provider>
+    );
+  }
+}
+
+export default App;

tutorials/complex-react-nav-with-guest-access/src/router.js

@@ -0,0 +1,53 @@
+import {
+  createBottomTabNavigator,
+  createStackNavigator,
+} from 'react-navigation';
+
+import Feed from './screens/Feed';
+import Profile from './screens/Profile';
+import SignIn from './screens/SignIn';
+import SignUp from './screens/SignUp';
+
+// Logged In
+const FeedStack = createStackNavigator({
+  Feed: {
+    screen: Feed,
+    navigationOptions: {
+      headerTitle: 'Feed',
+    },
+  },
+});
+
+const ProfileStack = createStackNavigator({
+  Profile: {
+    screen: Profile,
+    navigationOptions: {
+      headerTitle: 'Profile',
+    },
+  },
+});
+
+export const AppTabs = createBottomTabNavigator({
+  Feed: {
+    screen: FeedStack,
+  },
+  Profile: {
+    screen: ProfileStack,
+  },
+});
+
+// Logged Out
+export const AuthStack = createStackNavigator({
+  SignIn: {
+    screen: SignIn,
+    navigationOptions: {
+      headerTitle: 'Sign In',
+    },
+  },
+  SignUp: {
+    screen: SignUp,
+    navigationOptions: {
+      headerTitle: 'Sign Up',
+    },
+  },
+});

tutorials/complex-react-nav-with-guest-access/src/screens/Feed.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import * as Auth from '../api/auth';
+import Button from '../components/Button';
+
+class Feed extends React.Component {
+  handleProtectedAction = () => {
+    alert('authorized users only: protected action');
+  }
+
+  render() {
+    return (
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <Button
+          text="Protected Action"
+          onPress={this.handleProtectedAction}
+        />
+      </View>
+    );
+  }
+}
+
+export default props => (
+  <Auth.Consumer>
+    {() => (
+      <Feed
+        {...props}
+      />
+    )}
+  </Auth.Consumer>
+);

tutorials/complex-react-nav-with-guest-access/src/screens/Loading.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { ActivityIndicator, SafeAreaView } from 'react-native';
+
+import * as Auth from '../api/auth';
+
+class Loading extends React.Component {
+  componentDidMount() {
+    this.handleAuthNav();
+  }
+
+  componentDidUpdate() {
+    this.handleAuthNav();
+  }
+
+  handleAuthNav = () => {
+    const { navigation, isLoggedIn, checkedAuth } = this.props;
+    if (!checkedAuth) return;
+
+    if (isLoggedIn) {
+      navigation.navigate('App');
+    } else {
+      navigation.navigate('LoggedOut');
+    }
+  }
+
+  render() {
+    return (
+      <SafeAreaView style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <ActivityIndicator size="large" />
+      </SafeAreaView>
+    );
+  }
+}
+
+export default props => (
+  <Auth.Consumer>
+    {({ isLoggedIn, checkedAuth }) => (
+      <Loading
+        {...props}
+        isLoggedIn={isLoggedIn}
+        checkedAuth={checkedAuth}
+      />
+    )}
+  </Auth.Consumer>
+);