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:
.](https://cdn-images-1.medium.com/max/3812/1*OYTvJP0RLLQemyT0ukb1Iw.png)
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#