Gain insights into building applications with React Native Expo. Learn essential development concepts to create career opportunities and enhance your skills using familiar web technologies.

final.tar.gz

React Native

firstapp

components

states

style

flex

sound

camera

forms

forms_bonus

forms_bonus-solution

navigation

stack_challenge_solution

drawer_navigation

effect

storage

todo

React Native-test

You’ll learn to build applications using React Native Expo. It’s an amazing technology for web developers to learn building apps using technologies they would already be familiar with. It would be an amazing opportunity for companies to train their developers on this instead of hiring new app developers. 

This course contains a complete package with the most commonly used concepts in application development. It would create a foundation for you to explore this technology further.

Taking this course would open doors to many opportunities out there to progress further in your career as application developer.

Building Applications with React Native

We’ll implement all the things we learned about `AsyncStorage` in this application.

node_modules/
.expo/
dist/
npm-debug.*
*.jks
*.p8
*.p12
*.key
*.mobileprovision
*.orig.*
web-build/
package-lock.json

# macOS
.DS_Store


import { useState, useEffect } from "react";
import {
    StyleSheet,
    Text,
    View,
    TextInput,
    TouchableOpacity,
    ScrollView,
} from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";
import shortid from "shortid";

export default function App() {
    const [title, setTitle] = useState("");
    const [error, setError] = useState("");
    const [list, setList] = useState([]);

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

    const deleteItem = async (id) => {
        const newList = await list.filter((item) => item.id != id);
        await AsyncStorage.setItem("@value_list", JSON.stringify(newList));
        setList(newList);
        console.log(newList);
    };

    const getData = async () => {
        try {
            const jsonValue = await AsyncStorage.getItem("@value_list");
            console.log(jsonValue);
            return jsonValue != null ? JSON.parse(jsonValue) : null;
        } catch (e) {
            console.log("something went wrong");
        }
    };

    const getitems = async () => {
        const data = await AsyncStorage.getItem("@value_list");
        if (!data) {
            setList([]);
        } else {
            setList(JSON.parse(data));
        }
    };

    const storeData = async (value) => {
        try {
            const jsonValue = JSON.stringify(value);
            await AsyncStorage.setItem("@value_list", jsonValue);
        } catch (e) {
            console.log(e);
            setError("something went wrong");
        }
    };

    const handleSubmit = async () => {
        if (title.length > 10) {
            setError("length must be under 10 characters");
            setTitle("");
        } else if (title.length == 0) {
            setError("Input cannot be empty");
        } else {
            const item = {
                id: shortid.generate(),
                title: title,
            };
            const data = await getData();
            if (!data) {
                const newList = [item];
                storeData(newList);
            } else {
                data.push(item);
                storeData(data);
            }
            getitems();
            setTitle("");
            setError("");
        }
    };

    return (
        <View style={styles.container}>
            <View style={styles.inputs}>
                <TextInput
                    placeholder="Enter a new Value"
                    style={styles.input}
                    onChangeText={(text) => setTitle(text)}
                    value={title}
                />
                {error ? <Text style={styles.error}>{error}</Text> : <></>}
                <TouchableOpacity style={styles.button} onPress={handleSubmit}>
                    <Text style={styles.buttonText}>Add</Text>
                </TouchableOpacity>
            </View>
            <Text style={styles.heading}>List of all the values</Text>
            <ScrollView
                style={styles.display}
                contentContainerStyle={{ alignItems: "center" }}
            >
                {list.map((item) => {
                    return (
                        <View style={styles.item} key={item.id}>
                            <Text style={styles.itemText}>{item.title}</Text>
                            <TouchableOpacity
                                style={styles.delete}
                                onPress={() => deleteItem(item.id)}
                            >
                                <Text style={styles.deleteText}>Delete</Text>
                            </TouchableOpacity>
                        </View>
                    );
                })}
            </ScrollView>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        padding: 40,
        width: "100%",
        backgroundColor: "#D4F4F6",
    },
    inputs: {
        marginVertical: 50,
    },
    item: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        marginVertical: 10,
        width: 200,
    },
    itemText: {
        fontSize: 20,
        fontWeight: "bold",
        color: "#000",
    },
    display: {
        flex: 1,
        marginTop: 60,
        width: 300,
    },
    delete: {
        backgroundColor: "#F4F4F4",
        padding: 10,
        borderRadius: 5,
        marginLeft: 10,
    },
    heading: {
        fontSize: 20,
        fontWeight: "bold",
    },
    input: {
        width: 250,
        height: 50,
        borderColor: "black",
        borderWidth: 1,
        padding: 10,
        margin: 10,
    },
    button: {
        height: 50,
        backgroundColor: "lightblue",
        justifyContent: "center",
        alignItems: "center",
        margin: 10,
    },
    buttonText: {
        color: "white",
        fontSize: 15,
    },
    error: {
        color: "#f54748",
        fontSize: 15,
        paddingBottom: 10,
    },
});


module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};


React

Dart

GoJS React

Typescript React

Vue.js

> **Note:** Once the server starts, click the URL next to “Your app can be found at:” to view the output.

# Code explanation
The states used in the application are:
- `title`: The title of the value
- `error`: The error message
- `list`: The list of all the values

# The `storeData` function
**Lines 48–56:** We can store objects by using `JSON.stringify`. We use the `setItem` method to store the data in a key called `@value_list`. We wrap the code in a `try catch` block to handle any errors. We use `await` since all methods are asynchronous.


# The `getitems` function

**Lines 39–46:** To get our stored object, we call `getItem` and pass in the key. We use the `try catch` block to handle any errors. The received data is in a string format, so we use `JSON.parse` to convert it to an object.

# The `useEffect` hook
We use the `useEffect` hook to run the `getitems` function on mount to display the list on render.

# The `handleSubmit` function
**Lines 58–81:** The `handleSubmit` function is used to add a new item to the list. We use the `if` statement to check whether the title length is greater than `10` characters. If it is, we set the error to `Length must be under 10 characters` and clear the title. If the title is empty, we set the error to `“Input cannot be empty”` and clear the title.

If the title is not empty and the length is less than ten characters, we create a new item to be stored and generate a new ID using `shortid.generate()`.

We use the `getData` function to get the current list of items. If the list is empty, we create a new list and store it. If the list is not empty, we push the new item to the list and store it.

To rerender the list, we call `getitems` function. Next, we set the title to an empty string and clear the error.

# The `deleteItem` function

**Lines 22–27:** This function is used to delete an item from the list. We create a `newList` variable and set it by filtering over the `list` array. We use the `filter` function to filter out the item with the id that is passed to the function. This `newList` is stored in `AsyncStorage`. Then we set the `list` in the `newList`.

Learn how to use AsyncStorage in React Native applications.

Welcome to the Course

Let's Get Started With React Native

Creating Our First Application

Handling Forms

Assessment on the Basics of React Native

Navigating Between Screens

The useEffect Hook

Assessment on Navigating the Components and their Lifecycle

AsyncStorage

The Todo List Application

To-do List Assessment

Connecting To External API's

Assessment on APIs

State Management

Firebase

Password Manager

Final Quiz

Conclusion

Implementing AsyncStorage