unable to work together on iOS (react-native, net primarily based)

I am creating React & Subsequent.js primarily based net / app service.

it is being printed on each iOS and android utilizing react-native (with ExpoGo)

Swiftly, even plain enter and button began not engaged on ios bodily machine.

(additionally works on net in fact with atmosphere set to cell)

it really works on android, ios simulator, desktop besides ios bodily machine.

when i see VERCEL logs, it turned out that on ios actual machine it is solely getting pictures not pages or apis

so it seems like there’s an issue fetching JS Bundle.

am i able to get any assist about what simply happend or learn how to clear up this drawback??

beneath is React native code masking net

import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import {
  BackHandler,
  ColorSchemeName,
  Platform,
  StyleProp,
  StyleSheet,
  ViewStyle,
  useColorScheme,
  useWindowDimensions,
} from 'react-native';
import { WebView, WebViewMessageEvent } from 'react-native-webview';
import { WebViewNavigation, WebViewSourceUri } from 'react-native-webview/lib/WebViewTypes';
import { StatusBar, StatusBarStyle } from 'expo-status-bar';
import * as SplashScreen from 'expo-splash-screen';
import Constants from 'expo-constants';
import Lottie from 'lottie-react-native';
import { ThemeProvider } from '@emotion/react';
import styled from '@emotion/native';

import theme from './src/theme';

interface IContainer {
  isModal: boolean;
  isDarkMode: boolean;
}

const Container = styled.View<IContainer>(({ theme, isModal, isDarkMode }) => ({
  flex: 1,
  backgroundColor: isModal
    ? `${theme.colours.black}80`
    : isDarkMode
    ? theme.colours.black
    : theme.colours.white,
}));

const SplashContainer = styled.View(({ theme }) => ({
  ...StyleSheet.absoluteFillObject,
  justifyContent: 'middle',
  alignItems: 'middle',
  backgroundColor: theme.colours.major.default,
}));

SplashScreen.preventAutoHideAsync();

const getScript = (colorScheme: ColorSchemeName) => `
  doc.querySelector('html').classList.take away('mild', 'darkish');

  doc.querySelector('html').classList.add('${colorScheme}');

  doc.querySelector('html').model["color-scheme"] = '${colorScheme}';

  true;
`;

const App = () => {
  const { width } = useWindowDimensions();

  const colorScheme = useColorScheme();

  const [isLoad, setIsLoad] = useState(false);
  const [isReady, setIsReady] = useState(false);
  const [isModal, setIsModal] = useState(false);
  const [isDarkMode, setIsDarkMode] = useState(colorScheme === 'darkish');

  const webViewRef = useRef<WebView>(null);

  const lottieRef = useRef<Lottie>(null);

  const statusBarStyle = useMemo<StatusBarStyle>(() => , [isReady, isModal, isDarkMode]);

  const webViewStyle = useMemo<StyleProp<ViewStyle>>(() => {
    return {
      marginTop: Constants.statusBarHeight,
      backgroundColor: isDarkMode ? theme.colours.black : theme.colours.white,
    };
  }, []);

  const webViewContainerStyle = useMemo<StyleProp<ViewStyle>>(() => {
    return { flex: 1 };
  }, []);

  const supply = useMemo<WebViewSourceUri>(() => {
    return { uri: 'https://myservice_name.vercel.app' };
  }, []);

  const injectedJavaScript = useMemo(() => getScript(colorScheme), []);

  const splashStyle = useMemo<StyleProp<ViewStyle>>(() => {
    return { width, top: (900 * width) / 1284, marginTop: -15 };
  }, [width]);

  useEffect(() => {
    if (Platform.OS === 'android') {
      const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
        webViewRef.present?.goBack();

        return true;
      });

      return () => backHandler.take away();
    }
  }, []);

  const onLoad = useCallback(() => {
    setIsLoad(true);
  }, []);

  const onMessage = useCallback(({ nativeEvent }: WebViewMessageEvent) => {
    const information = JSON.parse(nativeEvent.information);

    if (information.sort === 'modal' && typeof information.isModal === 'boolean') {
      setIsModal(information.isModal);
    }
  }, []);

  const onNavigationStateChange = useCallback((occasion: WebViewNavigation) => {
    if (occasion.url.contains('https://myservice_name.vercel.app')) {
      webViewRef.present?.injectJavaScript(getScript(colorScheme));

      setIsDarkMode(colorScheme === 'darkish');
    } else {
      webViewRef.present?.injectJavaScript(getScript('mild'));

      setIsDarkMode(false);
    }
  }, []);

  const onLayout = useCallback(async () => {
    await SplashScreen.hideAsync();

    lottieRef.present?.play();
  }, []);

  const onAnimationFinish = useCallback(async () => {
    if (isLoad) {
      setTimeout(() => {
        setIsReady(true);
      }, 1000);
    }
  }, [isLoad]);

  return (
    <ThemeProvider theme={theme}>
      <StatusBar model={statusBarStyle} />

      <Container isModal={isModal} isDarkMode={isDarkMode}>
        <WebView
          ref={webViewRef}
          showsHorizontalScrollIndicator={false}
          showsVerticalScrollIndicator={false}
          autoManageStatusBarEnabled={false}
          overScrollMode="by no means"
          allowsBackForwardNavigationGestures
          renderLoading={undefined}
          model={webViewStyle}
          containerStyle={webViewContainerStyle}
          supply={supply}
          injectedJavaScript={injectedJavaScript}
          onLoad={onLoad}
          onMessage={onMessage}
          onNavigationStateChange={onNavigationStateChange}
        />

        {!isReady && (
          <SplashContainer>
            <Lottie
              ref={lottieRef}
              loop={false}
              model={splashStyle}
              supply={require('./belongings/lotties/splash.json')}
              onLayout={onLayout}
              onAnimationFinish={onAnimationFinish}
            />
          </SplashContainer>
        )}
      </Container>
    </ThemeProvider>
  );
};

export default memo(App);