React-native-code-push: Loading JS bundle from file

[aliceathens]

Please help I can't get CodePush to load bundles from the server:

Steps to Reproduce

1. Install CodePush as per instructions via react native link
2. Add CodePush code to my Main APP component
3. Build and release a staging and production to code push servers
4. Archive and upload 'release' version of my app to test flight

Expected Behavior

App to download production/staging bundle from code push servers

Actual Behavior

[CodePush] Loading JS bundle from local file

code-push deployment ls: 'No installs recorded'

Environment

• react-native-code-push version: v3.0.1-beta
• react-native version: 0.45.1
• iOS/Android/Windows version: >9.0 iOS
• Does this reproduce on a debug build or release build? Yes
• Does this reproduce on a simulator, or only on a physical device? yes

[ruslan-bikkinin]

Hi @aliceathens and thanks for the question. Could you please share with us JS client code you are using to integrate CodePush for your app?

[aliceathens]

Thanks for your reply @ruslan-bikkinin see below my App component that is called by index.ios.js and index.android.js:

// @flow
import React, {Component} from 'react';
import codePush from "react-native-code-push";
import { StyleSheet, Text, View, Alert } from 'react-native';
import SplashScreen from 'react-native-smart-splash-screen';
import { StackNavigator, addNavigationHelpers }from 'react-navigation';

import { Login } from './scenes';
import Routes from "./routes";
import theme from './theme';

import { Provider, connect } from "react-redux";
import getStore from './redux/stores'

import createSagaMiddleware from 'redux-saga'
import rootSaga from './redux/sagas/'

import {
  checkAuthorization,
} from './lib/check-auth'


// code push options here
let codePushOptions = { checkFrequency: codePush.CheckFrequency.ON_APP_START, updateDialog: true, installMode: codePush.InstallMode.IMMEDIATE };

const AppNavigator = Routes;


const navReducer = (state, action) => {
  const nextState = AppNavigator.router.getStateForAction(action, state);

  // Simply return the original `state` if `nextState` is null or undefined.
  return nextState || state;
};


class Root extends Component {
  render() {
    console.log(this.props);
    return (
      <AppNavigator navigation={addNavigationHelpers({
        dispatch: this.props.dispatch,
        state: this.props.nav,
      })} />
    );
  }
}

const mapStateToProps = (state) => ({
  nav: state.nav
});

const AppWithNavigationState = connect(mapStateToProps)(Root);

const sagaMiddleware = createSagaMiddleware()

const store = getStore(navReducer, sagaMiddleware);

sagaMiddleware.run(rootSaga);


class App extends React.Component {

  componentDidMount () {
       SplashScreen.close({
          animationType: SplashScreen.animationType.scale,
          duration: 850,
          delay: 500,
       })
  }

  codePushStatusDidChange(status) {
        switch(status) {
            case codePush.SyncStatus.CHECKING_FOR_UPDATE:
                console.log("Checking for updates.");
                break;
            case codePush.SyncStatus.DOWNLOADING_PACKAGE:
                console.log("Downloading package.");
                break;
            case codePush.SyncStatus.INSTALLING_UPDATE:
                console.log("Installing update.");
                break;
            case codePush.SyncStatus.UP_TO_DATE:
                console.log("Up-to-date.");
                break;
            case codePush.SyncStatus.UPDATE_INSTALLED:
                console.log("Update installed.");
                break;
        }
    }

    codePushDownloadDidProgress(progress) {
        console.log(progress.receivedBytes + " of " + progress.totalBytes + " received.");
    }

  componentWillMount(){
    checkAuthorization(store);
  }

  render() {
    return (
      <Provider store={store}>
         <AppWithNavigationState />
      </Provider>
    )
  }
}

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

export default App = codePush(codePushOptions)(App);

[sergey-akhalkov]

Hi @aliceathens, from your client code I can see that you are using react-navigation. And in this case I think that react-native link does not work as expected.
To fix the issue you need to configure the CodePush manually:

1. Plugin Installation (iOS - Manual)
2. Plugin Configuration (iOS)

Please let me know if you have any questions or see any issues.

[ruslan-bikkinin]

Hi @aliceathens

No pressure from our side but if you get a chance to look at this - please let us know.

[aliceathens]

Hey @sergey-akhalkov @ruslan-bikkinin yes this fixed it! Strange how react navigation breaks this.. I was pulling my hair out for days wondering why it wasn't working. Thanks guys!!