How to Use CodePush in React Native for Instant Updates

To use CodePush in React Native, install the react-native-code-push package, link it to your app, and configure it to check for updates on app start or resume. This lets you push JavaScript and asset updates directly to users without app store releases.

Syntax

The main usage involves wrapping your root component with codePush higher-order component and configuring update options.

• codePush(options)(App): Wraps your app component to enable CodePush.
• options.checkFrequency: Controls when the app checks for updates (e.g., on app start).
• codePush.sync(): Manually triggers update check and installation.

javascript

import codePush from 'react-native-code-push';
import React from 'react';
import { View, Text } from 'react-native';

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

class App extends React.Component {
  render() {
    return (
      <View>
        <Text>Hello CodePush</Text>
      </View>
    );
  }
}

export default codePush(codePushOptions)(App);

Output

App shows a screen with text 'Hello CodePush' and automatically checks for updates on app start.

Example

This example shows a simple React Native app integrated with CodePush that checks for updates on app start and applies them immediately.

javascript

import React from 'react';
import { View, Text, Button } from 'react-native';
import codePush from 'react-native-code-push';

class App extends React.Component {
  checkForUpdates = () => {
    codePush.sync({
      installMode: codePush.InstallMode.IMMEDIATE
    });
  };

  componentDidMount() {
    this.checkForUpdates();
  }

  render() {
    return (
      <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
        <Text>Welcome to CodePush Demo</Text>
        <Button title="Check for Update" onPress={this.checkForUpdates} />
      </View>
    );
  }
}

export default codePush({ checkFrequency: codePush.CheckFrequency.MANUAL })(App);

Output

App displays 'Welcome to CodePush Demo' and a button. Pressing the button checks for updates and installs them immediately if available.

Common Pitfalls

Common mistakes when using CodePush include:

• Not wrapping the root component with codePush(), so updates never apply.
• Forgetting to configure checkFrequency, causing updates to never check or check too often.
• Not handling update install modes properly, leading to poor user experience.
• Not bundling the app correctly before releasing updates.

javascript

/* Wrong: No codePush wrapper */
import React from 'react';
import { Text } from 'react-native';

class App extends React.Component {
  render() {
    return <Text>No CodePush</Text>;
  }
}
export default App;

/* Right: Wrap with codePush */
import codePush from 'react-native-code-push';
import React from 'react';
import { Text } from 'react-native';

class App extends React.Component {
  render() {
    return <Text>With CodePush</Text>;
  }
}
export default codePush({ checkFrequency: codePush.CheckFrequency.ON_APP_START })(App);

Quick Reference

Key CodePush options and methods:

Option/Method	Description
codePush.CheckFrequency.ON_APP_START	Check for updates when app starts
codePush.CheckFrequency.MANUAL	Check for updates only when manually triggered
codePush.sync()	Manually check and install updates
installMode: codePush.InstallMode.IMMEDIATE	Apply update immediately after download
installMode: codePush.InstallMode.ON_NEXT_RESTART	Apply update on next app restart

Key Takeaways

Wrap your root component with codePush() to enable updates.

Configure checkFrequency to control when updates are checked.

Use codePush.sync() to manually trigger update checks.

Choose installMode carefully for smooth user experience.

Always bundle your app properly before releasing updates.