Taro React Native Project Update: Simplified Setup, Templates, and CI/CD with GitHub Actions
The article introduces major updates to the Taro React Native open‑source project, including a new react‑native template, GitHub Actions integration for automated builds, a Taro Playground app for debugging, and detailed CI/CD configurations to lower entry barriers for mobile app development.
Background – Taro 3.2.0 was released six months ago and has seen growing community adoption. Developers reported difficulties with complex environment configuration, incomplete components/APIs, and bugs, especially the need to manage four separate native environments (Android, iOS, React Native, Taro).
To address these pain points, three optimization directions were taken:
Provide a react-native template for Taro, allowing project initialization with a few commands.
Integrate GitHub Actions so that local native environments are no longer required; CI handles packaging and publishing.
Offer a Taro Playground app (downloadable from app stores or GitHub) for project debugging.
React‑Native Development Template
New developers previously had to manage two repositories (the Taro project and a native shell). The template consolidates them, letting users run taro init [project] --template react-native . Common commands after initialization include:
# Update peer dependencies after init or Taro version upgrade
$ yarn upgradePeerdeps
# Build JS bundle and assets
$ yarn build:rn --platform ios
# Start bundle server
$ yarn start
# Launch iOS simulator
$ yarn ios
# Launch Android emulator
$ yarn androidThese commands streamline development and reduce setup friction.
GitHub Actions Integration
The CI workflow automates building and publishing. Environment variables are defined in the workflow, for example:
env:
APP_ID: com.taro.demo # Application ID
APP_NAME: Taro Demo # Application name
VERSION_NAME: 1.0.0 # Version number
VERSION_CODE: 10 # Incremental build number
KEYSTORE_FILE: debug.keystore # Signing file
KEYSTORE_PASSWORD: android # Password
KEYSTORE_KEY_ALIAS: androiddebugkey # Alias
KEYSTORE_KEY_PASSWORD: android # Alias passwordSensitive data such as signing certificates are stored as encrypted GitHub secrets and imported during the workflow, e.g.:
security import <(echo $SIGNING_CERTIFICATE_P12_DATA | base64 --decode) \
-f pkcs12 \
-k build.keychain \
-P $SIGNING_CERTIFICATE_PASSWORD \
-T /usr/bin/codesignThe shell project (taro‑native‑shell) is merged into the main repository, dependencies are symlinked, and the compiled JS bundle is moved to the native project: ln -s ./node_modules ./taro-native-shell/node_modules Build outputs are then uploaded as artifacts: # iOS upload - name: Upload iOS Products uses: actions/upload-artifact@v2 with: name: app-${{ env.BUILD_TYPE }} path: | ${{ github.workspace }}/ios/taroDemo.ipa ${{ github.workspace }}/ios/taroDemo.app.dSYM.zip # Android upload - name: Upload Android Products uses: actions/upload-artifact@v2 with: name: app-${{ env.BUILD_TYPE }} path: ${{ github.workspace }}/android/app/build/outputs/apk/${{ env.BUILD_TYPE }}/app-${{ env.BUILD_TYPE }}.apk For iOS, the workflow also supports fastlane to handle provisioning profiles, certificates, and App Store upload. iOS Packaging with Fastlane Fastlane automates signing, version bumping, and upload. Certificates are base64‑encoded, stored as secrets, and imported before the build. Android Packaging Android builds use Gradle wrapper commands; signing keys are generated with: keytool -genkey -alias android -keyalg RSA -validity 99999 -keystore release.keystore Build parameters are passed via -P flags, e.g. ./gradlew assembleDebug -Papp_id=${{ env.APP_ID }} . Taro Playground App The Playground app demonstrates components and APIs, and allows dynamic loading of JS bundles for local debugging. Developers can download the APK/iOS app from the releases page or scan QR codes. Running yarn dev:rn --qr starts a bundler server; scanning the displayed QR code with the Playground app loads the bundle over the same LAN. Conclusion These optimizations—template initialization, CI/CD automation, and the Playground debugging app—dramatically lower the cost of developing Taro‑based mobile applications. Users only need familiarity with Taro and React Native to build and publish apps, while the provided tooling handles the heavy lifting of environment setup, signing, and deployment.
58 Tech
Official tech channel of 58, a platform for tech innovation, sharing, and communication.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.