Forem: Embedded Nature

Software Engineering Design Patterns: Model-View-Controllers(MVC)

Embedded Nature — Thu, 16 May 2024 16:21:35 +0000

Understanding the Importance of the MVC Pattern in Your Web Applications

Software engineering patterns are crucial for developing maintainable, scalable, and efficient software systems. As a Staff Engineer and Architect responsible for facilitating scalable, higher-quality code, I understand the vital role of software engineering patterns in developing maintainable and efficient systems. Inspiring new engineers to appreciate and utilize software patterns requires a combination of mentorship, demonstration, and encouragement of a learning mindset.

Have you ever faced challenges in managing a growing web application codebase? Let's explore how the MVC pattern can be a game-changer.

Model-View-Controller (MVC)

The MVC pattern is a highly effective architectural pattern to develop user interfaces. The MVC pattern is straightforward to implement; it breaks your application into three parts: the Model, the View, and the Controller. This pattern makes managing complex applications easier and improves scalability and maintainability.

Components

The Model: Represents the data and the application's business logic. The model is used to manage infrastructure; it consists of classes and methods that interact with a database and APIs.

The View: Presents the data to the user. It handles the user interface, including layout and display. Think of the views as the place to implement your HTML, CSS, or other templating languages for web applications.

The Controller: Manages the interaction between the Model and View components. It handles user input, processes requests, and manages data flow. In web development, the controller usually maps to specific routes or endpoints and handles network requests.

MVC Benefits

Here are the benefits of using the Model-View-Controller (MVC) design pattern, and where it makes sense to apply this pattern:

MVC is commonly used in web applications, as it cleanly separates concerns. It allows developers to work on different aspects of the application independently.
Improves code organization, making it easier to understand and maintain.
Ease of updating the user interface, as changes can be made to the view layer without affecting the model or controller layers.
MVC is ideal for projects where scalability, maintainability, and code organization are crucial.
Implementing new features is easier without changing the existing codebase.

Wrapping Up🎉

MVC is just one of many architectural patterns used in software engineering, but it provides an excellent foundation for building maintainable, scalable web applications. When you adopt these patterns into your codebase, it demonstrates to your team that you can work with abstract concepts and build upon them. It also highlights your growth mindset and willingness to challenge conventional practices. These are the qualities that are expected of lead engineers.

🗞️ About WealthMinds.Tech Newsletter
Ready to level up your software engineering and wealth-building game? Subscribe to the WealthMinds.Tech Newsletter for valuable insights and perspectives at the intersection of software engineering and wealth building. Don't miss out on programming insights, wealth-building strategies, and exclusive content designed to empower you on your journey to success. Join our community today and stay ahead of the curve!
Join Now: WealthMinds.Tech
Follow me on X: @embeddednature
🌐 Pioneering Technology | 💰 Building Wealth | 🔥 Igniting Minds

Turn Your Coding Skills into Cash Flow

Embedded Nature — Fri, 10 May 2024 01:49:05 +0000

As a software engineer, you possess a unique opportunity to make a difference in the fast-moving world of technology. Imagine using your skills to solve complex problems and create solutions that generate passive income beyond your regular 9-to-5 job. So why not seize the moment and unlock the true potential of your coding abilities?

The Power of Passive Income
Passive income is the ultimate reward for those who invest time and effort into creating a sustainable income stream. It’s a wise choice that can help you achieve financial stability and allow you to live life on your terms. With passive income, you can take control of your future and enjoy the freedom that comes with it.

Realizing the value of my skills as a software engineer, I was inspired to leverage them to create a portfolio of cash-generating assets. Let me show you how you can do the same.

Leveraging Coding Skills for Passive Income
The skills required for passive income continue to evolve, and each can be considered an income stream. From web development skills like HTML, CSS, and Javascript to mobile app development skills like react native or Flutter. The possibilities are endless! Software testers can use their automation skills to load test systems and find security vulnerabilities in software. Companies like Apple offer bounties for finding bugs.

