Codepush

$ npm install -g appcenter-cli

$ appcenter login

appcenter apps create -d <appDisplayName> -o <operatingSystem>  -p <platform>
 
// 예시
appcenter apps create -d appname -o Android  -p React-Native
appcenter apps create -d appname -o iOS  -p React-Native
 
//주의 appname 은 android/ios 별로 다르게 지정해주어야 한다

// deployment key 발급받기
appcenter codepush deployment add -a <ownerName>/<appName> Staging
appcenter codepush deployment add -a <ownerName>/<appName> Production
 
// deployment key 확인하기
appcenter codepush deployment list -a <ownerName>/<appname> -k

npm install --save react-native-code-push

include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

// apply from: "../../node_modules/react-native/react.gradle"
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"

...
// 1. codepush 패키지를 import한다.
import com.microsoft.codepush.react.CodePush;
 
public class MainApplication extends Application implements ReactApplication {
 
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    ...
 
    // 2. getJSBundleFile 메소드를 오버라이드 한다.
    @Override
    protected String getJSBundleFile() {
      return CodePush.getJSBundleFile();
    }
  };
}

// 배포키 알아내기
appcenter codepush deployment list -a <ownerName>/<appname> -k

// strings.xml
<resources>
  <string name="app_name">AppName</string>
  <string moduleConfig="true" name="CodePushDeploymentKey">Staging deploymentkey</string>
</resources>

// before
return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
// after
return [CodePush bundleURL];

// 배포키 알아내기
appcenter codepush deployment list -a <ownerName>/<appname> -k

// Info.plist
<key>CodePushDeploymentKey</key><string>Staging deploymentkey</string>

import React from 'react';
import codePush from 'react-native-code-push'; // here!
 
const App = () => <SomeComponent />;
 
// here! 각종 codepush 관련 옵션을 설정하고
const codePushOptions = {
  checkFrequency: codePush.CheckFrequency.ON_APP_START,
  installMode: codePush.InstallMode.IMMEDIATE,
};
 
// here! 최상위 컴포넌트를 codepush 래퍼로 감싸서 export 시키고, 해당 컴포넌트를 앱에 등록시킵니다.
export default codepush(codePushOptions)(App);

// 릴리즈 하기
appcenter codepush release-react -a <ownerName>/<appname> -d Staging
/or
appcenter codepush release-react -a <ownerName>/<appname> -d Production
 
// codepush에 이름 붙이기
appcenter codepush release-react -a <ownerName>/<appname>  -m --description "Modified the header color"
 
// 배포 확인하기
appcenter codepush deployment list -a <ownerName>/<appName>

import React, { createContext, useContext } from 'react';
import { Alert } from 'react-native';
import codePush, { DownloadProgress } from 'react-native-code-push';
 
interface ICodepushContext {
  status: null | codePush.SyncStatus;
  progress: null | number;
}
 
// @ts-ignore
const CodePushContext = createContext<ICodepushContext>({});
 
export const useCodePush = () => useContext<ICodepushContext>(CodePushContext);
 
class CodepushController extends React.Component<{}, ICodepushContext> {
  state = {
    status: null,
    progress: null,
  };
 
  codePushStatusDidChange(status: codePush.SyncStatus) {
    switch (status) {
      case codePush.SyncStatus.UPDATE_INSTALLED:
        Alert.alert(
          '다운로드 완료',
          "업데이트 사항을 반영하시겠습니까?\n'나중에'를 클릭하시면 앱이 종료되고 다시 시작될 때 자동으로 업데이트 사항이 반영됩니다.",
          [
            {
              text: '나중에',
              style: 'cancel',
            },
            {
              text: '반영',
              onPress: () => codePush.restartApp(),
            },
          ]
        );
    }
    this.setState({ status });
  }
 
  codePushDownloadDidProgress(progress: DownloadProgress) {
    this.setState({ progress: progress.receivedBytes / progress.totalBytes });
  }
 
  render() {
    return (
      <CodePushContext.Provider
        value={{
          status: this.state.status,
          progress: this.state.progress,
        }}
      >
        {this.props.children}
      </CodePushContext.Provider>
    );
  }
}
 
export const CodepushProvider = codePush({
  checkFrequency: codePush.CheckFrequency.ON_APP_START,
  updateDialog: {
    title: '업데이트 알림',
    optionalInstallButtonLabel: '확인',
    optionalIgnoreButtonLabel: '취소',
    optionalUpdateMessage:
      "업데이트 사항이 존재합니다.\n지금 업데이트 사항을 내려받으시겠습니까?\n('확인'을 누르면 자동으로 진행됩니다.)",
    mandatoryContinueButtonLabel: '확인',
    mandatoryUpdateMessage:
      '필수 업데이트가 있습니다.\n최적화된 환경에서 이용할 수 있도록\n최신 버전으로 업데이트를 진행합니다.',
  },
  installMode: codePush.InstallMode.ON_NEXT_RESTART,
})(CodepushController);