React Native 0.73 Onboarding Flash Loading & Blank Screen

[batusenyuz]

Description

Hi Everyone,

// Place this code after "[self.window makeKeyAndVisible]" and before "return YES;" UIStoryboard sb = [UIStoryboard storyboardWithName:@"LaunchScreen" bundle:nil]; UIViewController vc = [sb instantiateInitialViewController]; rootView.loadingView = vc.view;

We can no longer paste this code into the AppDelegate.m file. Not working.

https://reactnative.dev/docs/publishing-to-app-store

this code is not working

My app.tsx file is as below.

import React, {useEffect} from 'react';

import {AuthContext} from './contexts/AuthContext';
import {UserContext} from './contexts/UserContext';

import {useAuth} from './hooks/useAuth';

//Navigation
import {NavigationContainer} from '@react-navigation/native';
import MainStack from './navigations/MainStack';
import AuthStack from './navigations/AuthStack';
import {Host} from 'react-native-portalize';
import {GestureHandlerRootView} from 'react-native-gesture-handler';
import {LogBox, useColorScheme} from 'react-native';
import {darkTheme} from './theme/dark';
import {lightTheme} from './theme/light';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import LoadingScreen from './components/LoadingScreen';
import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';

import PushNotification from 'react-native-push-notification';
import messaging from '@react-native-firebase/messaging';

const RootStack = createNativeStackNavigator();

const App = () => {
  React.useEffect(() => {
    const unsubscribe = messaging().onMessage(async remoteMessage => {
      //Alert.alert('A new FCM message arrived!', JSON.stringify(remoteMessage));
      console.log(remoteMessage);
      PushNotification.localNotification({
        channelId: 'wondera',
        color: '#7a96a2',
        title: remoteMessage.notification.title, // (optional)
        message: remoteMessage.notification.body,
        picture: remoteMessage.data.fcm_options.image,
      });
    });

    return unsubscribe;
  }, []);

  const config = {
    screens: {
      AuthStack: {
        screens: {
          Login: 'login',
          Register: 'register',
        },
      },
      MainStack: {
        screens: {
          Home: {
            screens: {
              Meditasyon: 'meditation',
            },
          },
        },
      },
    },
  };

  const linking = {
    prefixes: ['https://wondera.co', 'wondera://'],
    config,
  };

  const scheme = useColorScheme();

  const {auth, state} = useAuth();

  function renderScreens() {
    if (state.loading) {
      return <RootStack.Screen name={'Loading'} component={LoadingScreen} />;
    }

    return state.user ? (
      <RootStack.Screen name={'MainStack'}>
        {() => (
          <UserContext.Provider value={state.user}>
            <MainStack />
          </UserContext.Provider>
        )}
      </RootStack.Screen>
    ) : (
      <RootStack.Screen name={'AuthStack'} component={AuthStack} />
    );
  }
  React.useEffect(() => {
    LogBox.ignoreAllLogs();
    //PushNotification.localNotification({
    //  channelId: 'overdaze',
    //  color: '#c71b1b',
    //  title: 'deneme', // (optional)
    //  message: 'deneme',
    //  picture: remoteMessage.data.fcm_options.image, // (required)
    //});
  }, []);

  return (
    <GestureHandlerRootView style={{flex: 1}}>
      <AuthContext.Provider value={auth}>
        <BottomSheetModalProvider>
          <NavigationContainer
            linking={linking}
            theme={scheme === 'dark' ? darkTheme : lightTheme}>
            <Host>
              <RootStack.Navigator
                screenOptions={{
                  headerShown: false,
                  animationEnabled: false,
                }}>
                {renderScreens()}
              </RootStack.Navigator>
              {/* <RootStack /> */}
              {/* <AuthStack /> */}
            </Host>
          </NavigationContainer>
        </BottomSheetModalProvider>
      </AuthContext.Provider>
    </GestureHandlerRootView>
  );
};

export default App;

While waiting for the RenderScreen command, LoadingScreen appears. But I want either MainStack or AuthStack to be opened before this loadingScreen appears. I don't want to use plugins like react-native-splash-screen.

How can I avoid this problem?

How can I avoid this problem?How can I avoid this problem?

PROBLEM VIDEO https://github.com/facebook/react-native/assets/122183314/3ea4dc88-c4ad-4809-816f-5dd7dc205e94

App.tsx

Steps to reproduce

rm -rf node_modules rm -rf ios/Pods yarn npx pod-install ios yarn start yarn ios

React Native Version

0.73.6

Affected Platforms

Runtime - iOS

Output of npx react-native info