Other engineering skill sets, like data engineering, are highly sought after for the ETL pipeline, especially with the rise of AI and LLMs. My favorite skillset for passive income is architecture for system design and cloud computing. Additionally, knowledge of artificial intelligence, machine learning, blockchain, and cybersecurity are new trends that are highly sought after and can generate vast amounts of cash flow.

Do you now see how the possibilities are endless?

Earn Money With Your Skills

Web Development: Develop high-quality WordPress themes and sell them on platforms like ThemeForest. You earn a portion of each sale as passive income.
Mobile App Development: Develop mobile apps for iOS and Android and publish them on app stores. Revenue can come from in-app ads or purchases.
Software Testing: Monetize Your Testing Skills by Developing automation testing tools or scripts and selling them to software development teams or on platforms like GitHub Marketplace.
Data Engineering (ETL, AI, ML): Build data-driven products, such as predictive analytics tools, data visualization templates, or data integration solutions, and license or sell them to businesses.
System Design and Cloud Computing (Architecture): Offer cloud architecture consulting services to businesses looking to migrate to the cloud or optimize their cloud infrastructure.
Artificial Intelligence and Machine Learning: Build AI models or machine learning algorithms for specific industries, such as finance or healthcare, and license them for application use.
Blockchain: Develop decentralized applications (DApps) or smart contracts for blockchain platforms and earn royalties or fees.
Cybersecurity: Create cybersecurity tools or scripts for vulnerability assessment, threat monitoring, or incident response and license them to organizations.

Wrapping Up 🎉
Software engineers have a great opportunity to achieve financial independence by generating passive income. Passive income streams have incredible scalability but require time and dedication. It is important to consider options that match your skills and interests. If this story has motivated you to use your coding skills to create sustainable passive income streams, please share it with a friend to help our community grow.

🗞️ About My Newsletter
Ready to level up your software engineering and wealth-building game? Subscribe to my newsletter for valuable insights and perspectives at the intersection of software engineering and wealth building. Don’t miss out on programming insights, wealth-building strategies, and exclusive content designed to empower you on your journey to success. Join our community today and stay ahead of the curve!

Join Now: WealthMinds.Tech

Follow me on X: @embeddednature
🌐 Pioneering Technology | 💰 Building Wealth | 🔥 Igniting Minds

Resources for new JavaScript Software Engineers (2020)

Embedded Nature — Sun, 04 Oct 2020 14:14:11 +0000

Web Communities and Articles

Dev.to is a developer community with a wide variety of experience levels. Learn new tips and tricks, find resources, and discuss concepts about your favorite programming languages.

Medium is a great place for many articles but here are my favorite topics they offer for JavaScript developers

Junior Developer Central offers coding tutorials for people looking to become a Junior Developer.

Managing your code

Docs

As a new web developer the MDN Web docs may become your favorite website. It offers development documentation for web standards and Mozilla projects

MDN Web Docs

Head over to the references page to get hands on explanations to the world of JavaScript with compiled examples.

MDN Web Reference

W3 school has very good online tutorials for beginners, it is free with tons of examples.

W3 School

javaScript Tutorial helps you learn JavaScript programming language from scratch quickly and effectively.

Asking for Help

Stack overflow is a developer community where you can find answers to computer science concepts, or find solutions to debugging problems you face.

Stack Exchange Software Engineering

Discord is your place to talk and hangout, servers have been used by gamers and YouTubers but there are discord servers for software engineers

When you are dealing with issues related to packages you imported, you may find GitHub issues to be helpful

GitHub Issues

Learning Fundamentals

Further your basic understanding of JS

MDN JavaScript Basics

The basics of JS programming starts with expressions and Variables

Intro Functions / Variables, Control Flow, Intermediate Functions

Execute JS Locally, POJO

Callbacks, Scope, JS: Asynchronous Functions

Tania Rascia's Article

Using Node.js

NodeJS

npm

NPM Docs

I also created an intro video for web developers to learn about this.

Git Commands

Git commands cheat sheet

JS Recursion

Recursion

Web Browser Storage

Web Storage

Browser Dev Tools

Browser Basics with JavaScript

