Skip to content

A React Native project boilerplate for producing reliable applications.

License

Notifications You must be signed in to change notification settings

chellongCoder/React-Native-Saga-Template

 
 

Repository files navigation

Logo

Release Date Version TypeScript Support Dark Theme Setup Firebase Code-Push Integrated Push Notifications Redux Offline Storage Splash Screen Multilingual Support Maintained

Base project

Project là 1 React Native boilerplate giúp khởi động 1 dự án react native 1 cách nhanh nhất

Project cung cấp 1 Kiến trúc phát triển mobile đa nền tảng Phân tách tầng UI và tầng Logic. Dưới đây là những ghi chú để có thể sử dụng project 1 cách hiệu quả nhất.

Kiến trúc

The main purpose of the Architecture of the boilerplate is the separation of concerns Mục tiêu chính của kiến trúc là phân tách các phần của project.

  • phân tách giữa componentsscreens.

  • State được quản lý qua Redux stores.

  • các logic khác của ứng dụng (API calls, etc.) được phân tách khỏi UIstate thông qua Redux Saga.

Các thư viện liên qua

gồm có:

Note: ...

Directory layout

Yêu cầu

Môi trường node 8 hoặc cao hơn. Yêu cầu Xcode 10 trở lên

Cài đặt môi trường để phát triển ứng dụng cross platform

Các sử dụng base project

Để tạo 1 project mới sử dụng base:

  • Clone Project

  • Xoá git: rm -rf .git/

  • Install thư viện yarn or npm install

  • Rename the React Native project (Without custom Bundle Identifier)

    yarn run rename -- <YourProjectName> or npm run rename -- <YourProjectName> (the default name is BaseProject)

  • Đổi tên project (với Bundle Identifier, chỉ trên Android. với iOS, dùng Xcode)

    yarn run rename -- <YourProjectName> -b <bundleIdentifier> or npm run rename -- <YourProjectName> -b <bundleIdentifier> (the default name is BaseProject)

  • Chỉ cần cung cấp FacebookAppIDFacebookLoginProtocolScheme rồi vất vào .env.staging và .env.production.

    Logo
  • Để bắn noti cho android và login bằng google hãy import google-services.json into android/app

  • Để bắn noti cho ios và login bằng google hãy import GoogleService-Info.plist vào project trong xcode và lấy REVERSED_CLIENT_ID trong GoogleService-Info.plist để vào .env.staging.env.production

    Logo
  • Tải 2 file này về vất và firebase

    Logo
    Logo
  • Setup code-push cho phát triển ứng dụng Tạo trên appcenter với os="Android" and platform="React Native" . Sau khi tạo xong app sẽ có secret key, vất nó vào android/app/src/main/assets/appcenter-config.json. Kích vào Distribute ở side menu trong appcenter, click code push, nó sẽ tạo cho 2 key là production và staging. vất key production vào .env.production vất key staging vào .env.staging

  • Setup code-push cho phát triển ứng dụng Tạo trên appcenter với os="iOS" and platform="React Native" . Sau khi tạo xong app sẽ có secret key, vất nó vào AppCenter-Config.plist. Kích vào Distribute ở side menu trong appcenter, click code push, nó sẽ tạo cho 2 key là production và staging. vất key production vào .env.production vất key staging vào .env.staging

Commit đầu tiên lên git bằng cách git init > commit > push

Running the project

  • yarn or npm install
  • Run the following steps for your platform

Android

  • đầu tiên để chạy android, phải generate debug.key:
    • cd android/app
    • keytool -genkey -v -keystore debug.keystore -storepass android -alias androiddebugkey -keypass android -keyalg RSA -keysize 2048 -validity 10000
    • cd ../.. quay về root folder
  • yarn start or npm install để start bundle
  • yarn run android or npm run android Để start android app (Nhớ cắm đt hoặc chạy máy ảo)

iOS

  • cd ios
  • pod install để kéo dependencies
  • cd .. quay về root folder
  • react-native run-ios Để start ios app (Nhớ cắm đt hoặc chạy máy ảo)

Useful documentation

CodePush is an App Center cloud service that enables Apache Cordova and React Native developers to deploy mobile app updates directly to their users’ devices.

Google Sign-In is a secure authentication system that reduces the burden of login for your users, by enabling them to sign in with their Google Account—the same account they already use with Gmail, Play, and other Google services.

The Facebook SDK for is the easiest way to integrate your app with Facebook. It enables:

  • Facebook Analytics - Understand how people are using your product.
  • Facebook Login - Authenticate people with their Facebook credentials.
  • Share and Send dialogs - Enable sharing content from your app to Facebook.
  • App Events - Log events in your application.
  • Graph API - Read and write to Graph API.

I18next is an internationalization-framework written in and for JavaScript. But it's much more than that.

i18next goes beyond just providing the standard i18n features such as (plurals, context, interpolation, format). It provides you with a complete solution to localize your product from web to mobile and desktop.

Firebase-crashlytics

License

This project is released under the MIT License.

Why this boilerplate?

I looked into existing boilerplates before starting this project, and while many of them are awesome, But every boilerplate was lacking something, so I come up with a boilerplate that has all the features that modern app needed. For example

  • React Native Latest Stable Version (v0.62.3)
  • Great Architecture
  • React Navigation 5 Integrated
  • Redux Integrated
  • Redux Saga Integrated
  • Redux Persist Integrated
  • Firebase SDK Integrated
  • Facebook SDK Integrated
  • Google Sign-in SDK Integrated
  • Code-Push SDK Integrated
  • Push Notifications Integratd
  • Theme Integrated
  • Multilingual Integrated
  • Splash Screen Integrated
  • Vector Icons Integrated
  • TypeScript Support

About

A React Native project boilerplate for producing reliable applications.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 64.3%
  • Java 10.0%
  • Objective-C 8.4%
  • Ruby 8.1%
  • Shell 5.7%
  • Starlark 2.7%
  • Other 0.8%