search

zoontek / react-native-bootsplash

🚀 Show a splash screen during app startup. Hide it when you are ready.
MIT License
3.72k stars 256 forks source link

Blank screen on reload app RN 0.71.7 #449

Closed richardReitz closed 1 year ago

richardReitz commented 1 year ago

Bug summary

My app is opening the first time normally, the fast refresh is working perfectly, but when I reload the application it breaks and comes back with a blank screen, and it seems to lose connection with Metro. Closing and opening the app again the blank screen continues, it only works again building.

AppDelegate.mm:

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"AppName";
  // 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];

  [super application:application didFinishLaunchingWithOptions:launchOptions];

  [AppCenterReactNative register];
  [AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];

  UIView *rootView = self.window.rootViewController.view; // ⬅️ ❗️ only required for react-native >= 0.71
  [RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView]; // ⬅️ initialize the splash screen

  return YES;
}

package.json:

  "dependencies": {
    "@apollo/client": "^3.7.12",
    "@gorhom/bottom-sheet": "^4",
    "@hookform/resolvers": "^3.1.0",
    "@invertase/react-native-apple-authentication": "^2.2.2",
    "@jridgewell/gen-mapping": "^0.3.3",
    "@mapbox/polyline": "^1.2.0",
    "@native-html/iframe-plugin": "1.1.2",
    "@react-native-async-storage/async-storage": "^1.18.1",
    "@react-native-clipboard/clipboard": "^1.11.2",
    "@react-native-community/datetimepicker": "^7.0.1",
    "@react-native-community/hooks": "^3.0.0",
    "@react-native-community/netinfo": "^9.3.9",
    "@react-native-firebase/analytics": "^17.4.2",
    "@react-native-firebase/app": "^17.4.2",
    "@react-native-google-signin/google-signin": "^9.0.2",
    "@react-native-masked-view/masked-view": "^0.2.9",
    "@react-native-picker/picker": "^2.4.10",
    "@react-navigation/bottom-tabs": "^6.5.7",
    "@react-navigation/drawer": "^6.6.2",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/stack": "^6.3.16",
    "@rnmapbox/maps": "^10.0.3",
    "@sentry/react-native": "^5.3.1",
    "@turf/helpers": "^6.5.0",
    "appcenter": "^4.4.5",
    "appcenter-analytics": "^4.4.5",
    "axios": "^1.3.5",
    "card-validator": "^8.1.1",
    "date-fns": "^2.29.3",
    "deprecated-react-native-prop-types": "^4.0.0",
    "easy-peasy": "^5.2.0",
    "formik": "^2.2.9",
    "graphql": "^15.5.0",
    "haversine-distance": "^1.2.1",
    "i18n-js": "3.7.1",
    "immer": "^10.0.1",
    "intl": "^1.2.5",
    "launchdarkly-react-native-client-sdk": "^7.1.4",
    "lodash": "^4.17.21",
    "lottie-react-native": "^5.1.5",
    "meilisearch": "^0.32.3",
    "ramda": "^0.29.0",
    "react": "18.2.0",
    "react-hook-form": "^7.43.9",
    "react-native": "0.71.7",
    "react-native-actionsheet": "^2.4.2",
    "react-native-animatable": "^1.3.3",
    "react-native-animated-pagination-dot": "^0.4.0",
    "react-native-autolink": "^4.1.0",
    "react-native-background-timer": "^2.4.1",
    "react-native-base64": "^0.2.1",
    "react-native-bootsplash": "^4.6.0",
    "react-native-branch": "5.8.0",
    "react-native-calendar-events": "^2.2.0",
    "react-native-camera": "^4.2.1",
    "react-native-circular-progress": "^1.3.8",
    "react-native-code-push": "^8.0.1",
    "react-native-confirmation-code-field": "^7.3.1",
    "react-native-device-info": "^10.6.0",
    "react-native-document-picker": "^8.2.0",
    "react-native-draggable-grid": "^2.1.7",
    "react-native-easy-grid": "^0.2.2",
    "react-native-error-boundary": "^1.2.3",
    "react-native-fast-image": "^8.6.3",
    "react-native-fbsdk-next": "^11.2.1",
    "react-native-fs": "^2.20.0",
    "react-native-geocoder-reborn": "^0.9.0",
    "react-native-geolocation-service": "^5.3.1",
    "react-native-gesture-handler": "^2.9.0",
    "react-native-health": "^1.14.0",
    "react-native-image-cache-wrapper": "^1.0.7",
    "react-native-image-crop-picker": "^0.39.0",
    "react-native-image-gallery": "^2.1.5",
    "react-native-image-pan-zoom": "^2.1.12",
    "react-native-image-size": "^1.1.3",
    "react-native-iphone-x-helper": "^1.3.1",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-linear-gradient": "^2.6.2",
    "react-native-localize": "^2.2.6",
    "react-native-masked-text": "^1.13.0",
    "react-native-modal": "^13.0.1",
    "react-native-modal-datetime-picker": "^15.0.0",
    "react-native-modalize": "^2.1.1",
    "react-native-notification-badge": "^1.0.5",
    "react-native-onesignal": "^4.5.1",
    "react-native-paper": "^5.7.0",
    "react-native-pell-rich-editor": "^1.9.0",
    "react-native-permissions": "3.7.3",
    "react-native-picker-select": "^8.0.4",
    "react-native-portalize": "^1.0.7",
    "react-native-progress": "^5.0.0",
    "react-native-public-ip": "^1.0.2",
    "react-native-qrcode-scanner": "^1.5.5",
    "react-native-qrcode-svg": "^6.2.0",
    "react-native-reanimated": "^3.1.0",
    "react-native-render-html": "5.0.1",
    "react-native-responsive-fontsize": "^0.5.1",
    "react-native-safe-area-context": "^4.5.1",
    "react-native-screens": "^3.20.0",
    "react-native-sectioned-multi-select": "^0.9.1",
    "react-native-sha256": "^1.4.9",
    "react-native-share": "^8.2.2",
    "react-native-simple-radio-button": "^2.7.4",
    "react-native-simple-toast": "1.1.4",
    "react-native-skeleton-placeholder": "^5.2.4",
    "react-native-smart-gallery": "^1.2.1",
    "react-native-snackbar": "^2.4.0",
    "react-native-snackbar-component": "^1.1.12",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-svg": "^13.9.0",
    "react-native-svg-charts": "^5.4.0",
    "react-native-svg-transformer": "^1.0.0",
    "react-native-swipe-list-view": "^3.2.9",
    "react-native-switch": "^1.5.1",
    "react-native-uuid": "^2.0.1",
    "react-native-video": "^6.0.0-alpha.6",
    "react-native-view-shot": "^3.6.0",
    "react-native-webview": "^12.0.2",
    "react-query": "^3.39.3",
    "reading-time": "^1.5.0",
    "realm": "^11.8.0",
    "reanimated-collapsible-helpers": "^1.0.0",
    "recoil": "^0.7.7",
    "recyclerlistview": "^4.2.0",
    "rn-fetch-blob": "0.13.0-beta.2",
    "rn-sliding-up-panel": "^2.4.6",
    "styled-components": "^5.3.9",
    "styled-system": "^5.1.5",
    "yarn": "^1.22.19",
    "yup": "^1.1.1",
    "zustand": "^4.3.7"
  },

Any idea what could be causing this?

Library version

4.6.0

Environment info

OS: macOS 12.6.4
    CPU: (4) x64 Intel(R) Core(TM) i7-4578U CPU @ 3.00GHz
    Memory: 1.56 GB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    Yarn: 1.22.19 - ~/Documents/client-mobile-v2/node_modules/.bin/yarn
    npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
    Watchman: 2023.04.03.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.12.0 - /Users/developer/.rvm/gems/ruby-3.2.2/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 2022.2 AI-222.4459.24.2221.9862592
    Xcode: 14.2/14C18 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.18 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.7 => 0.71.7 
    react-native-macos: Not Found
  npmGlobalPackages:
    react-native: Not Found

Steps to reproduce

  1. Creating the application in an IOS simulator.
  2. The app works fine on navigation.
  3. Reloading the app directly on the simulator or on the Metro, the application returns to a blank screen.

https://user-images.githubusercontent.com/93951962/236692882-66d4e44b-e489-48ab-b579-e377667ce3ef.mp4

Reproducible sample code

See the bug description for code snippets.
zoontek commented 1 year ago

That's the expected behavior.

The splash screen is native, reloading the app just restart the React Native part of the app, it doesn't kill and relaunch it.