Feature: Automated Expo PR Builds

.github/workflows/mobile.yml

@@ -86,11 +86,42 @@ jobs:
         working-directory: ./my_project/mobile
         run: npm install
 
+      - name: Set Variables
+        id: set-vars
+        run: |
+          echo "backend_url=${{ github.event.deployment_status.environment_url }}" >> $GITHUB_ENV
+          echo "PR_NUMBER=$(echo ${{ github.event.deployment_status.environment_url }} | grep -oP '(?<=pr-)\d+')" >> $GITHUB_ENV
+          echo "REPO_NAME=$(echo ${{ github.repository }} | tr '[:upper:]' '[:lower:]' | sed 's/[^a-z0-9._-]//g')" >> $GITHUB_ENV
+          echo "EXPO_CHANNEL=$(echo ${{ github.repository }}-$(echo ${{ github.event.deployment_status.environment_url }} | grep -oP '(?<=pr-)\d+') | tr '[:upper:]' '[:lower:]' | sed 's/[^a-z0-9._-]//g')" >> $GITHUB_ENV
       - name: 🚀 Publish preview
         working-directory: ./my_project/mobile
         run: |
-          eas update --branch="${{ github.event.deployment_status.environment_url }}" --non-interactive --auto
-          echo "${{ env.BACKEND_SERVER_URL }} and ${{ github.event.deployment_status.environment_url }}"
+          eas update --branch=$EXPO_CHANNEL --non-interactive --auto
         env:
           EXPO_PUBLIC_BACKEND_SERVER_URL: "${{ github.event.deployment_status.environment_url }}"
-          EXPO_PUBLIC_ROLLBAR_ACCESS_TOKEN: "1a19e5da05b2435b802d5a81aba2bbd7"
+          EXPO_PUBLIC_ROLLBAR_ACCESS_TOKEN: "1a19e5da05b2435b802d5a81aba2bbd7"
+
+      - name: Update EAS Config
+        working-directory: ./my_project/mobile
+        run: |
+            jq --arg pr_number "$PR_NUMBER" --arg expo_channel "$EXPO_CHANNEL" '.build["review_" + $pr_number] = {
+              "developmentClient": true,
+              "distribution": "internal",
+              "channel": $expo_channel,
+              "env": {
+                "BACKEND_SERVER_URL": "${{ github.event.deployment_status.environment_url }}",
+                "ROLLBAR_ACCESS_TOKEN": "1a19e5da05b2435b802d5a81aba2bbd7",
+                "SENTRY_DSN": "https://a7cea97f07ac42fa9e28800b037997c9@o4504899535962112.ingest.sentry.io/4504906332897280",
+              }
+            }' eas.json > tmp.$$.json && mv tmp.$$.json eas.json
+
+      - name: Display Updated EAS Config
+        working-directory: ./my_project/mobile
+        run: cat eas.json
+
+      # note: you will need to register your device first using eas device:create & eas credentials to test this  
+      - name: 🔨 Build & Update App
+        working-directory: ./my_project/mobile
+
+        run: |
+          eas build --platform ios --profile review_${PR_NUMBER} && eas update --branch=$EXPO_CHANNEL --non-interactive --auto

{{cookiecutter.project_slug}}/clients/mobile/react-native/Config.d.ts

@@ -6,5 +6,8 @@ declare const Config: {
   sentryDSN: string
   isExpoGo?: boolean
 }
-
+declare const vars :{
+  [key:string]: any
+}
 export default Config
+export { vars }

{{cookiecutter.project_slug}}/clients/mobile/react-native/Config.js

@@ -73,4 +73,13 @@ const ENV = () => {
 }
 
 const Config = { ...ENV() }
-export default Config
+export default Config
+
+export const vars = {
+  BACKEND_SERVER_URL,
+  SENTRY_DSN,
+  ROLLBAR_ACCESS_TOKEN,
+  backendServerUrl,
+  rollbarAccessToken,
+  sentryDSN,
+}

