1

I'm using code-push to update my react-native app. I don't want to upload it to App Store every time if I make an update, I want to push it directly to the users device.

It works fine, the app is updated but I'm trying to show an notification if the updated is successful.

In the docs they are doing it as follows:

codePush.sync({ updateDialog: true },
  (status) => {
      switch (status) {
          case codePush.SyncStatus.DOWNLOADING_PACKAGE:
              // Show "downloading" modal
              break;
          case codePush.SyncStatus.INSTALLING_UPDATE:
              // Hide "downloading" modal
              break;
      }
  },
  ({ receivedBytes, totalBytes, }) => {
    /* Update download modal progress */
  }
);

I'm trying to update the state if the update is successful and show the modal, with an button to hide it on click. Thus my code is as follows:

constructor() {
        super();
        this.state = {
            modalVisible: false,
            status: ""
        }
    }

    componentDidMount() {
        let self = this;
        codePush.sync({
                updateDialog: true,
                installMode: codePush.InstallMode.IMMEDIATE
            }, (status) => {
                switch (status) {
                    case codePush.SyncStatus.UPDATE_INSTALLED:
                        self.setState({modalVisible: true});
                        break;
                }
            },
            ({receivedBytes, totalBytes,}) => {
                /* Update download modal progress */
                self.setState({status: "Downloaded " + receivedBytes + " of " + totalBytes});
            }
        );
    }

    renderUpdateNotificationModal(){
        return (
            <Modal
                animationType={"slide"}
                transparent={false}
                visible={this.state.modalVisible}
                onRequestClose={() => {alert("Modal has been closed.")}}
            >
                <View style={{marginTop: 22}}>
                    <View>
                        <Text>Updated</Text>
                        <TouchableHighlight onPress={() => {this.setState({modalVisible: false})}}>
                            <Text>OK</Text>
                        </TouchableHighlight>
                    </View>
                </View>
            </Modal>
        )
    }

    render() {
        return (
            <View style={styles.container}>
                {this.renderUpdateNotificationModal()}
                <Text style={styles.welcome}>
                    Welcome!
                </Text>
                <Text style={styles.instructions}>
                    To get started, edit index.ios.js
                </Text>
                <Text style={styles.instructions}>
                    Press Cmd+R to reload,{'\n'}
                    Cmd+D or shake for dev menu
                </Text>
                <Text style={{fontSize: 18, marginTop: 15, color: "blue", textAlign: "center"}}>{this.state.status}</Text>
            </View>
        );
    }

But the problem is that the modal is shown for a few seconds and then it disappears, without clicking on the button.

As the state is set to true, and then after I few seconds to false in 

case codePush.SyncStatus.UPDATE_INSTALLED:
     self.setState({modalVisible: true});
     break;

Any idea how to solve it?

Boky
  • 11,554
  • 28
  • 93
  • 163
  • Is there any flash screen after the update was installed? I think your app was restarted – Kawatare267 Jun 16 '17 at 10:15
  • @Jiro267 No. The modal is shown, and then after one second it disappears and I see the updated screen. The screen doesn't flash. – Boky Jun 16 '17 at 10:21
  • `installMode: codePush.InstallMode.IMMEDIATE` this should be forcing an App restart according to https://github.com/Microsoft/react-native-code-push/blob/master/docs/api-js.md#codepushoptions. Are you sure it's not restarting & initialising so quickly (the App is pretty minimal above!) that you are mistaking this for the modal closing and state resetting? Seems to point to this. Solution would be `codePush.InstallMode.ON_NEXT_RESTART` or `codePush.InstallMode.ON_NEXT_RESUME` – G0dsquad Jun 16 '17 at 10:38

1 Answers1

0

I had kind of same promblem when trying to use Codepush in the loading page, My problem was that codePush's updateDialog was shown on the next screen. because codePush.sync is a Promise function, you can use its 'then' feature, it will ensure doing your jobs in the right order.

this demo maybe be helpful if you want to use CodePush. You can change state of your component accordingly in codePushStatusDidChange().

Lord ST
  • 513
  • 7
  • 15