React Native Template for Taro

Overview

React Native Template for Taro

requirement

  1. taro: @tarojs/cli@^3.2.0
  2. framework: 'react'

quick start

install react native library

install peerDependencies of @tarojs/taro-rn @tarojs/components-rn and @tarojs/router-rn, it will also run post-install. please modify and run upgradePeerdeps script when you change taro version.

run this script after project inited.

yarn upgradePeerdeps

pod install

run this script when you add new react native library or update react native library version.

see pod-install for more infomation.

yarn podInstall

start ios app

yarn ios

start android app

yarn android

start bundler

yarn start

more infomations

  1. development process of taro react native
  2. github

release

build ios bundle

yarn build:rn --platform ios

build Android bundle

yarn build:rn --platform android

release ios APP

see publishing-to-app-store for details.

release android apk

see signed-apk-android for details.

github workflows

use github actions to build your apps. this template include basic github action config.

see .github/workflows for details.

events

we assemble debug and release product for both android and ios when you push or pull request on master branch by default. design your own workflows by modify .github/workflows files.

see events-that-trigger-workflows

ios

configuration

Modify the following configuration items for package and publish your app.

.github/workflows/assemble_ios_debug.yml .github/workflows/assemble_ios_release.yml

env:
  APP_ID: com.taro.demo # Application Product Bundle Identifier
  APP_NAME: Taro Demo # The Display Name of your app
  VERSION_NUMBER: 1.0.0 # Application version number
  BUILD_NUMBER: 1.0.0.0 # Application build number, used by release only.
  TEAM_ID: XXXXXXXXXX # Team ID, is used when upgrading project
  PROVISIONING_PROFILE_SPECIFIER: Product_profile # Provisioning profile name to use for code signing
  CODE_SIGN_IDENTITY: iPhone Distribution # Code signing identity type (iPhone Developer, iPhone Distribution)
  SIGNING_CERTIFICATE_P12_DATA: ${{secrets.RELEASE_SIGNING_CERTIFICATE_P12_DATA}}
  SIGNING_CERTIFICATE_PASSWORD: ${{secrets.RELEASE_SIGNING_CERTIFICATE_PASSWORD}}
  PROVISIONING_PROFILE_DATA: ${{secrets.RELEASE_PROVISIONING_PROFILE_DATA}}
  APP_STORE_CONNECT_USERNAME: ${{secrets.APP_STORE_CONNECT_USERNAME}} # This secret should be set to the Apple ID of your developer account, used by release only.
  APP_STORE_CONNECT_PASSWORD: ${{secrets.APP_STORE_CONNECT_PASSWORD}} # used by release only.

values like ${{secrets.xxxxx}} are manually generated and store in your github encrypted secrets.

SIGNING_CERTIFICATE_P12_DATA

cat Certificates.p12 | base64 | pbcopy

SIGNING_CERTIFICATE_PASSWORD

encryption password of your Personal Information Exchange (.p12)

PROVISIONING_PROFILE_DATA

cat profile.mobileprovision | base64 | pbcopy

APP_STORE_CONNECT_PASSWORD

This secret should be set to an application-specific password for your Apple ID account. Follow these instructions to create an application-specific password.

Read more

  1. deploy an ios app to testflight or the app store using github actions
  2. encrypted-secrets
  3. fastlane

android

configuration

Modify the following configuration items for package and publish your app.

.github/workflows/assemble_android_debug.yml .github/workflows/assemble_android_release.yml

env:
  APP_ID: com.taro.demo  # Application Product Bundle Identifier
  APP_NAME: Taro Demo  # The Display Name of your app
  APP_ICON: ic_launcher  # The Application icon of your app
  APP_ROUND_ICON: ic_launcher_round  # The Application round icon of your app
  APP_ABI_FILTERS: armeabi-v7a, arm64-v8a # App abi filters
  VERSION_NAME: 1.0.0 # version name
  VERSION_CODE: 10 # version code
  KEYSTORE_FILE: debug.keystore # key store file
  KEYSTORE_PASSWORD: android # key store password
  KEYSTORE_KEY_ALIAS: androiddebugkey # key store key alias
  KEYSTORE_KEY_PASSWORD: android # key store key password

