In the last three parts of our Tutorial series, we managed to create our API which is going to accomondate
all the business logic for our Todo application.
Today, we are going to continue with the front-end implementation in React Native.
As the name implies, React Native is a web framework based on React, which is specifically
designed to create native mobile applications.
So someone may ask why shouldn't we use let's say Cordova instead or any other web framework?
Well, React has the word Native in its name and what that means is that the app is truly Native.
You can find more info about React Native in the official website, as well as the installation instructions for your operating system.
A list of Todo items - React Native
Create a new React native project
react-native init ReactNativeTodoList to initialize a new react-native project.
Let's move inside the project folder
cd ReactNativeTodoList and open it with our editor.
In the root directory there are two files:
For our application we are going to focus on the
index.ios.js as in this tutorial we will create an iOS application.
We will start by running our app so as to see all the foregoing changes.
In a seperate terminal window and inside our project folder execute:
What this command does, is to compile our project's files and run our application inside the emulator.
Furthermore, whaterever change we make to our
index.ios.js file is immediately reflected
in the emulator.
Cool isn't it?
Let's start by deleting the generating code and creating our own implementation step by step.
The next step is to install react-native-swipe-list-view
This component will achieve a user friendly UI by allowing us to swipe on each todo item and access actions like edit or delete
npm install --save react-native-swipe-list-view
After the installation is completed we should enable the
ListView component in our application and implement the
Let's see what we implemented above.
In React as well as React Native the rendering engine works with the state of each individual component.
Each component when it is mounted it can have an initial state (and it should have, based on the documentation).
In getInitialState method we define some hard coded todo items so as to help us visualize our application.
With the help of
react-native-swipe-list-view that we previously installed, we can now swipe each
individual todo item and reveal a new action like the Delete button.
Last but not least, we added more styles to our StyleSheet and positioned accordingly, our view components with the help of Flexbox.
The moment of truth
As the header implies, it is time to see our Phoenix API in action.
Let's refactor our code and get rid of those hard coded todos.
As you can see the changes that we did are minimal.
We replaced the hard coded array of todo items with the call of _getTodosFromApi method.
An interesting fact about the asynchronous request that we perform is that it is using the ES6 concept of promises.
More info can be found in the official documentation.
If we refresh the emulator with CMD + R we will see that there aren't any todo items yet.
In another terminal window and inside the
todo_list_phoenix_api start the server.
Yeah, thats the name of Phoenix server
In another terminal window open the phoenix console.
iex -S mix
Now we that we got enough todos, let's refresh our emulator CMD + R.
I think the only thing missing is styling our todo items.
I created a new repository with all the React Native code so far.
Till next time.