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>
);
}