I've been stuck on this for two days now and even though this question has been asked. None of the answers helped me.
I am using Wix Navigation V2 and trying to use CodePush for instant updates. In staging, I can see CodePush logs and updates happen (just checking to see logs). In Production however, my app always reverts to a black screen after the splash. Here is what I have tried so far.
This approach: https://medium.com/react-coach/using-codepush-with-wix-react-native-navigation-a6a7938cee24
I have also made sure my deployment key is correct in my plist file using
appcenter codepush deployment list -a {myUserName}/{appName} -k
I have also tried these approaches Registering React Native Code Push with React Native Navigation by Wix
Here is my App.js code
TODO:
SET ORIENTATION
*/
import { NetInfo, Platform } from "react-native";
import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import { Provider } from "react-redux";
import thunk from "redux-thunk";
import { Navigation } from "react-native-navigation";
import codePush from "react-native-code-push";
import { registerScreens, registerScreenVisibilityListener } from "./screens";
import rootReducer from "./redux/reducers/index";
import { connectionStatusChanged } from "./redux/actions";
const store = createStore(
rootReducer,
composeWithDevTools(applyMiddleware(thunk))
);
registerScreens(store, Provider);
registerScreenVisibilityListener();
const handleConnectivityChange = reach => {
store.dispatch(connectionStatusChanged(reach));
};
NetInfo.addEventListener("connectionChange", handleConnectivityChange);
export default class App {
constructor() {
store.subscribe(this.onStoreUpdate.bind(this));
NetInfo.getConnectionInfo().then(reach => {
handleConnectivityChange(reach);
});
}
onStoreUpdate = () => {
const { appRoot } = store.getState().appState;
if (this.currentRoot !== appRoot) {
// CODE PUSH SYNC
codePush.sync({
updateDialog: true,
installMode: codePush.InstallMode.IMMEDIATE
});
this.currentRoot = appRoot;
this.startApp(appRoot);
}
};
startApp = root => {
// ALL MY RNN V2 SCREENS (REMOVING TO REDUCE CODE)
}
}
And here is where I register my screens and wrap the HOC with codepush
import React from "react";
import _ from "lodash";
import { Provider } from "react-redux";
import { Linking } from "react-native";
import { Navigation } from "react-native-navigation";
import codePush from "react-native-code-push";
import NavigationActions from "../navigation/navigationActions";
const codePushOptions = { checkFrequency: codePush.CheckFrequency.MANUAL };
function wrap(WrappedComponent, store) {
class PP extends React.PureComponent {
componentWillMount() {
Linking.addEventListener("url", this.deeplinkHandler);
Linking.getInitialURL().then(url => {
// FUNCTION HERE TO ROUTE TO ARTICLE, STRAIN, PRODUCT (when ap is closed)
if (url) {
const linkData = url.replace("weedup://", "").split("/");
if (this.props.componentId === "home" && linkData[0] === "article") {
// push component
const { componentId } = this.props;
NavigationActions.pushComponent({
id: "home",
name: "screen.Article",
props: {
fromDeepLink: true,
fromBackground: false,
article: {
id: linkData[1]
}
},
title: "Article",
topBarVisible: true,
bottomTabsVisible: false
});
}
}
});
}
deeplinkHandler = event => {
// FUNCTION HERE TO ROUTE TO ARTICLE, STRAIN, PRODUCT (opened)
if (!_.isEmpty(event)) {
const linkData = event.url.replace("weedup://", "").split("/");
if (this.props.componentId === "home" && linkData[0] === "article") {
const { componentId } = this.props;
NavigationActions.pushComponent({
id: "home",
name: "screen.Article",
props: {
fromDeepLink: true,
fromBackground: true,
article: {
id: linkData[1]
}
},
title: "Article",
topBarVisible: true,
bottomTabsVisible: false
});
}
}
};
render() {
return (
<Provider store={store}>
<WrappedComponent {...this.props} />
</Provider>
);
}
}
return codePush(codePushOptions)(PP);
}
export const registerScreens = store => {
// REMOVING SCREEN TO REDUCE EXAMPLE CODE
};
export function registerScreenVisibilityListener() {
Navigation.events().registerComponentDidAppearListener(
({ componentName }) => {
console.log(`Displaying screen ${componentName}`);
}
);
}
Lastly, here is my AppDelegate.m
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
#import "AppDelegate.h"
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "ReactNativeNavigation.h"
#import <React/RCTLinkingManager.h>
#import <CodePush/CodePush.h>
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
return [RCTLinkingManager application:application openURL:url
sourceApplication:sourceApplication annotation:annotation];
}
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
NSURL *jsCodeLocation;
#ifdef DEBUG
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
[ReactNativeNavigation bootstrap:jsCodeLocation launchOptions:launchOptions];
#else
jsCodeLocation = [CodePush bundleURL];
#endif
return YES;
}
@end
