react-native-code-push Code push - Bundle changes are not reflected once the App closes and reopens

Code push - Bundle changes are not reflected once the App closes and reopens only. (iOS Platform), Android working fine.

Steps to Reproduce

Installed build on the device
Released code push with changes
Code push bundle installed on the device - New release available on the screen.
App closes and reopens - New change from bundle release will not be reflected - Older IPA file changes alone available in screen

Expected Behavior

Always available the new bundle release on the screen

Actual Behavior

Always not available the new bundle release on the screen

Environment

react-native-code-push version: 7.0.4
react-native version:0.69.0
iOS/Android/Windows version: iOS 15.7.1
Does this reproduce on a debug build or release build? : release build and App Store release
Does this reproduce on a simulator, or only on a physical device? - Both

(The more info the faster we will be able to address it!)

Jun 02 '23 09:06 karthinidc

same here

Jun 03 '23 08:06 namcancode

same here, "react-native": "0.69.1", "react-native-code-push": "^7.0.5", are the verisons

I'm not sure if this information is relevant, but the code push was functioning correctly for me when the "react-native" version was 0.68.2. However, I needed to add a new feature that required upgrading "react-native" to at least version 0.69.1. To perform the upgrade, I used the upgrade helper provided by https://react-native-community.github.io/upgrade-helper/?from=0.68.2&to=0.69.1. After publishing the app about 2 months ago, when I tried to do the code push last week, the code push is no longer working as expected. The issue is that after a successful code push, the app prompts for an upgrade, and upon installation, it functions properly. However, when I close and reopen the app, it reverts back to the previous version. I am not sure if this might be the reason. How can I confirm what might be causing this issue? Please note code push version was the same "7.0.5"

Jun 03 '23 20:06 Venulapog

@karthinidc , @namcancode , can you also confirm if the issues started to happen after RN upgrade?

Jun 05 '23 06:06 DmitriyKirakosyan

@DmitriyKirakosyan It's a new project, Created the React Native version with 0.69.0. -- Not did any RN upgrade

Jun 05 '23 06:06 karthinidc

Same here, "react-native": "0.71.6", "react-native-code-push": "^8.0.2",

Jun 05 '23 06:06 BCT-Barney

@DmitriyKirakosyan kindly ask if there is any thought of this issue?

Jun 06 '23 16:06 BCT-Barney

Please make sure you have correctly set up CodePush in AppDelegate.mm, see https://learn.microsoft.com/en-us/appcenter/distribution/codepush/rn-get-started#ios-setup. Also make sure the #import <CodePush/CodePush.h> line is placed above the #if block.

Let me know if it helps.

Jun 13 '23 05:06 DmitriyKirakosyan

@DmitriyKirakosyan Facing the same issue on only iOS. Is there any way?

Environment

react-native-code-push version: ^8.0.1 react-native version:0.71.6 iOS/Android/Windows version: iOS 16.5 Does this reproduce on a debug build or release build? : It's a release build and it's an app that was run on Testflight. Does this reproduce on a simulator, or only on a physical device? - physical device using hermes engine

AppDelegate.mm

#import "AppDelegate.h"
#import "SDImageCodersManager.h"

#import <SDWebImageWebPCoder/SDImageWebPCoder.h>
#import <React/RCTAppSetupUtils.h>
#import <React/RCTBundleURLProvider.h>

#import <CodePush/CodePush.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [FIRApp configure];
  self.moduleName = @"";
  self.initialProps = @{};

  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  return [CodePush bundleURL];
#endif
}

- (BOOL)concurrentRootEnabled
{
  return true;
}

@end

Jun 14 '23 09:06 uncoolclub

Hi @uncoolclub , may I ask you to reproduce the issue on an empty app and share it with us if possible? App logs would also be helpful.

Jun 15 '23 03:06 DmitriyKirakosyan

@DmitriyKirakosyan

I apologize, but I cannot spend much time on this due to other tasks, so I cannot test in an empty app. Instead, I'll tell you more about the current environment.
The issue is the same as the following issue: (2436)
When receiving a code push update only on iOS, if the app is closed and restarted, the code push update is not received. After this bug appears, re-distributing with the same code will work normally. However, the strange thing is that if you distribute it with the same code, it should not be distributed originally. (No changed logic, so I throw an error in the code push.)

The log I observed in the Xcode console is as follows, and along with this log, the app stays on the previous version without receiving the latest update: Also, I took a picture of console.log in LoadingScreen as below, but it could not be checked in the Xcode console.