System:
  OS: macOS 14.4.1
  CPU: (10) arm64 Apple M1 Max
  Memory: 5.97 GB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.9.0
    path: /usr/local/bin/node
  Yarn:
    version: 1.22.19
    path: /usr/local/bin/yarn
  npm:
    version: 10.4.0
    path: /usr/local/bin/npm
  Watchman:
    version: 2024.01.22.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.4
      - iOS 17.4
      - macOS 14.4
      - tvOS 17.4
      - visionOS 1.1
      - watchOS 10.4
  Android SDK: Not Found
IDEs:
  Android Studio: 2023.2 AI-232.10300.40.2321.11668458
  Xcode:
    version: 15.3/15E204a
    path: /usr/bin/xcodebuild
Languages:
  Java: Not Found
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.6
    wanted: 0.73.6
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Stacktrace or Logs

..qweqwe

Reproducer

.

Screenshots and Videos

https://github.com/facebook/react-native/assets/122183314/3ea4dc88-c4ad-4809-816f-5dd7dc205e94

[github-actions[bot]]

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available - 0.73.7. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[github-actions[bot]]

:warning:	Missing Reproducible Example
:information_source:	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[mlazari]

It looks like that documentation should be updated.

In 0.74 a new customizeRootView function was added - https://github.com/facebook/react-native/pull/42088, which I think can be used something like this:

#import <React/RCTRootView.h>

// ...

- (void)customizeRootView:(RCTRootView *)rootView
{
  UIStoryboard *sb = [UIStoryboard storyboardWithName:@"LaunchScreen" bundle:nil];
  UIViewController *vc = [sb instantiateInitialViewController];
  rootView.loadingView = vc.view;
}

In 0.73 probably something like this could work?

#import <React/RCTRootView.h>

// ...

- (UIView *)createRootViewWithBridge:(RCTBridge *)bridge
                          moduleName:(NSString *)moduleName
                           initProps:(NSDictionary *)initProps
{
  RCTRootView *rootView = (RCTRootView *)[super createRootViewWithBridge:bridge moduleName:moduleName initProps:initProps];
  UIStoryboard *sb = [UIStoryboard storyboardWithName:@"LaunchScreen" bundle:nil];
  UIViewController *vc = [sb instantiateInitialViewController];
  rootView.loadingView = vc.view;
  return rootView;
}

[batusenyuz]

Thanks @mlazari, do you think this will solve the loading issue in the app.tsx file? I want the launchscreen to appear until the renderscreens function is completed.

[mlazari]

@batusenyuz Not sure about that, I just indicated where I think is the new place for that code in 0.73 / 0.74. I am not using it and didn't test it, so not sure if that's correct or not.

[caglardurmus]

This https://github.com/facebook/react-native/issues/44195#issuecomment-2072618174 solved my problem on 0.74.0. I am using same "LaunchScreen" in 0.70.14 and it works perfect. But in this version its zooming before the exit. I tried to disable animation but i cant. Is anyone has the same issue?

[batusenyuz]

Hi @caglardurmus, I'm also having the zoom animation issue.

[caglardurmus]

Any solution?

[batusenyuz]

react native library and documentation should be updated according to new updates and this should be done urgently.

@cortinico

[batusenyuz]

We expect support from the community on this issue!

[mlazari]

@batusenyuz Could you create a new React Native project with a minimal reproducible example? That would help others to better understand the issue and look into it.

[vicneinei]

@mlazari @caglardurmus @batusenyuz In our app, we don't have an animated loadingView, but the upgrade from 0.72.5 to 0.73/74 caused the loadingView to be zoomed. Before upgrading we were setting the loadingView after creating the window but now customizeRootView is called before. I was able to prevent this by patching the react-native/Libraries/AppDelegate/RCTAppDelegate.mm file.

diff --git a/node_modules/react-native/Libraries/AppDelegate/RCTAppDelegate.mm b/node_modules/react-native/Libraries/AppDelegate/RCTAppDelegate.mm
index d79fbb4..183be60 100644
--- a/node_modules/react-native/Libraries/AppDelegate/RCTAppDelegate.mm
+++ b/node_modules/react-native/Libraries/AppDelegate/RCTAppDelegate.mm
@@ -65,7 +65,6 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
     [RCTComponentViewFactory currentComponentViewFactory].thirdPartyFabricComponentsProvider = self;
   }
   [self _logWarnIfCreateRootViewWithBridgeIsOverridden];
-  [self customizeRootView:(RCTRootView *)rootView];

   self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
   UIViewController *rootViewController = [self createRootViewController];
@@ -74,6 +73,8 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
   self.window.windowScene.delegate = self;
   [self.window makeKeyAndVisible];

+  [self customizeRootView:(RCTRootView *)rootView];
+
   return YES;
 }