Crashing to init react-native ios app with web page

Question

My application only loads one web page, but it is taking about 10 to 15 seconds to load the first time after installation, which caused Apple to reject my submission. My application was made in react-native.

I'm getting the returns in the compilation:

Warning: -[BETextInput attributedMarkedText] is unimplemented

WebContent process (0x11b01c680) took 1.044328 seconds to launch

Failed to request allowed query parameters from WebPrivacy.

My code:

import React, {useEffect, useState} from 'react';
import {View, Text, StyleSheet, SafeAreaView, BackHandler} from 'react-native';
import {WebView} from 'react-native-webview';

export default function App() {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    BackHandler.addEventListener('backPress', () => true);
    return () => BackHandler.removeEventListener('backPress', () => true);
  }, []);

  const handleLoad = () => {
    setIsLoading(false);
  };

  return (
    <SafeAreaView style={styles.container}>
      <WebView
        source={{uri: 'https://www.google.com'}}
        style={styles.webView}
        onLoad={handleLoad}
      />
      {isLoading && (
        <View style={styles.loadingContainer}>
          <Text style={styles.loadingText}>Carregando...</Text>
        </View>
      )}
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  webView: {
    flex: 1,
  },
  loadingContainer: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  loadingText: {
    fontSize: 20,
    color: 'white',
  },
});

I tried change my url, but it's not work. I remove my function to loading my web page and the erros and it was working, but i need use the functions.

Answer 1

I verify that my first loading page was craching.

My old code:

import { AppRegistry, Platform } from 'react-native';
import { request, PERMISSIONS } from 'react-native-permissions';
import App from './app';
import {name as appName} from './app.json';

const requestCameraPermission = async () => {
 AppRegistry.registerComponent(appName, () => App);

 if (Platform.OS === 'ios') {
     await request(PERMISSIONS.IOS.CAMERA);
 }

}

My application kept waiting for the permission request before loading the content, which caused it to crash.

I changed my code to:

import {AppRegistry} from 'react-native';
import App from './app';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

And my app.js

import React, {useEffect, useState} from 'react';
import {View, Text, StyleSheet, SafeAreaView, BackHandler} from 'react- 
native';
import {request, PERMISSIONS} from 'react-native-permissions';
import {WebView} from 'react-native-webview';

export default function App() {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
   BackHandler.addEventListener('backPress', () => true);
   return () => BackHandler.removeEventListener('backPress', () => true);
  }, []);

  const handleLoad = () => {
    setIsLoading(false);

    if (Platform.OS === 'ios') {
      request(PERMISSIONS.IOS.CAMERA);
    }
  };

  return (
  <SafeAreaView style={styles.container}>
  <WebView
    source={{uri: 'https://www.google.com.'}}
    style={styles.webView}
    onLoad={handleLoad}
  />
  {isLoading && (
    <View style={styles.loadingContainer}>
      <Text style={styles.loadingText}>Carregando...</Text>
    </View>
  )}
  </SafeAreaView>
  );
  }

This solved my problem.