Tips & Tricks

This article by Eric Elliott is a nice collection of JS interview questions to test your understanding of JS

10 interview questions every javaScript developer should know

Tania Rascia provides a fundamental understanding of event loops, callbacks, promises and async/await in JS

Article

When you get into CSS this website is a great resource

CSS Tricks

I hope you found this helpful, if you have any questions comment below or reach out to me in my discord server.

Create & Deploy a Lottie Animation React App using Vercel

Embedded Nature — Tue, 05 May 2020 14:00:12 +0000

Overview

With Vercel (Zeit), you can swiftly deploy your static websites in minutes, no configuration required. Simply choose your template, push to Git and your website is live! In this guide we will walk through the process for deploying a react app using Vercel. Our React application will use AirBnb’s Lottie Animations to showcase how easy it is to add animated content to your apps.

Assumptions

You have a basic understanding of React and Git.

Setup

To get started with Vercel you will need to create an account on their website by linking Vercel to your GitHub, GitLab, or BitBucket account.

Once logged in, you can import a project from your repository or use one of Vercel’s optimized framework templates.

We will be using the Create React App Template. Once you’ve chosen your template, you will need to set a project name.

Vercel will automatically create a Git repository for you, so you can update your project easily. Once deployed Vercel will spin up your new application, you will be able to visit your website once the build is finished.

Notice, Vercel provided us with a development, staging, and production domain.

With your website up and running, it’s now time to pull down your repository so we can create some Lottie animations.

git clone the repository Vercel created for us. Inside your local project directory lets install our Lottie animation view for react. npm i react-lottie

Lottie Animations

Lottie animations is a library built by Airbnb to easily add high-quality animations to any native app. The library renders Adobe After Effect animations in real time, so using animations is as easy as static images.

react-lottie will help us abstract some of the calls Lottie-web requires.

In your app.js we can import react-lottie then choose an animation that we want loaded into our application.

react-lottie uses a defaultOptions object that we pass into our Lottie options prop. This will set the animation data and the additional parameters such as looping and autoplay.

 const defaultOptions = {
    loop: true,
    autoplay: true,
    path: props.url,
    rendererSettings: {
        preserveAspectRatio: 'xMidYMid slice',
    },
};

The defaultOptions can either load an animation from a domain using the path: variable or you can import a .json animation file from your project using animationData:.

Displaying a Lottie animation is simple:

<Lottie options={defaultOptions} height={state.height} width={state.width} />

The best place to find Lottie Animations is on the LottieFiles website. They have 100s of animations to choose from, with a free account you can download animations or simply reference them in your projects using the URL. https://lottiefiles.com/

Here is an example Lottie Component using react hooks:

import React, { useState, useEffect } from 'react';
import Lottie from 'react-lottie';

const LottieComponent = (props) => {
    const initState = { url: '', heigth: 100, width: 100 };
    const [state, setLottieSate] = useState(initState);

    const defaultOptions = {
        loop: true,
        autoplay: true,
        path: props.url,
        rendererSettings: {
            preserveAspectRatio: 'xMidYMid slice',
        },
    };

    useEffect(() => {
        setLottieSate({
            url: props.url,
            name: props.name,
            height: props.height,
            width: props.width,
        });
    }, [props.url]);
    return (
        <div className={'lottie-container'}>
            <h3>{state.name}</h3>
            <Lottie options={defaultOptions} height={state.height} width={state.width} />
        </div>
    );
};

export default LottieComponent;

Deploying your App

You can deploy your application using a simple command, now.

Now is Vercel’s command-line interface (CLI) which enables instant cloud deployment.

To install now: npm i -g now.

Once installed, in your terminal run the command now. This will queue up your build to the server.

If we head over to the Vercel dashboard we can see our build Logs. Once complete we can visit the site to see our changes.

Deploy to Production

With Vercel it is easy to push your build out to production. Simply merge your current branch into the master branch, this will trigger a release build in the Vercel Pipeline.

Wrap Up 🎉

