React-native-webview running twice

0

Contextualizing:

Hello everyone, I have a webview that is called after the user logs in. During testing, with the consoles I have seen that my code is running twice instead of once. This is causing me some problems with camera execution. When calling the page from the webview I show a spinner while the page is not loading. After loading, as the user browses the pages I use a useEffect to listen to the url. When the user is directed to a certain address I go back to the app’s login screen.

The problem:

Unfortunately I HAVE to use the webview to open the device’s camera, however as the code is running twice I’m having some conflicts, sometimes the camera appears, then not. That’s why I would like the execution to be linear, executing the houvinte only when it is called

My Code:

import React, { useState, useEffect, useRef } from 'react';
import { Text, View, StyleSheet, BackHandler } from 'react-native';
import { WebView } from 'react-native-webview';
import { Camera } from 'expo-camera'
import { ActivityIndicator } from 'react-native';
/* import { useNavigation } from '@react-navigation/native'; */

export default function WebViewUsrLogado(/* props:any */) {
 /*  const propriedade = props.route.params.url */
  const [hasPermission, setHasPermission] = useState<any | null>(null);
  const [UrlTransicao, setUrl] = useState('');
  const [type, setType] = useState(Camera.Constants.Type.back);
  const webViewRef = useRef<any | null>(null)
 /*  const navigation = useNavigation(); */
  
  const Spinner = () => (
    <View style={styles.activityContainer}>
      <ActivityIndicator size="large" color="#f29900" />
    </View>
  );

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  useEffect(() => {

    const backAction = () => {
      webViewRef.current.goBack();
      return true;
    };
    const backHandler = BackHandler.addEventListener('hardwareBackPress', backAction);
    return () => backHandler.remove();
  }, []);


  if (hasPermission === null) {
    return <View />;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }
  function voltar(url: any){
    if (url != 'otherurll') {
      console.log('Diferente')
    } else {
      console.log('iGUAL');
     /*  let canGoBack = navigation.canGoBack();
      if (canGoBack) {
        navigation.goBack();
      } else{
        console.log('tENTOU FAZER AÇÃO MAIS DE UMA VEZ')
      } */
    }
  }
  return (
    <View style={styles.container}>
      <WebView
        source={{ uri: 'myurl' }}
        ref={webViewRef}
        style={styles.view}
        originWhitelist={['*']}
        allowsInlineMediaPlayback
        javaScriptEnabled
        scalesPageToFit
        mediaPlaybackRequiresUserAction={false}
        javaScriptEnabledAndroid
        useWebkit
        startInLoadingState={true}
        renderLoading={Spinner}
        onNavigationStateChange={(event)=>{
          setUrl(event.url)
          voltar(event.url)
        }}
      />
    </View>
  );
}