Comprehensive Guide to create simple app using React Native Web and React Native Elements
Case study: gitphone
, GitHub repository checker for your smartphone.

ToC#
- Initialize the project using CRNWA
- Make sure everything works: Android, iOS and Web
- Add RNE latest ( 1.0.0-beta7 ) to the project
- Add 2 screens
Screen 1 RNE components:
- Input
- Button with Icon
Screen 2 RNE components:
- Header
- ListItem
- Avatar
- Text
gitphone
should have:
0️⃣ Initial Step#
Install create-react-native-web-app
1️⃣ First Step#
Create gitphone
project.
Change to gitphone
directory and test the web app by running yarn web
.

Now, test the gitphone
android app by running yarn android
.
If the build successful, you'll see the app installed on your Android (emulator) device.

But if you got an error when run yarn android
, please see Troubleshooting section below.
The last part for First Step, make sure it can be run on iOS without any problem. Run yarn ios
and voila!

2️⃣ Step Two#
Installing React Native Elements (RNE).
Installing React Native Vector Icons (RNVI).
Linking:
Both RNE and RNVI are written using es6. If you run yarn web
at this point, you'll got an error.
We need to tell webpack to transpile them.
- Open
config/webpack.config.dev.js
- On line 141
Process JS with babel
, add RNE and RNVI to include - Do the same for
config/webpack.config.prod.js
as well 👌
If you get lost, see this gist or commit 8c0e603.
3️⃣ Give it a try#
Now, let's grasp the idea how RNE works.
Open src/App.js
Import Button from RNE
On render, change TouchableHighlight to use RNE's Button
Run yarn ios, yarn android and yarn web to see it in action! 👏
Note: If you got an error Could not find com.android.tools.build.appt2
when running yarn android
, add google
on the gradle repositories.
See this gist or commit for the details: a2ebba1.
4️⃣ Add Home component#
Our first component will be Home
. On this component, there are two input fields and one Submit button.
- Inside
src
, create new folder: Components
- Add new file called
Home.js
gist - On
App.js
, import Home
component gist - Run
yarn ios
, yarn android
and yarn web
to see it in action! 🎇
Styling for Home component#
You should notice that our Home
doesn’t look good in term of UI. Let’s add styling for it.
- Inside
Components
, create Shared.style.js
file gist - Import the style and update
Home
component as below gist - Looks better now*, commit for adding Home component: 2e510c4.
Wait a minute… *Seems there is a problem with RNVI on the web version. You can check this Web (with webpack) article or just following steps bellow.
- Open
config/webpack.config.dev.js
- Add url-loader on line 162 gist
- Do the same for
config/webpack.config.prod.js
as well 👌 - Open
src/index.js
file - Add
iconFont
and append style
to document’s head gist
Our RNE x RNW progress so far~
5️⃣ Routing#
Next, let’s add second component: CommitList
.
- Create new folder inside
Components
named Commit
- Add new file:
CommitList.js
gist
On our app, user goes to second screen by click on Submit
button. How do we implement it?
“react-router comes to the rescue” - https://reacttraining.com/react-router/
Add react-router-dom and react-router-native
Web needs BrowserRouter
while native NativeRouter
. We need to separate it based on the platform.
- On
src
, create Utils
folder - Add two files on
Utils
: Routing.native.js
and Routing.web.js
gist
Those file’s content differ only on the second line. gist
Now, glue it together.
Open App.js
, import CommitList
component
Import Route
, Router
and Switch
from Utils/Routing
Implement routing inside render
method gist
Now for the action on Submit
button, open Home.js
Import withRouter
from Utils/Routing
WithRouter
is an HOC. Use it to wrap Home
component
Add onPress
property for the button
Implement the onPressButton
event handler
All Home
together gist | commit
Test it on web
and android
, you should be able to go back and forth between screens using Submit
and pressing Back
button.
“How can I go back on iOS?” 😂
Implement withHeader#
We will create a withHeader
HOC. Why HOC? We can reuse it easier if we add more screens later.
On src
, create HOCs
folder
Add withHeader.js
file
Import Header
from RNE and Icon
from RNVI/FontAwesome
withHeader
accepts one prop: title
Event handler to go back / go home
Import and use withHeader
in CommitList
component gist | commit
6️⃣ Fetch data from GitHub API#
Let’s fetch a real-live data: list commit on repository by GitHub and render it on our second screen, CommitList
.
Ideally, the :owner and :repo are form values from our first screen. Since the objective of this article is RNE x RNW, talk about that form (and state-management) later on.
To fetch GitHub API, we will use fetch-hoc package and also need compose from redux
, to handle multiple HOCs on the same component.
Open CommitList.js
Import { compose }
from redux
and fetch
from fetch-hoc
Use it as below gist | commit
Now run yarn web
, open network
tab of DevTools
and click Submit
button, you’ll see bunch of commit data. By default GitHub API returning 30 commits.
Render commit data#
Commit data that will be displayed on the screen:
Let’s modify CommitList.js
Add new imports
On main render, modify it as below
Create renderContent
method
Create renderItem
method
Create renderLeftElement
method
Here is our new CommitList
including the styling to make it prettier gist | commit
Here they are!
awesome, eh?
7️⃣ Handle form submission#
Our app looks great so far. But we are not passing values from first to second screen. Let’s do it.
To handle form, we’ll use formik
Open Home.js
and import it
Wrap main View
with formik
Add onChangeText
handler to the Input
Change Button
onPress
props to handleSubmit
Don’t forget to close the main View
Form submission: done 👌 Next question: How do we pass these values to second screen? Send them when we redirect to second screen!
Inside onPressButton
method, send an object instead of pathname
only.
Open CommitList
, import withRouter
Add withRouter
inside compose
Get the values passed down to withRouter
and use it to fetch
HOC’s order does matter. So, make sure it the same as snippet above. In case you lost, here is the commit: 1d83c5e.
Test the app. Now we should able to fetch any GitHub repository, with some caveats. 👀
8️⃣ Polishing the app#
What happens if we fetch repository which doesn’t exist? Red screen on native, blank screen on web! 😹
fetch-hoc
returns an error if it has. Let’s use it.
On CommitList
, modify renderContent
Import Text
from RNE
Add renderFlatList
method
Test it. Instead of red or blank screen, now Error: Not Found
displayed.
What’s else? Try to fetch facebook/react-native
. We got another error 🙀
Not all of author
have avatar_url
. We should do this for the Avatar source
.
So, our app renders nothing if it has no url? It doesn’t look good. Solution: render author initial name.
With the help of RegEx and Avatar title
props, renderLeftElement
should look like this now:
Commit for Polishing the app section: 943974b.
When I wrote this, fetch facebook/react-native
returning following:
Why no love for regex? Thanks to Sanoor.
Conclusion#
We have created a simple app using RNE + RNW 👏
Some improvements for gitphone
:
If you go back from Commits
screen, input form on Home
screen are empty. If you want preserve previous values, this can be fixed easily by introducing redux to the app. References here: 48108dd.
Can we fetch more commits data once we reach the most bottom of the list? Infinite scroll?
For web, we can use react-visibility-sensor. Check it out: 6c1f689.
For native, it’s easier. We can use FlatList
onEndReached
props. To give you an idea how, see this: 9d2e1f2.
Troubleshooting 💺#
#1 Build failed when running yarn android
Here is how to fix #1:
- Open Android Studio.

- Open
android
project under gitphone
.

- Click Update on this prompt.

Wait for Android Studio syncing the project.
- It synced successfully with two errors.

At this stage, just click Update Build Tools version and sync project
on the sync window.
Now, the remaining warning is the Configuration 'compile'...
To fix that, open app/build.gradle
file, change dependencies
section (line 139) to use implementation
instead of compile
.
dependencies {
implementation fileTree(dir: "libs", include: ["*.jar"])
implementation "com.android.support:appcompat-v7:23.0.1"
implementation "com.facebook.react:react-native:+"
}
Sync it again and close Android Studio.

Troubleshooting for android is done. Now, you should be able to run yarn android
successfully.
#2 Build failed when running yarn ios
Here is how to fix #2:
Inside the project, run script below from your favourite terminal
If you run yarn ios
again, and you got this error
Please run this script:
Troubleshooting for iOS is done. Now, you should be able to run yarn ios
successfully.
Authors#