[CodePush] Loading JS bundle from file:///var/mobile/Containers/Data/Application/A90206B2-BDA2-4527-8E1F-A1F643C499D1/Library/Application%20Support/CodePush/36f844ae1b550aa78f08b8b60db98b3c2f6fae660950830df0cb5f2a5e390f69/CodePush/main.jsbundle

// App.jsx
import React, { lazy, Suspense, useEffect } from 'react';
import LoadingScreen from '@Loading/LoadingScreen';

// import other modules

const codePushOptions = { checkFrequency: codePush.CheckFrequency.MANUAL };
const screenOptions = {
  headerShown: false,
  gestureEnabled: PLATFORM.CURRENT === PLATFORM.IOS,
  cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
};

const queryClient = new QueryClient();
const Stack = createNativeStackNavigator();

const App = () => {
  ...

  return (
    <Provider store={store}>
      <QueryClientProvider client={queryClient}>
        <Suspense fallback={<View />}>
          <NavigationContainer>
            <Stack.Navigator screenOptions={screenOptions}>
              ...
            </Stack.Navigator>
          </NavigationContainer>
        </Suspense>
      </QueryClientProvider>
    </Provider>
  );
};

export default codePush(codePushOptions)(App);

// LoadingScreen.jsx
...
  syncWithCodePush = async () => {
    const [isTester, isBetaTester] = await Promise.all([getIsTester(true), getIsBetaTester()]);
    this.setRandomProcessText();

    return new Promise((resolve) => {
      const option = { installMode: InstallMode.IMMEDIATE };

      if (isTester) {
        option.deploymentKey = TEST_DEPLOYMENT_KEY;
      } else if (isBetaTester) {
        option.deploymentKey = BETA_TEST_DEPLOYMENT_KEY;
      } else {
        option.deploymentKey = PROD_DEPLOYMENT_KEY;
      }

      const loadingTimeout = setTimeout(() => {
        this.setState({ isCodeUpdated: true, isOnSync: false });
        resolve(true);
      }, 13000);

      sync(
        option,
        (status) => {
          switch (status) {
            case SyncStatus.CHECKING_FOR_UPDATE:
              console.log('[CodePush] Checking for updates.');
              break;

            case SyncStatus.UP_TO_DATE:
              console.log('[CodePush] Up-to-date.');

              this.setState({
                isOnSync: false,
                isCodeUpdated: true,
                totalBytes: 100,
                receivedBytes: 100,
              });
              clearTimeout(loadingTimeout);
              resolve(true);
              break;

            case SyncStatus.UPDATE_INSTALLED:
              console.log('[CodePush] Update installed.');

              this.setState({
                isOnSync: false,
                isCodeUpdated: true,
                totalBytes: 100,
                receivedBytes: 100,
              });
              clearTimeout(loadingTimeout);
              break;

            case SyncStatus.INSTALLING_UPDATE:
              console.log('[CodePush] Installing update.');

              this.setState({
                isOnSync: false,
                isCodeUpdated: true,
                totalBytes: 100,
                receivedBytes: 100,
              });
              clearTimeout(loadingTimeout);
              break;

            case SyncStatus.DOWNLOADING_PACKAGE:
              console.log('[CodePush] Downloading package.');

              this.setState({ isOnSync: true });
              clearTimeout(loadingTimeout);
              break;

            default:
              break;
          }
        },
        ({ receivedBytes, totalBytes }) => {
          this.setState({ receivedBytes, totalBytes, isOnSync: true });

          if (receivedBytes >= totalBytes) {
            this.setRandomProcessText();
          }
        },
      );
    });
  };

Also, there was no problem when I used the version below, but there was an issue while upgrading the version.

// prev version
"react": "17.0.2",
"react-native": "0.68.0",
"react-native-code-push": "^7.0.5"

// current version
"react": "18.2.0",
"react-native": "0.71.6",
"react-native-code-push": "^8.0.1"

If you have a plan to work on this bug, can I know when it can be fixed?

Jun 19 '23 01:06 uncoolclub

@DmitriyKirakosyan

A bug has just been reproduced and recorded. I will attach it additionally. The flow is as follows.

I went into the credit in the previous version app and checked the code push version. (CODE_PUSH: v44/v44)
The latest version has been distributed through code push and after exiting the app, I enter the app again, there is an update, but I don't get it.
After exiting the app, I need to get the latest version when I go back in, but I haven't and I'm still stuck with the previous version. (CODE_PUSH: v44/v44)

