More

    React Native: Everything You Need to Know About It

    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. 

     

     

     

    Recent Articles

    Next JS Development Service – Features, Pros, Cons, FAQ

    Fundamentally, we believe it is the single most critical benefit in a rapidly evolving digital environment. Since it allows us to swiftly...

    React JS Learning Worth?

    What is the guideline to React JS Learning? There are several clear talents you must master if you want to make a career change...

    React JS vs React Native – Features, Pros & Cons

    Do you have trouble deciding between React JS vs react native for your development process? Do you need a solid web development framework or...

    Next js vs React: Who Wins The Battle

    Next js vs React: Who Wins The Battle Are you a programmer or in charge of your firm's digital strategy? Do you want to build...

    How can artificial intelligence (AI) help an employee’s work performance and proactivity?

    Artificial intelligence can assist human labor by doing inefficient jobs. Human employees may focus on more challenging work while robots and artificial intelligence power...

    Related Stories

    Leave A Reply

    Please enter your comment!
    Please enter your name here