OTA Updates download event not fired

Great @esamelson – yup, you are right it works as expected … thanks !!

Here the final version for the community:

import React from 'react';
import { StyleSheet, Text, View, AppState, Alert } from 'react-native';
import { Constants, Updates } from 'expo';

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      showReloadDialog: false,
    };
  }

  _checkUpdates = async () => {
    if (this._checking_update !== true) {
      console.log('Checking for an update...');
      this._checking_update = true;
      try {
        const update = await Updates.checkForUpdateAsync();
        if (update.isAvailable) {
          console.log('An update was found, downloading...');
          await Updates.fetchUpdateAsync();
          this.setState({
            showReloadDialog: true,
          });
        } else {
          console.log('No updates were found');
        }
      } catch (e) {
        console.log('Error while trying to check for updates', e);
      }
      delete this._checking_update;
    } else {
      console.log('Currently checking for an update');
    }
  }

  _handleAppStateChange = (nextAppState) => {
    if (nextAppState === 'active') {
      this._checkUpdates();
    }
  }

  componentDidMount() {
    AppState.addEventListener('change', this._handleAppStateChange);
    // fresh start check
    this._checkUpdates();
  }

  componentWillUnmount() {
    AppState.removeEventListener('change', this._handleAppStateChange);
  }

  componentDidUpdate(prevProps, prevState) {
    const {
      showReloadDialog,
    } = this.state;
    if (showReloadDialog === true && showReloadDialog !== prevState.showReloadDialog) {
      Alert.alert(
        'Update',
        'New application update were found, restart must required.',
        [
          {
            text: 'Accept',
            onPress: () => {
              Updates.reloadFromCache();
            }
          },
        ],
        { cancelable: false }
      );
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={{ fontWeight: 'bold' }}>Expo self update</Text>
        <Text>v.{Constants.manifest.version}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Remember the app.json to prevent multiple downloads on load:

"updates": {
  "checkAutomatically": "ON_ERROR_RECOVERY"
},
9 Likes