microsoft/react-native-code-push
, ensuring compatibility and stability.Supports React Native 0.74 ~ 0.80.
(Tested on the React Native CLI template apps)
If you have been using react-native-code-push
, replace the NPM package first.
npm remove react-native-code-push npm install @bravemobile/react-native-code-push
Then, follow the installation guide starting from '4. "CodePush-ify" your app'.
The following changes are optional but recommended for cleaning up the old configuration:
Info.plist
, strings.xml
, or JavaScript code.react-native-code-push
module settings from settings.gradle
.npm install @bravemobile/react-native-code-push(1) Install CocoaPods Dependencies
Run cd ios && pod install && cd ..
(npx pod-install
, bundle exec pod install --project-directory=./ios
, ..)
AppDelegate
Code
If you have AppDelegate.swift
(>= RN 0.77)
Add the following line to the bridging header file. (e.g. CodePushDemoApp-Bridging-Header.h
)
+ #import <CodePush/CodePush.h>
Then, edit AppDelegate.swift
like below.
@main class AppDelegate: RCTAppDelegate { override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool { // ... override func bundleURL() -> URL? { #if DEBUG RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index") #else - Bundle.main.url(forResource: "main", withExtension: "jsbundle") + CodePush.bundleURL() #endif } }
Or if you have AppDelegate.mm
+ #import <CodePush/CodePush.h> // ... - (NSURL *)bundleURL { #if DEBUG return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"]; #else - return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; + return [CodePush bundleURL]; #endif } @end(1) Edit
android/app/build.gradle
Add the following line to the end of the file.
// ... + apply from: "../../node_modules/@bravemobile/react-native-code-push/android/codepush.gradle"(2) Edit
MainApplication
Code
If you have MainApplication.kt
(>= RN 0.73)
+ import com.microsoft.codepush.react.CodePush class MainApplication : Application(), ReactApplication { override val reactNativeHost: ReactNativeHost = object : DefaultReactNativeHost(this) { // ... + override fun getJSBundleFile(): String = CodePush.getJSBundleFile() } // ... }
Or if you have MainApplication.java
// ... + import com.microsoft.codepush.react.CodePush public class MainApplication extends Application implements ReactApplication { private final ReactNativeHost mReactNativeHost = new DefaultReactNativeHost(this) { // ... + @Override + override fun getJSBundleFile(): String { + return CodePush.getJSBundleFile() + } }; // ... }
For Expo projects, you can use the automated config plugin instead of manual setup.
Add plugin to your Expo configuration:
// app.config.js export default { expo: { plugins: ["@bravemobile/react-native-code-push"], }, };
Run prebuild to apply changes:
Note
The plugin automatically handles all native iOS and Android code modifications. No manual editing of AppDelegate, MainApplication, or gradle files is required.
Requirements Expo SDK: 50.0.0 or higher
5. "CodePush-ify" Your AppThe root component of your app should be wrapped with a higher-order component.
You should also pass configuration options, including the implementation of the releaseHistoryFetcher
function. This function is used to find the latest CodePush update within the ReleaseHistoryInterface
data.
To enable this, you need to create a release history using the CLI tool and upload it to the remote. (The following steps explain more about the CLI.)
At runtime, the library fetches this information to keep the app up to date.
import CodePush, { ReleaseHistoryInterface, UpdateCheckRequest, } from "@bravemobile/react-native-code-push"; // ... MyApp Component async function releaseHistoryFetcher( updateRequest: UpdateCheckRequest, ): Promise<ReleaseHistoryInterface> { // Fetch release history for current binary app version. // You can implement how to fetch the release history freely. (Refer to the example app if you need a guide) const {data: releaseHistory} = await axios.get<ReleaseHistoryInterface>( `https://your.cdn.com/histories/${platform}/${identifier}/${updateRequest.app_version}.json`, ); return releaseHistory; } export default CodePush({ checkFrequency: CodePush.CheckFrequency.MANUAL, // or something else releaseHistoryFetcher: releaseHistoryFetcher, })(MyApp);
Note
The URL for fetching the release history should point to the resource location generated by the CLI tool.
Please refer to the CodePushOptions type for more details.
CodePush.SyncStatus.UNKNOWN_ERROR
status)Tip
For a more detailed and practical example, refer to the CodePushDemoApp
in example
directory. (link)
(1) Create a code-push.config.ts
file in the root directory of your project.
Then, implement three functions to upload the bundle file and create/update the release history. The CLI tool uses these functions to release CodePush updates and manage releases. (These functions are not used at runtime by the library.)
You can copy and paste the following code and modify it as needed.
import { CliConfigInterface, ReleaseHistoryInterface, } from "@bravemobile/react-native-code-push"; const Config: CliConfigInterface = { bundleUploader: async ( source: string, platform: "ios" | "android", identifier, ): Promise<{downloadUrl: string}> => { // ... }, getReleaseHistory: async ( targetBinaryVersion: string, platform: "ios" | "android", identifier, ): Promise<ReleaseHistoryInterface> => { // ... }, setReleaseHistory: async ( targetBinaryVersion: string, jsonFilePath: string, releaseInfo: ReleaseHistoryInterface, platform: "ios" | "android", identifier, ): Promise<void> => { // ... }, }; module.exports = Config;
bundleUploader
downloadUrl
returned by this function is recorded in ReleaseHistoryInterface
data and is used by the library runtime to download the bundle file from this URL.release
command.getReleaseHistory
show-history
command.release
command.update-history
command.(Similar to the releaseHistoryFetcher
function in the library runtime options.)
setReleaseHistory
jsonFilePath
or calls an API using releaseInfo
metadata.create-history
command.release
command.update-history
command.(2) For code-push.config.ts
(TypeScript) to work properly, you may need to update your tsconfig.json
.
{ "extends": "@react-native/typescript-config/tsconfig.json", // ... + "ts-node": { + "compilerOptions": { + "module": "CommonJS", + "types": ["node"] + } + } }
Tip
You can use --help
command to see the available commands and options.
(interactive mode not supported yet)
Create a new release history for a specific binary app version.
Example:
1.0.0
.npx code-push create-history --binary-version 1.0.0 --platform ios --identifier staging
Display the release history for a specific binary app version.
Example:
1.0.0
.npx code-push show-history --binary-version 1.0.0 --platform ios --identifier staging
Release a CodePush update for a specific binary app version.
Example:
1.0.1
targeting the binary app version 1.0.0
.npx code-push release --binary-version 1.0.0 --app-version 1.0.1 \ --platform ios --identifier staging --entry-file index.js \ --mandatory true # Expo project npx code-push release --framework expo --binary-version 1.0.0 --app-version 1.0.1 --platform ios
--framework
(-f
) : Framework type (expo)--binary-version
: The version of the binary app that the CodePush update is targeting.--app-version
: The version of the CodePush update itself.Important
--app-version
should be greater than --binary-version
(SemVer comparison).
Update the release history for a specific CodePush update.
--enable
option to disable a specific release for rollback. (or enable it)--mandatory
option to make the update as mandatory or optional.Example:
1.0.1
(targeting the binary app version 1.0.0
).npx code-push update-history --binary-version 1.0.0 --app-version 1.0.1 \ --platform ios --identifier staging \ --enable false
Create a CodePush bundle file.
Example:
npx code-push bundle --platform android --entry-file index.js # Expo project npx code-push bundle --framework expo --platform android --entry-file index.js
--framework
(-f
): Framework type (expo)By default, the bundle file is created in the /build/bundleOutput
directory.
Note
For Expo projects, the CLI uses expo export:embed
command for bundling instead of React Native's bundle command.
(The file name represents a hash value of the bundle content.)
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4