{"id":21506753,"url":"https://github.com/gupta-ji6/react-native-codepush-sample","last_synced_at":"2025-04-23T22:27:13.903Z","repository":{"id":40421912,"uuid":"248209279","full_name":"gupta-ji6/react-native-codepush-sample","owner":"gupta-ji6","description":"A sample project to test OTA updates via CodePush integration in React Native (which worked :tada:)","archived":false,"fork":false,"pushed_at":"2023-03-04T03:50:30.000Z","size":75879,"stargazers_count":2,"open_issues_count":7,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-30T04:11:16.297Z","etag":null,"topics":["appcenter","codepush","react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gupta-ji6.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-18T11:09:51.000Z","updated_at":"2024-04-24T14:10:31.000Z","dependencies_parsed_at":"2025-01-24T00:37:18.384Z","dependency_job_id":null,"html_url":"https://github.com/gupta-ji6/react-native-codepush-sample","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gupta-ji6%2Freact-native-codepush-sample","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gupta-ji6%2Freact-native-codepush-sample/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gupta-ji6%2Freact-native-codepush-sample/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gupta-ji6%2Freact-native-codepush-sample/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gupta-ji6","download_url":"https://codeload.github.com/gupta-ji6/react-native-codepush-sample/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250525448,"owners_count":21445065,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["appcenter","codepush","react-native"],"created_at":"2024-11-23T19:47:13.361Z","updated_at":"2025-04-23T22:27:13.879Z","avatar_url":"https://github.com/gupta-ji6.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-codepush-sample\n\n[![Build status](https://build.appcenter.ms/v0.1/apps/206e52db-35f0-413d-aa6c-51a1319c3ddc/branches/master/badge)](https://appcenter.ms)\n![Twitter Follow](https://img.shields.io/twitter/follow/_guptaji_?label=Follow\u0026style=social)\n![GitHub followers](https://img.shields.io/github/followers/gupta-ji6?label=Follow\u0026style=social)\n[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/gupta-ji6/react-native-codepush-sample/issues)\n\nA sample project to test [CodePush (now called App Center)](https://appcenter.ms) integration in React Native, which worked successfully :tada:.\n\n## What is App Center (previously CodePush)?\n\n[CodePush](https://appcenter.ms/) is a service by Microsoft to deliver OTA updates on React Native applications which gives mobile applications a web-like agility.\n\n## Get Started with App Center\n\n### Prerequisites\n\n1. [App Center](https://appcenter.ms/) account (prefer signing in with GitHub).\n2. [React Native](https://reactnative.dev/docs/getting-started) setup.\n\nCreate a React Native app using [react-native-cli](https://www.npmjs.com/package/react-native-cli) and push the code to a GitHub repo.\n\n```lang-sh\nreact-native init CodePushRN    # initialize a new React Native Project\ncd CodePushRN                   # switch to project directory\nreact-native run-android        # run app in device/simulator\n\n# pushing code to GitHub repo (say we name it react-native-codespush-sample)\n\ngit remote add origin \u003cGitHub repo URL\u003e\ngit add .\ngit commit -m \":tada: Initailised React Native project\"\ngit push origin master\n```\n\nYour app on device/simulator should look like below.\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/21218732/77157164-d4886980-6ac6-11ea-8261-ffac168de7c6.jpg\" height=\"400\" width=\"auto\"\u003e\n\u003c/p\u003e\n\n### Adding app in App Center\n\n1. Login to [App Center](http://appcenter.ms/) and click on '**Add new app**' button.\n1. Fill the details according to your requirements. Sample inputs -\n\n    | Label        |    Input     |\n    | ------------ | :----------: |\n    | App Name     |  CodePushRN  |\n    | Release Type |     Beta     |\n    | OS           |   Android    |\n    | Platform     | React Native |\n\n1. Click '**Add new app**' button.\n1. Add App Center SDK in your app as instructed in '**Overview**' section, if needed.\n1. Go to '**Build**' section to connect your repo.\n1. Select '**GitHub**' service and select your repo.\n1. Select `master` branch and click on the gear icon (settings) at the end of the item.\n\n    - Build Variant - Release\n    - Node.js version - 12.x\n    - Sign Builds - On\n    - Check '**My Gradle settings are...**' (**only for test purpose**)\n    - Distribute Builds - On\n\n1. Click '**Save \u0026 Build**'.\n1. After successful build, you'll receive a mail from App Center to install the APK on the device.\n1. Install APK on device.\n\n## Setup App Center CLI\n\n```lang-sh\nnpm install -g appcenter-cli    # Install appcenter\nappcenter login                 # Login to appcenter\n```\n\nCopy authentication code opened in browser and paste in terminal prompt.\n\n### Create Deployment\n\n1. Select **Distribute** \u003e **Codepush**.\n2. Click **Create standard deployments**.\n\n### Plugin Installation (Android)\n\n\u003e Refer the [documentation](https://docs.microsoft.com/en-us/appcenter/distribution/codepush/react-native) for other platform guides.\n\n#### Plugin Installation and Configuration for React Native 0.60 version and above (Android)\n\n1. In your `android/app/build.gradle` file, add the `codepush.gradle` file as an additional build task definition underneath `react.gradle`:\n\n    ```gradle\n    ...\n    apply from: \"../../node_modules/react-native/react.gradle\"\n    apply from: \"../../node_modules/react-native-code-push/android/codepush.gradle\"\n    ...\n    ```\n\n2. Update the `MainApplication.java` file to use CodePush via the following changes:\n\n    ```java\n    ...\n    // 1. Import the plugin class.\n    import com.microsoft.codepush.react.CodePush;\n    public class MainApplication extends Application implements ReactApplication {\n        private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {\n            ...\n            // 2. Override the getJSBundleFile method in order to let\n            // the CodePush runtime determine where to get the JS\n            // bundle location from on each app start\n            @Override\n            protected String getJSBundleFile() {\n                return CodePush.getJSBundleFile();\n            }\n        };\n    }\n    ```\n\n3. Get Staging and Production keys from the terminal.\n\n    `appcenter codepush deployment list --app gupta-ji6/CodePushRN -k`\n\n4. Add the **Staging** Deployment key to `strings.xml`:\n\n   ```xml\n   \u003cresources\u003e\n     \u003cstring name=\"app_name\"\u003eAppName\u003c/string\u003e\n     \u003cstring moduleConfig=\"true\" name=\"CodePushDeploymentKey\"\u003eDeploymentKey\u003c/string\u003e\n    \u003c/resources\u003e\n    ```\n\n5. Install \u0026 link [`react-native-code-push'](https://github.com/microsoft/react-native-code-push)\n\n    ```lang-sh\n    npm install --save react-native-code-push # Install the code push client sdk\n    react-native link react-native-code-push  # Link this npm with the natvie build\n    ```\n\n## Plugin Usage\n\n1. Go to `App.js` and import `react-native-code-push` module:\n\n    `import codePush from \"react-native-code-push\";`\n\n2. Add a Touchable Opacity with a corresponding handler.\n\n    ```jsx\n    \u003cTouchableOpacity onPress={this.onButtonPress}\u003e\n    \u003cText\u003eCheck for updates\u003c/Text\u003e\n    \u003c/TouchableOpacity\u003e\n    ```\n\n    ```javascript\n    onButtonPress() {\n        codePush.sync({\n        updateDialog: true,\n        installMode: codePush.InstallMode.IMMEDIATE\n        });\n    }\n    ```\n\n3. Make the above changes and check in the code in the remote git repo.\nThis will trigger a build automatically in the app center and we’ll receive a mail with the new download link for the updated app. Once installed, it’ll look something like this.\n\n    \u003cp align=\"center\"\u003e\n        \u003cimg src=\"https://user-images.githubusercontent.com/21218732/77157721-ecacb880-6ac7-11ea-869e-0e5bc9c11d2c.jpg\" height=\"400\" width=\"auto\"\u003e\n    \u003c/p\u003e\n\n## Releasing Update with App Center CLI\n\nOnce your app has been configured and distributed to your users, and you have made some JS and/or asset changes, it's time to instantly release them! ([*See More*](https://docs.microsoft.com/en-us/appcenter/distribution/codepush/react-native#releasing-updates))\n\n1. Change some text/component in your code.\n\n2. Run:\n\n    ```lang-sh\n    appcenter codepush release-react -a \u003cownerName\u003e/\u003cappName\u003e\n\n    appcenter codepush release-react -a gupta-ji6/CodePushRN -d Staging #for staging\n    appcenter codepush release-react -a gupta-ji6/CodePushRN -d Production #for production\n    ```\n\n3. Reopen the latest mobile app installed.\n4. Click on **Check for updates** button.\n5. Click **Install** on prompt.\n\n    \u003cp align=\"center\"\u003e\n        \u003cimg src=\"https://user-images.githubusercontent.com/21218732/77158395-3944c380-6ac9-11ea-8fe9-01feb7b892ca.jpg\" height=\"400\" width=\"auto\"\u003e\n    \u003c/p\u003e\n\n6. Voila! :tada: You'll see your updated changes after the app reopens.\n\n    \u003cp align=\"center\"\u003e\n        \u003cimg src=\"https://user-images.githubusercontent.com/21218732/77157934-56c55d80-6ac8-11ea-8042-4b6bfdfdff41.jpg\" height=\"400\" width=\"auto\"\u003e\n    \u003c/p\u003e\n\n## Further Reading\n\n- [Visual Studio App Center documentation](https://docs.microsoft.com/en-us/appcenter/)\n- [microsoft/react-native-code-push](https://github.com/Microsoft/react-native-code-push#codepush)\n- [microsoft/code-push](https://github.com/Microsoft/code-push)\n- [code-push-cli](https://www.npmjs.com/package/code-push-cli)\n- [React Native updates with VS App Center CodePush](https://codeburst.io/react-native-updates-with-vs-app-center-codepush-3d56ef07f1c4)\n- [Using legacy dependencies with React Native and CodePush](https://www.kennymeyer.net/2019/11/28/using-legacy-dependencies-in-react-native-and-codepush/)\n- [Microsoft CodePush Integration in React Native 0.60+](https://giacomocerquone.com/blog/microsoft-codepush-integration-in-react-native-0.60)\n- [Bitrise + CodePush + React Native = Ideal Mobile CI Setup?](https://pillow.codes/bitrise-codepush-react-native-ideal-mobile-ci-setup-6283b86146c)\n- [ZeeMee Engineering and the Quest for the Holy (Mobile Dev) Grail](https://zeemee.engineering/zeemee-engineering-and-the-quest-for-the-holy-mobile-dev-grail-1310be4953d1#.zfwaxtbco)\n- [LinkedIn Learning Course: App Center: Continuous Integration and Delivery for iOS](https://www.linkedin.com/learning/app-center-continuous-integration-and-delivery-for-ios?u=3322)\n  \n### Other Helpful Resources\n\n- [App Center Codepush with React-Native](https://binbytes.com/blog/app-center-codepush-with-react-native)\n- [React Native Client SDK](https://docs.microsoft.com/en-us/appcenter/distribution/codepush/react-native)\n- [React Native at Picnic](https://blog.picnic.nl/react-native-at-picnic-eff17e8c51d5)\n- [Android Setup](https://github.com/microsoft/react-native-code-push/blob/master/docs/setup-android.md#code-signing-setup)\n- [Android Build](https://docs.microsoft.com/en-us/appcenter/build/android/)\n- [React Native ❤ CodePush](https://medium.com/spritle-software/react-native-codepush-b86f0ea8432c)\n- [Get started with ‘CodePush’ (React-Native)](https://medium.com/@rajanmaharjan/get-started-with-wonderful-technology-d838aafdc2d3)\n- [React Native and Codepush Experience](https://www.panayiotisgeorgiou.net/react-native-codepush-experience/)\n- [React Native CodePush introduction](https://www.asapdevelopers.com/react-native-codepush-introduction/)\n- [CodePush, is it worth it?](https://www.matthewsessions.com/blog/code-push/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgupta-ji6%2Freact-native-codepush-sample","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgupta-ji6%2Freact-native-codepush-sample","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgupta-ji6%2Freact-native-codepush-sample/lists"}