If this bug occurs, the only solution I found is to reinstall the app in the direction of clearing its cache. This bug happens quite often. 😭

Below is the latest version available through the App Center. (v45) 스크린샷 2023-06-19 오후 2 19 51

The commands used are as follows.

const { command } = require('./common');
const { CURRENT_VERSION, SERVICE, SERVICE_NAME_KOR, MINIMUM_VERSION } = require('./constant');

const main = async () => {
  const result = await command(
    `appcenter codepush release-react -a ${SERVICE}/ios -m -d Beta -t "${MINIMUM_VERSION} - ${CURRENT_VERSION}"`,
  );
};

main()
  .then((result) => console.log(result))
  .catch(() => require('process').exit(1));

Jun 19 '23 05:06 uncoolclub

@DmitriyKirakosyan Hi, Can you check it ASAP? It's about to be released, so I need to check it quickly. Help me, please. 🥺🥺

Jun 21 '23 08:06 uncoolclub

@uncoolclub ,

I will attach it additionally

I can't see any additional attachments. Or you meant the video? I checked your code and the video and it is still hard to say why it doesn't work for you..

A couple of additional questions:

Have you upgraded react-native or started the project from version 0.71?
Have you started seeing this issue with code-push just recently or it was happening from the time you integrated it?

Jun 21 '23 12:06 DmitriyKirakosyan

@DmitriyKirakosyan It means video. Upgraded react-native to 0.71. No such bugs were found in previous versions. The problem was identified by code push.

Jun 25 '23 08:06 uncoolclub

@uncoolclub Unfortunately the video and the flow steps didn't help me to find the root cause. Try to remove code-push and integrate it again using the docs. Have you done react-native migration from older version? Did the code-push work well before or you face the issue from the very beginning of adding it?

Jul 04 '23 08:07 DmitriyKirakosyan

Hi I'm having the same issues except mine is a complete starter application. When new update is released to codepush the app prompts with the install button, once I click install no changes happen, but on the appcenter it shows its been downloaded and installed. Already reinstalled twice double checking correct gradle and java getJSBundleFile override.

import React from 'react';
import type {PropsWithChildren} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import codePush from 'react-native-code-push';

const codePushOptions = {
  updateDialog: true,
  checkFrequency: codePush.CheckFrequency.ON_APP_START,
  installMode: codePush.InstallMode.IMMEDIATE,
};

type SectionProps = PropsWithChildren<{
  title: string;
}>;

function Section({children, title}: SectionProps): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? 'white' : 'black',
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          {
            color: isDarkMode ? 'lightgray' : 'gray',
          },
        ]}>
        {children}
      </Text>
    </View>
  );
}

