Writing your really first mobile app in React-Native — simple To Do app

Lex Lemmens
May 21, 2019 · 5 min read

Okay let’s start with a nerdy introduction… 🤓. React-Native is a framework (developed by Facebook) to write an iOS and Android App in a web development language called JavaScript and which converts to a cross-platform native app for iOS and Android. The advantage of this is that you can use the web development language you’re used to and have to learn and maintain only one language (JavaScript).

This is what we’re going to be using to build a really simple To Do app. We’re going to be using Expo to skip the hassle of setting up a project and to quickly be prototyping. For production apps you should look into React-Native CLI.

Requirements

  • An account on https://snack.expo.io

Getting started

Log in to https://snack.expo.io and create a new Snack. This will give you an example project like below.

Example of a newly created Snack.

Click on “Run on your device” in the emulator on the right side. This will give you a modal asking for your Device Id. This is located in the Expo App under the Projects tab (which you should have downloaded by now) on your Android / iPhone device.

If you filled in the Device Id and clicked Save, there should be a green message that your device is connected. You can find the project below “Recently in development” in the Projects tab.

Open the project on your phone, every change you make on your browser should be reflected on your device.

Example of the Device Id and the Recently in development tab.

Building a header

Alright let’s start by writing our first lines of code. Cleanup the App.js file like below so we have a clean slate and a white screen on our app.

App.js — clean slate

Now let’s start adding some color to our page plus change the status bar to a white text color. Type in the following code, make sure you import “StatusBar” and “LinearGradient”.

App.js — Linear Gradient applied + Statusbar in white.

The “LinearGradient” component gives the gradient background effect. The “StatusBar” component gives the above bar a white text color. Your screen should be looking like this right now. Also notice the “style={{ flex: 1 }}” this makes sure the LinearGradient is stretched to full width and height.

App.js with LinearGradient and StatusBar light applied.

Okay looking a little bit better but there are no To Do’s yet. Let’s take a look at that next.

Build a text input to add new To Do’s

To add new To Do items there should be an area where people can type the title of the new To Do item. So let’s start building that with the “TextInput” component.

The text input code in App.js

Notice that we’ve imported the TextInput at the top and added it. Also we’ve added some styles to the TextInput at the bottom. If you look at the TextInput there are a lot of options available (these options are called props in react native). You can read here to get an explanation about them, https://facebook.github.io/react-native/docs/textinput.html#props.

The text input isn’t doing anything yet but your app should look like below (I know it’s really big).

Text input example App.js

Building the logic.

This part is possibly the hardest part. But this will make your app come to life :). The steps of the logic will be like this.

  1. The text input should have an empty default value. (this is the default state of the app);

Okay let’s code these steps.

First we should have an empty default value on the text input.

Notice that we’ve added the “value” prop on the InputText component and are using the this.state.inputValue from above.

The next thing to do is update the state.inputValue when a user is typing. We will do that with the “onChangeText={this.changeText}” prop. Which will call the onChangeText method, this method accepts the new value and will set the new state of inputValue. The app will look the same.

App.js — update inputValue with the new value.

If you’ve finished typing and return is pressed we want to add a new To Do item to the list. Which we will store in the state as well in the todos array. This list gets rendered in the component and will show all the To Do items.

App.js — Add item to To Do list.

If you look at the above code we’ve added a “todos” item (Array) to the state. The default state is empty, but this is where we can store the new to do items.

Also we’ve added a new prop to the InputText component, “onSubmitEditing” this calls a function addItem. The function adds a new item to the todos state.

In the render function we’ve added a variable todos. This maps all the To Do’s there are on the array to a text with a button on the side to toggle the state. This variable is rendered between the View. The app should look like below. (I know styling could be better 🙃).

Finished product.

Assignments

By now you know how to add To Do items and create a simple To Do app. If you want extra practice try to build the following things yourself.

  • Delete a To Do item from the list

Or just come up with ideas yourself and try to build them.

If you have an idea for a mobile app or want help with your app just send me a mail lex@getright.nl or reply on this story.

Also if you have ideas about a follow up story (a part 2) or a completely other idea / request about what to write about please let me know.

The Startup

Get smarter at building your thing. Join The Startup’s +792K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Lex Lemmens

Written by

Building mobile & web apps site: https://lexlemmens.me https://getright.nl twitter: @lex_lemmens91

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +792K followers.

Lex Lemmens

Written by

Building mobile & web apps site: https://lexlemmens.me https://getright.nl twitter: @lex_lemmens91

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +792K followers.

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

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

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store