How to Create a News Reader With React Native: Web Page Component_part 2 (end)

3. Running the App

To run the app, you need an Android device or an emulator. If you want to use an emulator, I recommend using Genymotion. You can run the app by executing the following command:

1. react-native run-android

This command installs and launches the app. But you will get the following error if you try to do so

This is because React Native expects the React server to be running on your machine. The React server compiles the app every time you save the changes in your text editor. The react-native run-android command is only used for running the app for the purpose of testing and debugging the app. That's why it's dependent on the React server for actually compiling the app.

To get rid of the error, you need to run the react-native start command to start the server. This takes a while on the first run, but when it gets to the part where it says the following:

1. <END>   Building Dependency Graph (35135ms)

You can open a new terminal window on your project directory and execute adb shell input keyevent 82. This opens the developer menu in the device or emulator. Once the menu is opened, select dev settings then select debug server host & port.

This opens a prompt asking you to enter the ip address and port of your computer. Find out the internal IP address of your computer and enter it in the prompt along with the port 8081, which is the default port on which React server runs. In other words, if your IP address is 192.168.254.254, then enter 192.168.254.254:8081.

After that, go back to the developer menu and select reload JS. This reloads the app so it detects the running React server instance. The app should how be working without problems.

If you want to test on an iOS device, then follow the guide on the React Native website.

4. Next Steps

We have built a pretty neat news reader app with React Native. What's next? Here are a few ideas if you want to learn more about React Native:

• Improve the code by breaking the app down in a few more reusable components. Start by looking at duplicated code. For example, in the app that we created, we have duplicated the header and the components inside it. What you can do is create a header component that accepts the title as the property and then requires it on every page where you need a header.
• Improve the response time of the app by creating a server that caches the items from the Hacker News API. This allows you to perform only one network request that contains all the news items instead of having to perform multiple network requests like we did in this tutorial.
• Generate a signed APK so that you can distribute the app on Google Play. For iOS, you can use Xcode to distribute your app to Apple's App Store.
• Explore the documentation for APIs that access native device capabilities, such as the camera.
• Check out the Awesome React Native repo on Github. That repo contains a list of components, resources, and tools that you can use with React Native.
• If you want to keep yourself updated with news about React Native, then subscribe to the React Native Newsletter.

Conclusion

That's it. In this tutorial, you learned how to work with React Native to create a news reader app that talks to the Hacker News API.
Written by Wernher-Bel Ancheta

If you found this post interesting, follow and support us.
Suggest for you:

Modern React with Redux

Advanced React and Redux

Build Apps with React Native

React for Visual Learners

The Complete Web Development Tutorial Using React and Redux