function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? 'black' : 'white',
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <View
          style={{
            backgroundColor: isDarkMode ? 'black' : 'white',
          }}>
          <Section title="Driver App">
            <Text style={styles.highlight}>
              Over-The-Air Updates Mockup{'\n'}
            </Text>
            <Text style={styles.baseText}>This is version 2.0.0</Text>
          </Section>
          <Section title="Testing Changes">
            <Text style={styles.highlight}>
              I added text here for version 2.0.0
            </Text>
          </Section>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  baseText: {
    fontFamily: 'Cochin',
    fontStyle: 'italic',
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default codePush(codePushOptions)(App);

"react-native": "^0.71.11",
"react-native-code-push": "^8.0.2"

Jul 04 '23 10:07 HeronicKnight

This helped me https://github.com/microsoft/react-native-code-push/issues/2195#issuecomment-1048505007. I had a similar issue.

Jul 06 '23 15:07 skdev24

Hello, facing the same issue on iOS only

"react": "17.0.2",
"react-native": "0.68.6",
"react-native-code-push": "^7.1.0",

iPad OS Version 16.5.1

Update: In our case this seems to have fixed it

https://github.com/microsoft/react-native-code-push/issues/2195#issuecomment-1062005098

Aug 03 '23 04:08 DSoliz

Same here Latest React native & code push

Oct 06 '23 01:10 mhatami-ecotrak

@mhatami-ecotrak , have you tried the fix from https://github.com/microsoft/react-native-code-push/issues/2195#issuecomment-1062005098? Have you updated/migrated react-native recently?

Oct 20 '23 06:10 DmitriyKirakosyan

I'm still facing the same issue in 2k24. Any solutions or workaround for this?

Jan 24 '24 05:01 vkyscen

@vkyscen Please try the workaround mentioned above.

Feb 14 '24 13:02 DmitriyKirakosyan

I am facing the same issue on iOS right now. (Android works without a problem.)

( -> Codepush is loading the update after starting the app, restarting and showing the changes. After restarting the app manually, the original bundle is showing again. No information in xCode logs. )

I am not using react-native-navigation by wix. Therefore the workaround doesn't work for me.

"react-native": "0.73.2",
"appcenter": "5.0.1",
"react-native-code-push": "^8.2.1",

My AppDelegate.mm looks like the following:

#import "AppDelegate.h"
#import "RNBootSplash.h"
#import <Firebase.h>

#import <AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes.h>
#import <CodePush/CodePush.h>

#import <React/RCTBundleURLProvider.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{

  self.moduleName = @"AppNameRN";
  // You can add your custom initial props in the dictionary below.
  // They will be passed down to the ViewController used by React Native.
  self.initialProps = @{};

  [FIRApp configure];
  [AppCenterReactNative register];
  [AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
  [AppCenterReactNativeCrashes registerWithAutomaticProcessing];

  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
  return [self getBundleURL];
}

- (NSURL *)getBundleURL
{
  #if DEBUG
    return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
  #else
    return [CodePush bundleURL];
  #endif
}

// ⬇️ Add this before file @end
- (UIView *)createRootViewWithBridge:(RCTBridge *)bridge
                          moduleName:(NSString *)moduleName
                           initProps:(NSDictionary *)initProps {
  UIView *rootView = [super createRootViewWithBridge:bridge
                                          moduleName:moduleName
                                           initProps:initProps];

  [RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView]; // ⬅️ initialize the splash screen

  return rootView;
}

@end

@DmitriyKirakosyan Do you see anything out of the ordinary here? Maybe it is the RNBootSplash implementation?

The rest of my code is fairly simple: main.tsx (which is called by index.js with AppRegistry.registerComponent)

const codePushOptions: CodePushOptions = {
  checkFrequency: CodePush.CheckFrequency.MANUAL,
};

function Main() {
  return (
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <SafeAreaProvider>
          <NavigationContainer ref={navigationRef}>
            <PaperProvider theme={appTheme}>
              <RootStack />
              <LoadingView />
            </PaperProvider>
          </NavigationContainer>
        </SafeAreaProvider>
      </PersistGate>
    </Provider>
  );
}

export default CodePush(codePushOptions)(Main);

and inside my loading-component:

  useEffect(() => {
    const codePushSync = async () => {
      await CodePush.sync(
        {
          installMode: CodePush.InstallMode.IMMEDIATE,
        },
        (cb) => {
          if (
            cb == CodePush.SyncStatus.UP_TO_DATE ||
            cb == CodePush.SyncStatus.UPDATE_INSTALLED ||
            cb == CodePush.SyncStatus.UNKNOWN_ERROR
          ) {
            setCodePushFinished(true);
          }
        }
      );
    };

    codePushSync();
  }, []);

Feb 27 '24 14:02 ishiharas

For everyone looking here in 2k24:

I found the issue in my previous setup. I made my staging scheme a copy of my debug scheme. That's why the preprocessor macro was set to DEBUG=1 for staging as well. While the first sync works, after a restart, it would catch the default-bundleURL.

Deleting the preprocessor macro for staging fixed the issue.

Feb 28 '24 11:02 ishiharas

Any update on this? facing the same on Android. It's loading the bundle from codepush index.bundle.js but not reflecting the changes in android.

Mar 21 '24 06:03 tgp-fk

@ishiharas, your code snippet appears fine. Could you please create a minimal demo application to replicate the issue? @tgp-fk, I have the same request for you.

Mar 28 '24 11:03 DmitriyKirakosyan

For everyone looking here in 2k24:

I found the issue in my previous setup. I made my staging scheme a copy of my debug scheme. That's why the preprocessor macro was set to DEBUG=1 for staging as well. While the first sync works, after a restart, it would catch the default-bundleURL.
Deleting the preprocessor macro for staging fixed the issue.

this fixed the issue for me

Apr 29 '24 13:04 amanthegreatone

For everyone looking here in 2k24:

I found the issue in my previous setup. I made my staging scheme a copy of my debug scheme. That's why the preprocessor macro was set to DEBUG=1 for staging as well. While the first sync works, after a restart, it would catch the default-bundleURL.
Deleting the preprocessor macro for staging fixed the issue.