For the security of your app, please regenerate the .keystore file and store the password in your github encrypted secrets.

Read more

  1. app signing
  2. encrypted-secrets

links

  1. template source code
  2. sample project
You might also like...
Encryption/Decryption for React Native

@dhairyasharma/react-native-encryption Encryption/decryption for React Native. Benchmark File Details File Link http://bit.do/benchmarkfile File Size

iOS's Stocks App clone written in React Native for demo purpose (available both iOS and Android).
iOS's Stocks App clone written in React Native for demo purpose (available both iOS and Android).

FinanceReactNative iOS's Stocks App clone written in React Native for demo purpose (available both iOS and Android). Data is pulled from Yahoo Finance

React Native Photo Editor (RNPE)
React Native Photo Editor (RNPE)

React Native Photo Editor (RNPE) 🌄 Image editor using native modules for iOS an

Discover Movies and TV shows -  React Native
Discover Movies and TV shows - React Native

movieapp Discover Movies and TV shows Download APK file Download from Google Drive - v2.2.1 What's included Name Description React Native Build Native

All my React Native examples

ReactNativeExamples All my React Native examples and experiements can be found here. This repo is divided into two sub folders, Instructions git clone

React Native Twitch application
React Native Twitch application

Notes I'm going to rewrite this project 😉 . Be ready to new Twitch application. Twitch This project was built for The Rolling Scopes #18 meetup. As o

React Native Todo List example app which uses Redux for managing app state
React Native Todo List example app which uses Redux for managing app state

react-native-redux-todo-list A sample todo list app developed by using React Native and Redux. How to run the app Install react-native If you don't ha

A simple To Do application written in React Native

Example To Do List application in react-native Requirements, install as needed: React Native: $ npm i -g react-native-cli watchman: $ brew install wa

A property finder application written using React Native

React Native PropertyFinder App This repository accompanies the tutorial I published on Ray Wenderlich's website, which describes the process of build

Owner
null
React Native library that implements PayPal Checkout flow using purely native code (swift).

react-native-paypal-swift React Native library that implements PayPal Checkout flow using purely native code (swift). Installation npm install react-n

Tibb 6 Nov 28, 2022
Static Native Template and Dynamic Styling without any other app release

FileManager Project Students and Freshers, Good opportunity for you to learn and contribute in this project. Here you would learn how you can change t

Naveen Chauhan 3 Nov 30, 2021
A react native interface for integrating payments using Braintree

A react native interface for integrating payments using Braintree

eKreative 17 Dec 30, 2022
React Native 实现无侵入自定义下拉刷新组件

react-native-ly-refresh-control 下拉刷新 iOS 基于MJRefresh 通过RCTCustomRefreshContolProtocol实现RefreshControl组件封装 JS端可以无侵入自定义下拉刷新只需要替换对应的refreshControl Androi

少言 12 Jul 2, 2022
iOS 15 share play API in react-native

react-native-shareplay iOS 15 share play API in react-native Installation yarn add react-native-shareplay And go to Xcode Capabilities and enable "Gro

Popshop Live 27 Oct 16, 2022
React Native package for interacting with HomeKit devices

React Native package for interacting with HomeKit devices

Ibrahim Berat Kaya 4 Dec 24, 2021
react native esptouch

react-native-esptouch One should know that This is a Unofficial project. The official demo is below: EsptouchForAndroid EsptouchForIOS Getting started

五毛共和国 Wumaoland 0 Oct 25, 2021
A suite of IoT tools to use with React Native.

react-native-iot-tools WIP. A suite of IoT tools for React Native applications. Package iOS Android @react-native-iot-tools/bluetooth ✅ ❌ @react-nativ

Sara Pope 3 Oct 31, 2022
A testing MQTT react native library

react-native-awesome-testing abc Installation npm install react-native-awesome-testing Usage import { multiply } from "react-native-awesome-testing";

null 0 Nov 26, 2021
Encryption/Decryption for React Native

@dhairyasharma/react-native-encryption Encryption/decryption for React Native. Benchmark File Details File Link http://bit.do/benchmarkfile File Size

Dhairya Sharma 5 Sep 13, 2022