Sign in

Get started

 JAVASCRIPT

 ANGULARJS

 REACT

 EMBER

 VUE

 NEWSLETTER

React Native for Dummies:

Get Started With Your First
React Native Application.
Devin Robichaux
Follow
Jan 31, 2018 · 8 min read

Why React Native

React Native is is a framework that enables you to build cross-platform
mobile applications using React and JavaScript. It enables you to use the
same components on iOS and Android platforms. The UI components
can also be customized for each platform.

What we will be building

This guide would walk you through building a to-do application in React
Native with features like:

 Adding a new to-do item.

 Deleting a to-do item.

 Marking a to-do item as done and undone.

Before you begin

Follow the instructions here to set up your React Native development
environment for your development OS (macOS, Windows, or Linux) and
target OS (iOS or Android).

Tools used.
 React Native: This will be used to build our mobile
application (iOS or Android) in JavaScript.

 React Native Vector Icons: This contains icons that will

be used in our React Native mobile application.

Project setup.
Navigate to a specific directory on your machine and run the following
commands to generate a new React Native project.
react-native init todo

Navigate to the project directory and start your React Native application
by running the following command. Ensure you have your virtual device
or emulator running.
cd todo
react-native run-android

If all things worked properly, you should have a screen like this
displayed on your Android emulator or device.
Create the src directory containing the components and styles subfolder.

The components folder will contain all of our React components while
the styles folder will contain all of our stylings for the components.
mkdir -p src/{components,styles}
Adding new to-do items
Create a todoStyles.js file in the src/styles directory. This will contain all of the
styles for our Todo component that we will create later. Add the code
below to the file.

src/styles/todoStyles.js
import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({

container: {
flex: 1,
flexDirection: 'column',
padding: 10,
backgroundColor: 'white'
},
inputContainer: {
height: 50
},
separator: {
borderBottomColor: '#d1d0d4',
borderBottomWidth: 1
}
});

export default styles;

Create a todo.js file in the src/components directory and add the code below to

the file.

src/components/todo.js
import React, { Component } from 'react';
import { TextInput, View } from 'react-native';
import styles from '../styles/todoStyles';

class Todo extends Component {

constructor(props) {
super(props);
 this.state = {
text: '',
todos: []
};
}
onSubmit = () => {
if (this.state.text) {
this.setState(prevState => ({
text: '',
todos: [...prevState.todos,
{ title: prevState.text, done: false }]
}));
this.textInput.setNativeProps({ text: '' });
}
}
render () {
return (
<View style={styles.container} >
<TextInput
selectionColor="black"
underlineColorAndroid="black"
placeholder="What needs to be done"
onChangeText={text => this.setState({ text })}
onSubmitEditing={this.onSubmit}
ref={(component) => { this.textInput = component; }}
autoFocus
/>
</View>
)
}
}
export default Todo;

The todo.js file will contain most of our application code. The View React

Native component acts as the container for other child components.

The TextInput is a component that enables a user to enter text.

The onChangeTextprop on the TextInput takes a function that is called each
time the text changes. this.setState({ text }) is called in the anonymous
function passed to the onChangeText prop to change the value of
the textproperty in the state of the todo component.

The onSubmitEditing prop on the TextInput takes a function that is called each

time the text is submitted. The onSubmit method in the todo class adds a
new to-do item to the todos array in the state and changes the text
property in the state to an empty string. An update function is passed
to this.setState here because the update/new value of state depends on the
current value. It enables us to always access the most updated version of
the state.

A ref was added to the text input to enable us to use setNativeProps props to

clear the input every time it is submitted. A ref enables us to directly
manipulate elements.

Replace the contents of the App.js file in the root directory with the code

below. This imports our Todo components and renders it as a child of
the App component.

App.js
import React from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
import Todo from './src/components/todo';

const App = () =>

(
<View style={styles.container}>
<Text style={styles.welcome}>
 React Native Todo App
</Text>
<Todo/>
</View>
);