Just like that we were able to spin up a create react app, and showcase the power of Lottie animations in your iOS, Web, and Android apps. Vercel makes it easy to create proof of concepts on the fly, not only that, it enables developers to build an app, capture feedback in lower environments, then push the build out to production.

Vercel has many templates to choose from and includes many other features, I encourage you to check them out.

I hope you found this guide helpful, how will you use Vercel to speedup your development process?
References

Lottie Documents: https://airbnb.io/lottie/#/web
My Repository: https://github.com/ICeZer0/create-react-app
YouTube Video example: https://youtu.be/3K0sfRJgAjI

Twitter | Instagram

Create an Authorization Flow with React-Navigation 5.x

Embedded Nature — Sat, 11 Apr 2020 21:45:13 +0000

Overview

React navigation is one of the go to libraries to help build fluid react-native screens. Its easy to setup and is completely customizable. React-navigation allows you to build different types of navigators like top and bottom tabs, and side drawers. React Navigation 5.0 brings with it many additions to the library, such as dynamic screens and support for the latest react features like hooks.

In this guide, we will walk through how to build an authorization flow for your react-native app.

Assumptions

I wont' go through basic react-native setup, I'm assuming you have a hello-world app running and want to use react-navigation.

Note: I have ejected expo but this shouldn't affect you.

Setup

Lets start by installing react-navigation 5.0 core dependencies into your react-native application

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

next we will need to install indicative and react-native-elements

npm i indicative react-native-elements

Ensure your package.json have dependencies below:

"@react-navigation/stack": "5.1.0",
"@react-navigation/drawer": "^5.1.0",
"react-native-elements": "1.2.7",
"indicative": "^7.4.4",

Screens

The signUp & signIn screens will use indicative for input validation, and react-native-elements to build the screens.

The screens leverage useContext to get state from the app.js createContext, this will pass data around our application to decide which screen the user should be on.

The screens will need to validate users email format and password lengths, this is the job of indicative. Once input validation has succeeded, we trigger an authorizing check, before allowing a user to visit the home screen.

here is a snippet of the indicative helper function.

import { validateAll } from 'indicative/validator';

const handleSignUp = () => {
    const rules = {
        email: 'required|email',
        password: 'required|string|min:6|max:40|confirmed'
    };

    const data = {
        email: emailAddress,
        password: password,
        password_confirmation: passwordConfirm
    };

    const messages = {
        required: field => `${field} is required`,
        'username.alpha': 'Username contains unallowed characters',
        'email.email': 'Please enter a valid email address',
        'password.min':
            'Password is too short. Must be greater than 6 characters',
        'password.confirmed': 'Passwords do not match'
    };

    validateAll(data, rules, messages)
        .then(() => {
            console.log('success sign in');
            signUp({ emailAddress, password });
        })
        .catch(err => {
            const formatError = {};
            err.forEach(err => {
                formatError[err.field] = err.message;
            });
            setSignUpErrors(formatError);
        });
};

SignUp Screen

The SignUpScreen displays a few input boxes and a button, it will call the helper function handleSignUp() to validate users input, once they click the sign up button. If the user intended to visit the Sign In screen, we call the singIn context.

We set useEffect to update the screen when an error occurs.

Here is the complete signUpScreen.js,

import React, { useEffect, useState, useContext } from 'react';
import { validateAll } from 'indicative/validator';
import { View, Text } from 'react-native';
import {
    Input,
    Card,
    FormValidationMessage,
    Button
} from 'react-native-elements';

import { AuthContext } from '../../../utils/authContext';

