Home Reactjs React Native: Everything You Need to Know About It

React Native: Everything You Need to Know About It

0
298
React Native

Introduction About React Native: 

React Native helps us to create real and exciting mobile applications by using JavaScript only and this is supported by both android and iOS platforms. The React Native app helps save development time and is also backed by Facebook. 

 The react native framework helps us build a hierarchy of UI components that in turn help us build the JavaScript code. Both react native and react js are developed by Facebook using the same design principles excluding the designing interfaces. 

 Since Facebook uses the same code for creating the React iOS and Android apps and web applications, you simply need to know the HTML, CSS, and JavaScript. 

 

Why use React Native? 

1)    Cross-Platform

Possibly the most significant advantage of Native is that it helps you develop an application for both Android and iOS ecosystems by using almost the same codes with a few simple changes. 

 

2)    JavaScript

React Native uses only JavaScript, hence eliminating the need to know multiple programming languages. 

 

3)    Performance

It enables speedy development of mobile apps for both iOS and Android as similar codes are used. It also facilitates a hot reload feature that makes sure that small changes made are also immediately visible to the developer. 

 

4)    Large Developers’ Community

Adequate support for the framework is available as a large community helps all queries to be resolved in time. 

 

5)    Used by many companies

In spite of the framework being new, it is very widely used. Many companies have already migrated the framework to the software and others are looking to use the framework to boost development and maintenance. 

 

6)    Excellent Career Opportunities

It has become very popular because of cross-compatibility. The high compatibility has also resulted in an increased demand for react native. 

 

 View, state, Props, and Style

 View- 

The view is an elemental component of react native that is used for building a user interface. It is the container that supports layout with flexbox, style, touch handling, and accessibility controls. It maps directly to the native view similar to whatever platform on React Native app is running on. 

 State- 

There are two types of data that control a component in React Native. These are the props and state. For data that is going to change in the future, we use state. It determines the behavior of the component and how it will render. 

 Props- 

This is short for properties. It helps us customize the components at the time of creation using different parameters. Props are passed from one container to another as a means of passing data between them.

 Style- 

Native uses JavaScript for styling the application. All core components use a prop named style and these names and values are similar to CSS that works for the web. To style our components, we can use inline styling or use StyleSheet, which is a react native component.

What are a few downsides of using react native? 

 

1)    It is improving with time

The REACT Native Framework is not flawless as of now and has a few glitches that have not been addressed. Some of the custom modules in this framework are missing, which may lead you to consume your time in building and creating your own modules. 

 

2)    It still has a technological edge

Even though the software is quite easy, you still need a professional developer to watch out some technical glitches and bugs. 

 

3)    Its Existence is Uncertain

Since facebook has the rights to kill off the project at any time, its existence is uncertain. The thing to be noted though is that due to the immense popularity of the software, that is highly unlikely to happen. 

 

Create a React Native App- To-do Application.

 

We will now make a mobile application called To-do. This application allows us to add and manage tasks on the application. 

 

Set-up the development Environment

 

Expo is a set of tools and services built around React native and native platforms that help you develop, build, deploy and quickly iterate on iOS, Android and web apps from the same JavaScript codebase.

 

We will use the Expo Framework to develop our React Native application. 

 

      The first step is to install the nodeJS on the computer. 

      After it is installed, we need to get the command-line tool for Expo; for which you need to type the following command: 

npm install Expo-cli –global

      After the Expo-xli tool is installed, we need to create our project. To do so, type the following command in the terminal:

expo init todo-app

      Next choose a screen for a blank application all while including the Expo workflow features. 

       Enter the application name and press enter to continue setting up. 

      To start the application, you can navigate to the newly created project folder and type “npm start”. To stop the process, press Ctrl+C

 cd todo-app

npm start

The development server will start running, and a new tab will open in your web browser with the Expo manager screen. 

 

There are now two ways in which you can preview the application:

      The app can be run on an Android emulator, which you can get by installing Android Studio on your PC. 

      You can also install the Expo application on your phone and scan the QR code to run the application on the phone. The To-do app will load and will update as you make changes to the code.

 

The last step would be to install a text editor of your choice. 

 

Create Components of the App

Everything we create here is a component. All those mentioned below are separate components that have been combined to create a complete mobile application. 

 

      App

      Header

      Display Image

      To-do item

      To-do input

 

Let us now begin: 

 

      Open the project folder in the text editor, and inside the src folder, create a components folder into which we will add all our components. 

 

 

      Create a file names Header.js under components and enter the following code: 

 

  1.   import React from “react”;
  2.   import { StyleSheet, View, Text } from “react-native”;
  3.  
  4.   const Header = props => {
  5.   return (
  6.   <View style={styles.header}>
  7.   <Text style={styles.headerTitle}>{props.title}</Text>
  8.   </View>
  9.   );
  10. };
  11. const styles = StyleSheet.create({
  12. header: {
  13. width: “100%”,
  14. height: 100,
  15. paddingTop: 40,
  16. backgroundColor: “purple”,
  17. alignItems: “center”,
  18. justifyContent: “center”
  19. },
  20. headerTitle: {
  21. color: “white”,
  22. fontSize: 20
  23. }
  24. });
  25. export default Header;

      Create a file named DisplayImage.js and add the following code: 

      import React from “react”;

      import { Image, StyleSheet } from “react-native”;

       

      const DisplayImage = props => {

        if (props.taskStatus.length < 1) {

          return (

            <Image style={styles.image} source={require(“../assets/tick.png”)} />

          );

        } else {

          return null;

        }

      };

       

      const styles = StyleSheet.create({

        image: {

          width: 250,

          height: 250,

          margin: 80,

          marginTop: 250

        }

      });

       

      export default DisplayImage;

 

      Next, create a file called TodoItem.js and add the following code: 

 