const styles = StyleSheet.create({

container: {
flex: 1
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
export default App;

Displaying our to-do items

Create a todoItemStyles.js file in the src/styles directory. This file will contain
all of the styles for our TodoItem component which we will create later.
Add the code below to the todoItemStyles.js file.

src/styles/todoItemStyles.js
import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({

container: { flex: 1, flexDirection: 'row' },
text: {
flex: 1,
marginHorizontal: 10,
textAlignVertical: 'center',
fontSize: 18
}
});

export default styles;

Create a todoItem.js file in the src/components directory. This file will contain
the component that would display our to-do items. Add the code below to
the file.

src/components/todoItem.js
import React from 'react';
import { Text, View, TouchableHighlight } from 'react-native';
import styles from '../styles/todoItemStyles';

const TodoItem = ({item}) =>

(
<View style={styles.container} >
<Text style={styles.text}
>{item.title}
</Text>
</View>
);
export default TodoItem;

Import our TodoItem component in src/components/todo.js. Import the FlatList

React Native element too.
...
import { TextInput, View, FlatList } from 'react-native';
import TodoItem from '../components/todoItem'
...

Add the FlatList React Native component to the return value of the render

method in the Todo class in src/components/todo.js. The Flatlist react-native
element would be used to display our list of to-dos.
...
<FlatList
ItemSeparatorComponent={this.separator}
data={this.state.todos}
renderItem={this.renderItem}
keyExtractor={this.keyExtractor}
/>
...
Add the methods below to the Todo class in src/components/todo.js.
...
keyExtractor = (item, index) => index;

separator = () => <View style={styles.separator} />;

renderItem = ({ item, index }) => (

<TodoItem
item={item}
index={index}
markAsDone={this.markAsDone}
onPressRemove={this.onPressRemove}
/>
);
...

The renderItem method returns our TodoItem component that is rendered for

each item in the todos array in our Todo component's state.
The separator method returns a component that is used to separate each
item in the FlatList. The key extractor tells the FlatList view to use the index of
the item as unique identifiers of each item in the view.

Updated src/components/Todo.js
import React, { Component } from 'react';
import { TextInput, View, FlatList } from 'react-native';
import TodoItem from '../components/todoItem';
import styles from '../styles/todoStyles';

class Todo extends Component {

constructor(props) {
super(props);
this.state = {
text: '',
todos: [{ title: 'test', done: false }]
};
}
onSubmit = () => {
if (this.state.text) {
this.setState(prevState => ({
text: '',
 todos: [...prevState.todos,
{ title: prevState.text, done: false }]
}));
this.textInput.setNativeProps({ text: '' });
}
}
keyExtractor = (item, index) => index;

separator = () => <View style={styles.separator} />;

renderItem = ({ item, index }) => (

<TodoItem
item={item}
index={index}
/>
);
render() {
return (
<View style={styles.container} >
<TextInput
selectionColor="black"
underlineColorAndroid="black"
placeholder="What needs to be done"
onChangeText={text => this.setState({ text })}
onSubmitEditing={this.onSubmit}
ref={(component) => { this.textInput = component; }}
autoFocus
/>
<FlatList
ItemSeparatorComponent={this.separator}
data={this.state.todos}
renderItem={this.renderItem}
keyExtractor={this.keyExtractor}
/>
</View>
);
}
}
export default Todo;

Our to-do items should now be visible after they are submitted in
the TextInput.
Our app on the Android emulator should now look like this.
Deleting todo items
Run the following command to install react-native-vector-icons and link
it to our application.
npm install --save react-native-vector-icons
npm install
react-native link
We will need to restart our application after this.
react-native run-android

Add the method below to the Todo class insrc/components/todo.js. This method

will handle the removal of to-do items from the todos array in our
components state. It filters out the array item with the index passed it as
an argument from the todos array in the state.
...
onPressRemove = (index) => {
this.setState(prevState => ({
todos: prevState.todos.filter((_, i) => i !== index)
}));
}
...

Update renderItem method in the todo class to include

the onpressRemoveproperty on the TodoItem component.
...
renderItem = ({ item, index }) => (
<TodoItem
item={item}
index={index}
onPressRemove={this.onPressRemove}
/>
);
...

Update our todoItem.js file with the code below.

import React from 'react';
import { Text, View, TouchableHighlight } from 'react-native';
import styles from '../styles/todoItemStyles';
import Icon from 'react-native-vector-icons/FontAwesome';

const TodoItem = ({item, index , onPressRemove}) =>

(
<View style={styles.container} >
<Text style={styles.text}
>{item.title}
 </Text>
<TouchableHighlight
onPress={() => onPressRemove(index)}
>
<Icon name="remove" size={30} color="#d75452" />
</TouchableHighlight>
</View>
);
export default TodoItem;

The TouchableHighlight is a React Native element that enables us to handle

touches. The TouchableHighlight React Native element onPress prop takes a
function that is called each time it is pressed. The Icon from React-Native-
vector-Icons enables use of hundreds of customizable icons in our
application.

Save all changes and reload the application. Our application should now
look like this. Clicking the remove icon should remove the to-do item.
Marking to-do items as done
Add the method below to the Todo class in src/components/todo.js. This method
will change the value of done key of a to-do Item object with a particular
index to true or false and update our component's state.
...
markAsDone = (index) => {
 this.setState(prevState => ({
todos: prevState.todos.map((item, i) => {
if (i === index) {
item.done = !item.done;
return item;
}
return item;
})
}));
}
...

Update the renderItem method in the Todo class in src/components/todo.js to pass

the prop markAsDone to the TodoItemcomponent.
...
renderItem = ({ item, index }) => (
<TodoItem
item={item}
index={index}
markAsDone={this.markAsDone}
onPressRemove={this.onPressRemove}
/>
);
...

Update the todoItem.js with the code below.

src/components/todoItem.js
import React from 'react';
import { Text, View, TouchableHighlight } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import styles from '../styles/todoItemStyles';

const TodoItem = ({
item, index, onPressRemove, markAsDone
}) =>
(
<View style={styles.container} >
<TouchableHighlight
onPress={() => markAsDone(index)}
underlayColor="white"
 >
{ item.done ?
<Icon name="check-square-o" size={30} color="#5fb660" /> :
<Icon name="square-o" size={30} color="#808080" />
}
</TouchableHighlight>
<Text style={[
styles.text, {
textDecorationLine: item.done ? 'line-through' : 'none',
color: item.done ? '#808080' : 'black'
}]}
>{item.title}
</Text>
<TouchableHighlight
onPress={() => onPressRemove(index)}
>
<Icon name="remove" size={30} color="#d75452" />
</TouchableHighlight>
</View>
);

export default TodoItem;

A second TouchableHighlight is added here, which is used to mark a to-do

item as done.
There is conditional rendering being used in this component. It renders
the check-square-o Icon when the to-do item is marked as done and renders
the square-oicon when the to-do item is marked as undone.

The text-decoration and color style property of the todoItem text is also

changed based on the status of the done property of the to-do item. When
the to-do item is done, the text color is gray and the text-decoration is
lined-through, otherwise the text-decoration is none and the text color is
black.
Clicking the square-o Icon should mark a to-do item as done and vice
versa.

Once done, our final application should look like this.

Conclusion
Our application is now complete! If you have any questions or
comments, please add them to the comments section below.
 React Native
 JavaScript
  Web Development
 Development
 Programming

85

WRITTEN BY
Devin Robichaux
Follow
Student of life.

Frontend Weekly
Follow
It's really hard to keep up with all the front-end development news out there. Let us help you. We
hand-pick interesting articles related to front-end development. You can also subscribe to our
weekly newsletter at http://frontendweekly.co
More From Medium
A Simple Introduction to Generator Functions
Bashiru Ismail Babatunde

Error! Filename not specified.

Organise Your Angular Services to Be Bulletproof.
Michal Bujalski in The Startup
Error! Filename not specified.
Linked List in JavaScript: How to Create Double and Sorted Lists
Before Semicolon

Error! Filename not specified.

Beautiful and responsive charts with Nivo & React
Arthur Effting in The Startup

Error! Filename not specified.

JavaScript — Return Object From Array
Jessica Lee in CodeX

Error! Filename not specified.

How to Build a Chat App with React , Socket.io and Express
John Au-Yeung in DataSeries

Error! Filename not specified.

Casual JSON generation with Jackson
@cowtowncoder
Error! Filename not specified.
Routing Orthogonal Diagram Connectors in JavaScript
Jose M Menendez in The Startup

Error! Filename not specified.

Learn more.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here,
expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn
more

Make Medium yours.

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in
your inbox. Explore

Share your thinking.

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to
post your thinking on any topic. Write on Medium
About
Help
Legal