const SignUpScreen = ({ navigation }) => {
    const [emailAddress, setemailAddress] = useState('');
    const [password, setPassword] = useState('');
    const [passwordConfirm, setPasswordConfirm] = useState('');
    const [SignUpErrors, setSignUpErrors] = useState({});

    const { signUp, signIn } = useContext(AuthContext); // should be signUp

    const handleSignUp = () => {
        // https://indicative.adonisjs.com
        const rules = {
            email: 'required|email',
            password: 'required|string|min:6|max:40|confirmed'
        };

        const data = {
            email: emailAddress,
            password: password,
            password_confirmation: passwordConfirm
        };

        const messages = {
            required: field => `${field} is required`,
            'username.alpha': 'Username contains unallowed characters',
            'email.email': 'Please enter a valid email address',
            'password.min':
                'Password is too short. Must be greater than 6 characters',
            'password.confirmed': 'Passwords do not match'
        };

        validateAll(data, rules, messages)
            .then(() => {
                console.log('success sign in');
                signUp({ emailAddress, password });
            })
            .catch(err => {
                const formatError = {};
                err.forEach(err => {
                    formatError[err.field] = err.message;
                });
                setSignUpErrors(formatError);
            });
    };

    useEffect(() => {}, [SignUpErrors]);

    return (
        <View style={{ paddingVertical: 20 }}>
            <Card>
                <Input
                    label={'Email'}
                    placeholder="Email address..."
                    value={emailAddress}
                    onChangeText={setemailAddress}
                    errorStyle={{ color: 'red' }}
                    errorMessage={SignUpErrors ? SignUpErrors.email : null}
                />
                <Input
                    label={'Password'}
                    placeholder="Password.."
                    value={password}
                    onChangeText={setPassword}
                    secureTextEntry
                />
                <Input
                    label={'Password Confirm'}
                    placeholder="Enter password again"
                    value={passwordConfirm}
                    onChangeText={setPasswordConfirm}
                    secureTextEntry
                />
                <Text style={{ color: 'red', marginLeft: 10, fontSize: 10 }}>
                    {SignUpErrors ? SignUpErrors.password : null}
                </Text>

                <Button
                    buttonStyle={{ margin: 10, marginTop: 50 }}
                    backgroundColor="#03A9F4"
                    title="SIGN UP"
                    onPress={() => handleSignUp()}
                />
                <Text style={{ marginLeft: 80 }} onPress={() => signIn()}>
                    Already Signed Up? Sign In
                </Text>
            </Card>
        </View>
    );
};

export default SignUpScreen;

SignIn Screen

The signInScreen is very similar, with the difference being the click message users see to sign up if they don't have an account already. We use context to call singUp, sending an empty payload to our reducer in app.js

Here is the complete signInScreen.js,

import React, { useEffect, useState, useContext } from 'react';
import { validateAll } from 'indicative/validator';
import { View, Text } from 'react-native';
import {
    Input,
    Card,
    FormValidationMessage,
    Button
} from 'react-native-elements';

import { AuthContext } from '../../../utils/authContext';

const SignInScreen = ({ navigation }) => {
    const [emailAddress, setemailAddress] = useState('');
    const [password, setPassword] = useState('');
    const [SignUpErrors, setSignUpErrors] = useState({});

    const { signIn, signUp } = useContext(AuthContext);

    const handleSignIn = () => {
        // https://indicative.adonisjs.com
        const rules = {
            email: 'required|email',
            password: 'required|string|min:6|max:40'
        };

        const data = {
            email: emailAddress,
            password: password
        };

        const messages = {
            required: field => `${field} is required`,
            'username.alpha': 'Username contains unallowed characters',
            'email.email': 'Please enter a valid email address',
            'password.min': 'Wrong Password?'
        };

        validateAll(data, rules, messages)
            .then(() => {
                console.log('success sign in');
                signIn({ emailAddress, password });
            })
            .catch(err => {
                const formatError = {};
                err.forEach(err => {
                    formatError[err.field] = err.message;
                });
                setSignUpErrors(formatError);
            });
    };

    return (
        <View>
            <Card>
                <Input
                    label={'Email'}
                    placeholder="Email"
                    value={emailAddress}
                    onChangeText={setemailAddress}
                    errorStyle={{ color: 'red' }}
                    errorMessage={SignUpErrors ? SignUpErrors.email : null}
                />
                <Input
                    placeholder="Password"
                    value={password}
                    onChangeText={setPassword}
                    secureTextEntry
                    errorStyle={{ color: 'red' }}
                    errorMessage={SignUpErrors ? SignUpErrors.password : null}
                />
                <Button
                    buttonStyle={{ margin: 10, marginTop: 50 }}
                    title="Sign in"
                    onPress={() => handleSignIn()}
                />
                <Text style={{ marginLeft: 100 }} onPress={() => signUp()}>
                    No Acount? Sign Up
                </Text>
            </Card>
        </View>
    );
};

