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:
- import React from “react”;
- import { StyleSheet, View, Text } from “react-native”;
- const Header = props => {
- return (
- <View style={styles.header}>
- <Text style={styles.headerTitle}>{props.title}</Text>
- </View>
- );
- };
- const styles = StyleSheet.create({
- header: {
- width: “100%”,
- height: 100,
- paddingTop: 40,
- backgroundColor: “purple”,
- alignItems: “center”,
- justifyContent: “center”
- },
- headerTitle: {
- color: “white”,
- fontSize: 20
- }
- });
- 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.