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

The `New` component is used to add new task items to the to-do list. A `Fab` will appear at the bottom left in the `Home` component, which will be used to navigate to the `New` component.

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

# macOS
.DS_Store


import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View, LogBox } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { NativeBaseProvider } from "native-base";
import Home from "./comps/Home.js";
import Edit from "./comps/Edit.js";
import New from "./comps/New.js";


export default function App() {
    const Stack = createNativeStackNavigator();
    LogBox.ignoreAllLogs();
    return (
        <NativeBaseProvider>
            <NavigationContainer>
                <Stack.Navigator
                    initialRouteName="Home"
                    screenOptions={{
                        title: "Todo List",
                        headerTitleAlign: "center",
                        headerStyle: {
                            backgroundColor: "#141E30",
                        },
                        headerTintColor: "#fff",
                    }}
                >
                    <Stack.Screen name="Home" component={Home} />
                    <Stack.Screen name="Edit" component={Edit} />
                    <Stack.Screen name="New" component={New} />
                </Stack.Navigator>
            </NavigationContainer>
        </NativeBaseProvider>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
    },
});


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 `New.js` screen needs two states:

- `title`: The title of the new item.
- `error`: The error message.

## The `getData` function
The `getData` function retrieves the data from the storage. Initially, the data is in the form of a string, so we need to parse it to JSON.


## The `handleSubmit` function
The `handleSubmit` function first takes care of error-checking. If the title is empty, it sets the error to `Input cannot be empty`. If the title is longer than `10` characters, it sets the error to `Length must be under 10 characters`. If there is no error, it creates a new item object and stores it in the `AsyncStorage`.

The object stored in `AsyncStorage` looks something like this.
```jsx
const item = {
    id: shortid.generate(),
    title: title,
    timestamp: new Date(),
};
```
Here, `shortid` is a library that generates a unique ID. The `Date` function is a JavaScript function that returns the current date and time. Initially the item is not checked.

Once the item is stored in `AsyncStorage`, both states are reset to empty string and the user is redirected to the Home screen.


## The `storeData` function

The `storeData` function is used to update the `AsyncStorage` with the new data from the input. Key used for storing the elements is `@todo_list`. 


## UI

- **Lines 67–74:** A simple `Input` component from `native-base` is used to take input for the title of the new item. It consists of a `placeholder` prop, an `onChangeText` listener used to update the `title` state and a `value` prop with the value of the input.

- **Line 75:** A ternary operator is used to check if a value exists in the `error` state. If it does, the `error` text is rendered. If it doesn’t, then nothing is rendered.

- **Lines 77–81:** We have a simple submit button connecting to the `handleSubmit` function.

Learn how new task items are added to the to-do list.

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

Build a Music Player Application Using React Native

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

The New Component

Code explanation