export default SignInScreen;

Now with our screens complete we can build our main application to navigate between the screens.

App.js

App.js will leverage some react hook features.

createContext: shares data between components without us needed to pass it down.

const AuthContext = createContext({});

useEffect: fetches the token from storage or presents the signUp screen if none is found.

useEffect(() => {
    // Fetch the token from storage then navigate to our appropriate place
    const bootstrapAsync = async () => {
        let userToken;

        try {
            userToken = await AsyncStorage.getItem('userToken');
        } catch (e) {
            // Restoring token failed
        }
        dispatch({ type: 'RESTORE_TOKEN', token: userToken });
    };
    bootstrapAsync();
}, []);

useMemo: used to memorize our context functions to avoid calling them on every render. UseMemo will only recompute when one of the inputs has changed.

const authContextValue = useMemo(
    () => ({
        signIn: async data => {
            if (
                data &&
                data.emailAddress !== undefined &&
                data.password !== undefined
            ) {
                dispatch({ type: 'SIGN_IN', token: 'Token-For-Now' });
            } else {
                dispatch({ type: 'TO_SIGNIN_PAGE' });
            }
        },
        signOut: async data => {
            dispatch({ type: 'SIGN_OUT' });
        },

        signUp: async data => {
            if (
                data &&
                data.emailAddress !== undefined &&
                data.password !== undefined
            ) {
                dispatch({ type: 'SIGNED_UP', token: 'dummy-auth-token' });
            } else {
                dispatch({ type: 'TO_SIGNUP_PAGE' });
            }
        }
    }),
    []
);

useReducer: handles our complex state logic, setting flags that determine which screen to display.

const [state, dispatch] = useReducer(
    (prevState, action) => {
        switch (action.type) {
            case 'TO_SIGNUP_PAGE':
                return {
                    ...prevState,
                    isLoading: false,
                    isSignedUp: false,
                    noAccount: true
                };
            case 'TO_SIGNIN_PAGE':
                return {
                    ...prevState,
                    isLoading: false,
                    isSignedIn: false,
                    noAccount: false
                };
            case 'RESTORE_TOKEN':
                return {
                    ...prevState,
                    userToken: action.token,
                    isLoading: false
                };
            case 'SIGNED_UP':
                return {
                    ...prevState,
                    isSignedIn: true,
                    isSignedUp: true,
                    isLoading: false,
                    userToken: action.token
                };
            case 'SIGN_IN':
                return {
                    ...prevState,
                    isSignedOut: false,
                    isSignedIn: true,
                    isSignedUp: true,
                    userToken: action.token
                };
            case 'SIGN_OUT':
                return {
                    ...prevState,
                    isSignedOut: true,
                    isSignedIn: false,
                    isSignedUp: true,
                    userToken: null
                };
        }
    },
    {
        isLoading: true,
        isSignedOut: false,
        isSignedUp: false,
        noAccount: false,
        isSignedIn: false,
        userToken: null
    }
);

Using Navigator

Now we can call the react-navigator to build our screens

In your app.js import the navigators and initialize them

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator, DrawerItems } from '@react-navigation/drawer';

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

Home Stack

The homepage will build a stack that has a side drawer component.

Our home screen navigation stack will look like this:

const createHomeStack = () => {
    const { signOut } = useContext(AuthContext);

    return (
        <Stack.Navigator>
            <Stack.Screen
                name="Home Screen"
                component={createDrawer}
                initialParams={{ singOut: signOut }}
            />
        </Stack.Navigator>
    );
};

Here is our side drawer navigator:

const createDrawer = () => {
    const { signOut } = useContext(AuthContext);

    return (
        <Drawer.Navigator>
            <Drawer.Screen
                name="Home Screen"
                component={HomeScreen}
                initialParams={{
                    id: 111,
                    SignOutButton: () => (
                        <Button
                            title="Sign Me out"
                            onPress={signOut}
                            color={styles.signOutBtn.color}
                        />
                    )
                }}
            />
            <Drawer.Screen name="Screen1" component={Screen1} />
            <Drawer.Screen name="Screen2" component={Screen2} />
        </Drawer.Navigator>
    );
};

You will need to build the screen components (HomeScreen, Screen1, Screen2, SplashScreen) and import them into your app.js

Here is a basic example of a screen:

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

const aScreen = () => {
    return (
        <View style={styles.center}>
            <Text style={styles.title}>Screen2 </Text>
        </View>
    );
};

export default aScreen;

To render our Navigators in App.js we need to wrap our screens in a NavigationContainer but to also handle our data sharing we will need to wrap everything inside our AuthContext provider.

return (
    <AuthContext.Provider value={authContextValue}>
        <NavigationContainer>
            <Stack.Navigator>{chooseScreen(state)}</Stack.Navigator>
        </NavigationContainer>
    </AuthContext.Provider>
);

The two helper functions were created to help us dictate which screen gets rendered in our authorization flow.

stateConditionString(): returns a single value, telling our switch case which Stack Screen to return. If you look at our useReducer, when the useContext is called from one of our pages it will dispatch the action and update state. The state flags is how we determine which page to naviagte to.

export const stateConditionString = state => {
    let navigateTo = '';
    if (state.isLoading) {
        navigateTo = 'LOAD_APP';
    }
    if (state.isSignedIn && state.userToken && state.isSignedUp) {
        navigateTo = 'LOAD_HOME';
    }
    if (!state.isSignedUp && state.noAccount) {
        navigateTo = 'LOAD_SIGNUP';
    }
    if (!state.isSignedIn && !state.noAccount) {
        navigateTo = 'LOAD_SIGNIN';
    }
    return navigateTo;
};

chooseScreen(): When we define screens like this, React Navigation will only see the valid screen. This makes it impossible to navigate to the HomeScreen when the user is not signed in.

const chooseScreen = state => {
    let navigateTo = stateConditionString(state);
    let arr = [];

    switch (navigateTo) {
        case 'LOAD_APP':
            arr.push(<Stack.Screen name="Splash" component={SplashScreen} />);
            break;

        case 'LOAD_SIGNUP':
            arr.push(
                <Stack.Screen
                    name="SignUp"
                    component={SignUpScreen}
                    options={{
                        title: 'Sign Up',
                        // When logging out, a pop animation feels intuitive
                        animationTypeForReplace: state.isSignout
                            ? 'pop'
                            : 'push'
                    }}
                />
            );
            break;
        case 'LOAD_SIGNIN':
            arr.push(<Stack.Screen name="SignIn" component={SignInScreen} />);
            break;

        case 'LOAD_HOME':
            arr.push(
                <Stack.Screen
                    name="Home"
                    component={createHomeStack}
                    options={{
                        title: 'Home Screen Parent',
                        headerStyle: { backgroundColor: 'black' },
                        headerTintColor: 'white'
                    }}
                />
            );
            break;
        default:
            arr.push(<Stack.Screen name="SignIn" component={SignInScreen} />);
            break;
    }
    return arr[0];
};

At this point we have everything we need to build our authentication flow. I'd like to point out that we are not using a real token. In a production app, we need to send the data to server and get a token. You'll also need to handle errors if sign in failed.

Wrap Up 🎉

Building an authentication flow with react navigation 5.0 is straight to the point with the power of react hooks. We can define different screens based on conditions and use the react navigations stack history manager to help us guard against un authorized page access.

I also encourage you to checkout Indicative, it has some powerful features to help validate and sanitize your data.

I hope this guide has helped you understand how authorization screens can be created in react-native using the lastest features of react and react-navigation. I'd enjoy hearing about your experience in the comments below.

Feel free to reach out if you'd like some help. Discord

GitHub Repository

Twitter
Instagram