Learning React Native from basic to advanced – Part 9: Building a simple news reading App with React Native and some personal shares

Tram Ho

I. Demo

In this article I will make a demo to show you how to use the Boilerplate mentioned in Part 8: Building a Base Project (Boilerplate) for React Native . So this article I will write briefly so you can start reading the code right in the link below.

Github: https://github.com/oTranThanhNghia/SimpleAppReactNative1

Apk reduce redundant functions https://www.dropbox.com/s/ry1j3y3o1imijbl/NewsReactNative_2019_11_10.apk?dl=0

For iOS you have to build yourself because there is no apple developer account ($ 99 / year)

Note : I am using the service that provides free news api, so please go to https://newsapi.org to register your own account to run the application. Replace API_KEY at the code line:

The price list is as follows https://newsapi.org/pricing

1. Android

 

In the ios demo, there was an autoplay video error. About this bug I will push the commit later because there is not much time right now

3. Instructions to view the full template

If you want to see all of what I wrote in the project, check out the commit I highlighted in red

II. Introduce

Unify build environment:

  • Node: v10.15.0
  • React Native: 0.61.2
  • Xcode: 11.1
  • Android Studio: 3.4.1
  • CocoaPods: 1.8.4
  • OS: macOS Catalina

Introduce the functions included in the demo:

III. Personal sharing

1. Problem loading images in the App

If you go from native Android to there will be wondering why I do not use any external library.

The reason is that the <Image> core already uses the Fresco library ( https://frescolib.org/ ) so you don’t have to worry about loading images on Android anymore; iOS is not necessary because Facebook has already processed it.

2. Talk about Crashlytics in React Native

Up to now, Bugsnag’s service crashlytics ( https://www.bugsnag.com/ ) is the best. So I want to introduce to you Bugsnag to make the bug fix process as simple as possible.

The reason for choosing Bugsnag is as follows : Bugsnag specifically reports crash lines on both Native code (java / kotlin or objective-c / swift) and Javascript code (thanks to sourcemap tool)

What about other services:

Also you can see the discussion in the link below for more details: https://www.reddit.com/r/reactnative/comments/a7kczu/status_of_react_native_crash_reporters_in_2019/

3. Type-checking types for React Native

I can only list the 2 most popular ones currently, TypeScript and Flow

  • Flow was developed by Facebook so Flow support for React Native is quite good
  • TypeScript developed by Microsoft. If anyone goes from OOP, using TypeScript is very fast and suitable for large projects

4. Redux vs Mobx

Currently, there is a new trend to use Mobx to make it easier for new developers to use and access than Redux. Below I have a comparison link for you https://www.educba.com/mobx-vs-redux/

III. References

  1. iOS main.jsbundle does not exist https://github.com/facebook/react-native/issues/25522
  2. jest-haste-map: Haste module naming collision: react-native https://github.com/react-native-community/async-storage/issues/169#issuecomment-538731342
  3. Splash: https://medium.com/handlebar-labs/how-to-add-a-splash-screen-to-a-react-native-app-ios-and-android-30a3cec835ae

https://github.com/crazycodeboy/react-native-splash-screen

  1. crashlytics: https://invertase.io/oss/react-native-firebase/v6/app/quick-start

https://invertase.io/oss/react-native-firebase/v6/crashlytics/quick-start

https://github.com/microsoft/appcenter/issues/75

https://www.bugsnag.com/platforms/react-native-error-reporting

Share the news now

Source : Viblo