{{cookiecutter.project_slug}}/clients/mobile/react-native/eas.json

@@ -10,7 +10,6 @@
       "channel": "development",
       "env": {
         "BACKEND_SERVER_URL": "<REPLACE_WITH_LOCAL_BACKEND_SERVER_URL>",
-        "BUILD_ENV": "development",
         "ROLLBAR_ACCESS_TOKEN": "<REPLACE_WITH_LOCAL_ROLLBAR_TOKEN>",
         "SENTRY_DSN": "<REPLACE_WITH_LOCAL_SENTRY_DSN>"
       }
@@ -21,7 +20,6 @@
       "channel": "review",
       "env": {
         "BACKEND_SERVER_URL": "<REPLACE_WITH_REVIEW_APP_BACKEND_SERVER_URL>",
-        "BUILD_ENV": "review",
         "ROLLBAR_ACCESS_TOKEN": "<REPLACE_WITH_REVIEW_APP_ROLLBAR_TOKEN>",
         "SENTRY_PROJECT_NAME": "<REPLACE_WITH_REVIEW_APP_SENTRY_PROJECT_NAME>",
         "SENTRY_DSN": "<REPLACE_WITH_REVIEW_APP_SENTRY_DSN>"
@@ -33,7 +31,6 @@
       "channel": "development",
       "env": {
         "BACKEND_SERVER_URL": "<REPLACE_WITH_LOCAL_BACKEND_SERVER_URL>",
-        "BUILD_ENV": "development",
         "ROLLBAR_ACCESS_TOKEN": "<REPLACE_WITH_LOCAL_ROLLBAR_TOKEN>",
         "SENTRY_DSN": "<REPLACE_WITH_LOCAL_SENTRY_DSN>"
       },
@@ -46,7 +43,6 @@
       "channel": "staging",
       "env": {
         "BACKEND_SERVER_URL": "<REPLACE_WITH_STAGING_BACKEND_SERVER_URL>",
-        "BUILD_ENV": "staging",
         "ROLLBAR_ACCESS_TOKEN": "<REPLACE_WITH_STAGING_ROLLBAR_TOKEN>",
         "SENTRY_DSN": "<REPLACE_WITH_STAGING_SENTRY_DSN>"
       }
@@ -56,7 +52,6 @@
       "autoIncrement": true,
       "env": {
         "BACKEND_SERVER_URL": "<REPLACE_WITH_PRODUCTION_BACKEND_SERVER_URL>",
-        "BUILD_ENV": "production",
         "ROLLBAR_ACCESS_TOKEN": "<REPLACE_WITH_PRODUCTION_ROLLBAR_TOKEN>",
         "SENTRY_DSN": "<REPLACE_WITH_PRODUCTION_SENTRY_DSN>"
       }

{{cookiecutter.project_slug}}/clients/mobile/react-native/src/screens/main.tsx

@@ -1,6 +1,10 @@
 import { Dimensions, Image, StyleSheet, View } from 'react-native'
 import logo from '@assets/tn-logo.png'
 import { Text } from '@components/text'
+import { BButton } from '@components/Button'
+import { SheetManager } from 'react-native-actions-sheet'
+import { SHEET_NAMES } from '@components/sheets'
+import { vars } from '../../Config'
 
 const { height } = Dimensions.get('screen')
 
@@ -16,6 +20,14 @@ const styles = StyleSheet.create({
 })
 
 export const Main = () => {
+  const onOpenSheet = () => {
+    SheetManager.show(SHEET_NAMES.test, {
+      payload: {
+        input: JSON.stringify(vars),
+      },
+    })
+  }
+
   return (
     <View className="flex-grow items-center justify-center">
       <View className="items-center justify-center">
@@ -26,6 +38,7 @@ export const Main = () => {
           Welcome to my project
         </Text>
       </View>
+      <BButton label="Open sheet" onPress={onOpenSheet} variant="primary" />
     </View>
   )
 }