import React, { useState } from “react”;

import {

  View,

  Text,

  StyleSheet,

  TouchableOpacity,

  CheckBox

} from “react-native”;

 

const TodoItem = props => {

  const [check, setCheck] = useState(false);

  return (

    <View style={styles.screen}>

      <View style={styles.listItem}>

        <Text>{props.title}</Text>

      </View>

      <CheckBox value={check} onValueChange={() => setCheck(!check)} />

      <TouchableOpacity

        onPress={props.onDelete.bind(this, props.id)}

        style={styles.button}

      >

        <Text style={styles.text}>Delete</Text>

      </TouchableOpacity>

    </View>

  );

};

 

const styles = StyleSheet.create({

  listItem: {

    padding: 10,

    backgroundColor: “#eee”,

    borderColor: “black”,

    borderWidth: 1,

    width: “60%”

  },

  screen: {

    flexDirection: “row”,

    marginTop: 30,

    justifyContent: “space-between”,

    width: “100%”

  },

  button: {

    display: “flex”,

    height: 40,

    borderRadius: 5,

    padding: 10,

    backgroundColor: “red”,

    alignItems: “center”,

    justifyContent: “center”

  },

  buttonGreen: {

    display: “flex”,

    height: 40,

    borderRadius: 5,

    padding: 10,

    backgroundColor: “green”,

    alignItems: “center”,

    justifyContent: “center”

  },

  text: {

    fontSize: 14,

    color: “white”

  }

});

 

export default TodoItem;

 

      Create a folder named TodoInput.js and add the below code: 

 

import React, { useState } from “react”;

import {

  View,

  TextInput,

  Button,

  StyleSheet,

  Modal,

  Alert,

  Image

} from “react-native”;

import Header from “./Header”;

 

const TodoInput = props => {

  const [enteredTask, setEnteredTask] = useState(“”);

 

  const TodoInputHandler = enteredText => {

    setEnteredTask(enteredText);

  };

 

  const addTaskHandler = () => {

    props.onAddTask(enteredTask);

    setEnteredTask(“”);

  };

 

  const checkInput = enteredTask => {

    if (enteredTask.length > 0) addTaskHandler();

    else {

      Alert.alert(“Error”, “Please enter a Task”, [{ text: “OK” }], {

        cancelable: false

      });

    }

  };

 

  return (

    <Modal visible={props.visible} animationType=”slide”>

      <Header title=”To-Do App”></Header>

 

      <View style={styles.inputContainer}>

        <TextInput

          placeholder=”Task”

          style={styles.input}

          onChangeText={TodoInputHandler}

          value={enteredTask}

        />

        <View style={styles.buttonContainer}>

          <View style={styles.button}>

            <Button

              title=”CANCEL”

              color=”red”

              onPress={props.onCancel}

            ></Button>

          </View>

          <View style={styles.button}>

            <Button

              title=”ADD”

              color=”green”

              onPress={() => checkInput(enteredTask)}

            />

          </View>

        </View>

      </View>

    </Modal>

  );

};

 

const styles = StyleSheet.create({

  inputContainer: {

    flex: 1,

    justifyContent: “center”,

    alignItems: “center”

  },

  input: {

    width: “80%”,

    borderColor: “black”,

    borderWidth: 1,

    padding: 10,

    marginBottom: 10

  },

  buttonContainer: {

    flexDirection: “row”,

    justifyContent: “space-around”,

    width: “60%”

  },

  button: {

    width: “40%”

  }

});

 

export default TodoInput;

 

      Replace the default code in the App.js file with the following code: 

import React, { useState } from “react”;

import { StyleSheet, View, Button, FlatList, Image } from “react-native”;

 

import TodoItem from “./components/TodoItem”;

import TodoInput from “./components/TodoInput”;

import DisplayImage from “./components/DisplayImage”;

import Header from “./components/Header”;

 

export default function App() {

  const [tasks, setTasks] = useState([]);

  const [addTasks, setAddTasks] = useState(false);

 

  const addTaskHandler = taskTitle => {

    setTasks(currentTasks => [

      …currentTasks,

      { id: Math.random().toString(), value: taskTitle }

    ]);

    setAddTasks(false);

  };

 

  const deleteTaskHandler = taskId => {

    setTasks(currentTasks => {

      return currentTasks.filter(task => task.id !== taskId);

    });

  };

 

  const canceltaskAdditionHandler = () => {

    setAddTasks(false);

  };

 

  return (

    <View>

      <Header title=”To-Do App”></Header>

      <View style={styles.screen}>

        <Button title=”Add New task” onPress={() => setAddTasks(true)}></Button>

        <TodoInput

          visible={addTasks}

          onAddTask={addTaskHandler}

          onCancel={canceltaskAdditionHandler}

        />

      </View>

      <DisplayImage taskStatus={tasks} />

 

      <View style={styles.screenlist}>

        <FlatList

          keyExtractor={(item, index) => item.id}

          data={tasks}

          renderItem={itemData => (

            <TodoItem

              title={itemData.item.value}

              onDelete={deleteTaskHandler}

              id={itemData.item.id}

            />

          )}

        ></FlatList>

      </View>

    </View>

  );

}

 

const styles = StyleSheet.create({

  screen: {

    paddingTop: 70,

    paddingHorizontal: 70

  },

  screenlist: {

    marginLeft: 20,

    marginRight: 20

  }

});

 

This is how we make our To-do mobile application and it should be working as shown below. 

 

 

 

No Comments

Leave A Reply

Please enter your comment!
Please enter your name here