Using CodePush with App Center for React Native Apps

AppCenter documentation is complete, but it looks overwhelming at first sight.

Here is a short and sweat summary of what I’ve done to install them in my App:

Three main things you will do:

1. Install App Center cli so you can connect
2. Create code push deployment key
3. Add code push dependency for react native

Install App Center CLI so you can connect

$ yarn global add appcenter-cli
$ appcenter login

Create code push deployment key

#list your appcenter apps
$ appcenter apps list
#get the target app and generate a deployment key
$ appcenter codepush deployment list -a (owner)/(app) --displayKeys
#keep the key so you can add when setting up sentry in react-native in the next step

Add code push dependency for react native

# add codepush to your dependencies
# here you may use the generated key above
$ yarn add react-native-code-push

Here is a piece of code you can use in your main component, so you can hit the ground running:

import codePush from "react-native-code-push";

let codePushOptions = { checkFrequency: codePush.CheckFrequency.MANUAL };

class MyApp extends Component {
    onButtonPress() {
        codePush.sync({
            updateDialog: true,
            installMode: codePush.InstallMode.IMMEDIATE
        });
    }

    render() {
        <View>
            <TouchableOpacity onPress={this.onButtonPress}>
                <Text>Check for updates</Text>
            </TouchableOpacity>
        </View>
    }
}

MyApp = codePush(codePushOptions)(MyApp);