React Native CodePush Update Button

CodePush is a really great tool to deploy React Native app updates directly to our users' devices without the need of going through the App or Play Store. Sometimes, however, we need to explicitly prompt our users to update the app, as opposed to silently updating it in the background. The goal of react-native-cp-update-button is to make this updating workflow straight forward and quick to implement.

Currently only iOS is supported, however Android support will land shortly!

• Installation
• Basic Usage
• Advanced Usage
• Components
  • <UpdateAppButton />
  • <Middot />
• Demo & Example
• Releasing Updates

Installation

npm install --save react-native-cp-update-button

Note, react-native-cp-update-button also requires on the following dependencies:

• React Native 0.27 or later
• React 15.0 or later
• React Native Code Push 1.12.2-beta or later

Basic Usage

The gist of how this works is that you need to create a component to pass to <UpdateAppButton />. In the example below, AppLogo is a simple component that renders an image of the app logo and only shows <Middot /> when a new version is available for the user to download. Notice, the component has access to two props:

• newVersion: either will be null if there is no new version, or a CodePush localPackage
• shownUpdatePrompt: function that when called will show a confirmation prompt to update the app

import { AppUpdateButton, Middot } from 'react-native-cp-update-button';

const AppLogo = ({ newVersion, shownUpdatePrompt }) => (
	<TouchableOpacity
		disabled={!newVersion}
		onPress={shownUpdatePrompt}>
		{newVersion ? <Middot /> : null}
		<Image src={require('../img/example-logo.png')} />
	</TouchableOpacity>
);

Now all that is left to do is to render UpdateAppButton and pass it the AppLogo component as a prop.

class App extends React.Component {
	...
	render () {
		return (
			<View>
				...
				<UpdateAppButton
					component={AppLogo}
					// below is the default value for checkForUpdate
					checkForUpdate={
						onMount: true, // will check on mount of the component
						onResume: false, // will check when the app resumes
						onInterval: false, // will check every interval in milliseconds (checkEvery) while the component is mounted
						checkEvery: 5 * 60 * 1000 // the length of the interval that ^ will use if true
					},
				/>
			</View>
		)
	}
}

The behaviour of this example will follow:

• When there is a new CodePush version available, the TouchableOpacity will stop being disabled, and the Middot will appear.
• This will inform the end user that there is a new version ready to install.
• Once the end user presses on AppLogo, the shownUpdatePrompt function passed to down as props will be called.
• This will cause a confirmation prompt to appear, using the default props for the title, message and confirmation button.
• Once the end user presses the "Update Now" button, the app will restart with that new version immediately.

Advanced Usage

For more advanced usages for react-native-cp-update-button, check out examples 2 & 3 within the example app. For an example on how to animate the update button without using the default animation, check out example 4. This will outline how you can utilise React Native's Animate API to achieve more complex interactions and animations when a new version becomes available.

Components

react-native-cp-update-button is made up of two React components that provide the building blocks to quickly add a button to allow your users to update their version of the app installed.

<UpdateAppButton />

This component gives you the ability to simply invoke a function to show a confirmation prompt to the user that will update the app immediately when the confirmation button is pressed.

| Property | Type | Default | Description |------------------ | -------- | ----------- | -------- | animate | boolean | true | LayoutAnimation.configureNext will be called when a new version becomes available, animating any layout change in the next render | component | function | (required) | react component will be rendered, see usage for more details | updateOnPress | bool | false | whether to update the app immediately without showing the confirm prompt | checkForUpdate | object | see basic usage | one of the best parts about codePush.sync is how easy it's to configure how and when to check whether there are any new CodePush updates, so that same easy to configure behaviour can be achieved using this prop. If one or more of the properties are set to true, say mount and resume for example, the component will check for an update on both componentWillMount and when the app resumes. | promptTitle | string | New Update Available | short title of the confirmation prompt shown to the user | promptMessage | string | A new update is now available. Do you want to update now? Note: Updating will restart the app and any changes not saved will be lost.| body of the confirmation prompt shown to the user | cancelButtonText | string | Cancel | the text for the confirmation prompt's cancel button | confirmButtonText | string | Update Now | the text for the confirmation prompt's confirm button

<Middot />

A common pattern these days is to show a middot to indicate there is a notification component, think Slack for example. To save you building your own, you can import one prepared a little earlier.

| Property | Type | Default | Description |------------------ | -------- | ------------ | -------- | color | string | #e74c3c | background color for the outer circle | size | number | 22 | specifies the size of the outer circle

Example & Demo

git clone https://github.com/cameronbourke/react-native-cp-update-button
cd react-native-cp-update-button
npm install
cd example/UpdateButtonDemo
npm install

Then open the Xcode project at ios/UpdateButtonDemo.xcodeproj

Currently npm link does not work with React Native's packager, so, to temporarily get around that, npm start actually runs a babel command that will output the /src directory into /example/UpdateButtonDemo/dev which explains why you will see the following when in the example app:

import { UpdateAppButton, Middot } from './react-native-cp-update-button';

Changing the CodePush Deployment Key

In order to get CodePush working for the example, you will need to change the deployment key for the iOS app. First you will need to create a CodePush app, and then change the value of CodePushDeploymentKey in the info.plist to the staging key of the app you just created to using the code-push cli.

Releasing Updates

One of best parts about react-native-cp-update-button is that it does not require any new tooling, you can just use the code-push cli like you normally would to push updates to your React Native app. This is where you are able to set a promptMessage for this specific release, which will be used by the <UpdateAppButton /> component. You can do this by giving a value for the --description option in the cli. Check out the docs on releasing with CodePush for more detail.

If a value for promptMessage was passed to <UpdateAppButton /> as a prop in the application, it will only be used if no value for --description was set when releasing the update.

Example Deployment

Say you are happy with v1.3.0, you tag it (hopefully) and are about to release it using CodePush like you normally would. The only difference is now you will need to add the --description option and pass it a value.

code-push release-react YourApp ios -d Production --description "There are plenty of new features in this goodie of an update"

Note: If you use the mandatory flag (-m) when releasing using the code-push cli, it will override the behaviour of allowing your users to update the app when they choose and therefore this component will not work as expected.