chore: update the example app

Author: Augustach

example/.env.template

@@ -0,0 +1,2 @@
+CODEPUSH_DEPLOYMENT_KEY_ANDROID=
+CODEPUSH_DEPLOYMENT_KEY_IOS=

example/.gitignore

@@ -78,3 +78,5 @@ android/keystores/debug.keystore
 lib/
 
 **/.xcode.env.local
+
+.env

example/android/app/build.gradle

@@ -117,3 +117,5 @@ dependencies {
         implementation jscFlavor
     }
 }
+
+apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"

example/android/app/src/main/java/com/codepushdiffexample/MainApplication.kt

@@ -10,6 +10,7 @@ import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
 import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
 import com.facebook.react.defaults.DefaultReactNativeHost
 import com.facebook.soloader.SoLoader
+import com.microsoft.codepush.react.CodePush
 
 class MainApplication : Application(), ReactApplication {
 
@@ -25,6 +26,10 @@ class MainApplication : Application(), ReactApplication {
 
         override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
 
+        override fun getJSBundleFile(): String {
+            return CodePush.getJSBundleFile() 
+        }
+
         override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
         override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
       }

example/android/app/src/main/res/values/strings.xml

@@ -1,3 +1,4 @@
 <resources>
     <string name="app_name">CodePushDiffExample</string>
+    <string moduleConfig="true" name="CodePushDeploymentKey">DeploymentKey</string>
 </resources>

example/android/settings.gradle

@@ -5,3 +5,6 @@ extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autoli
 rootProject.name = 'CodePushDiffExample'
 include ':app'
 includeBuild('../node_modules/@react-native/gradle-plugin')
+
+include ':app', ':react-native-code-push'
+project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

example/babel.config.js

@@ -7,6 +7,7 @@ const root = path.resolve(__dirname, '..')
 module.exports = getConfig(
   {
     presets: ['module:@react-native/babel-preset'],
+    plugins: [['module:react-native-dotenv']],
   },
   { root, pkg }
 )

example/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "react": "18.3.1",
     "react-native": "0.75.4",
+    "react-native-code-push": "^9.0.0",
     "react-native-code-push-diff": "workspace:*"
   },
   "devDependencies": {
@@ -25,7 +26,8 @@
     "appcenter-cli": "^2.14.0",
     "babel-plugin-module-resolver": "^5.0.0",
     "pod-install": "^0.1.0",
-    "react-native-builder-bob": "^0.30.2"
+    "react-native-builder-bob": "^0.30.2",
+    "react-native-dotenv": "^3.4.11"
   },
   "engines": {
     "node": ">=18"

example/src/App.tsx

@@ -1,14 +1,48 @@
-import * as React from 'react'
+import React, { useState, useEffect } from 'react'
+import CodePush, { type LocalPackage } from 'react-native-code-push'
 
-import { StyleSheet, View } from 'react-native'
+import { StyleSheet, View, Image, Text, Platform } from 'react-native'
+
+const useGetCodePushVersion = () => {
+  const [version, setVersion] = useState<LocalPackage | null>(null)
+  useEffect(() => {
+    CodePush.getUpdateMetadata().then(setVersion)
+  }, [])
+  return version
+}
+
+const useInstallCodePushUpdate = () => {
+  useEffect(() => {
+    CodePush.sync({
+      deploymentKey: Platform.select({
+        ios: process.env.CODEPUSH_DEPLOYMENT_KEY_IOS,
+        android: process.env.CODEPUSH_DEPLOYMENT_KEY_ANDROID,
+      }),
+      installMode: CodePush.InstallMode.IMMEDIATE,
+    })
+  }, [])
+}
 
 export default function App() {
-  return <View style={styles.container} />
+  useInstallCodePushUpdate()
+  const version = useGetCodePushVersion()
+
+  const imageUri = Image.resolveAssetSource(require('./image.png')).uri
+
+  return (
+    <View style={styles.container}>
+      <Text>CodePush Version: {version?.label ?? 'N/A'}</Text>
+      <Text>Image URI: {imageUri}</Text>
+      <Image source={require('./image.png')} />
+    </View>
+  )
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    padding: 20,
+    gap: 20,
     alignItems: 'center',
     justifyContent: 'center',
   },