Search code examples
react-nativereact-native-webview

Can I access to window object of react-native-webview application?


Can I access to window object of react-native-webview application? The reason why I am trying to do this is to quit android application when I cannot go back.

Here is my code. Can you guys help me with any clues?

export default function App (){
  useEffect(()=>{
    setCurrentUrl('https://google.co.kr')
    setTimeout(() => {
      SplashScreen.hide();
    }, 1000);
    if (Platform.OS === 'android') {
      BackHandler.addEventListener('hardwareBackPress', goback);
      return(
        BackHandler.removeEventListener('hardwareBackPress')
      )
    }
  },[])
  const [currentUrl, setCurrentUrl]=useState(null)
  const webViewRef = useRef(null)
  const goback = () => {
    webViewRef.current.goBack();
    return true
  };
  const onNavigationStateChange =(webViewState) =>{
    setCurrentUrl(webViewState.url)
  }

  return (
    <View style={{backgroundColor:'#fff',flex:1}}>
      <SafeAreaView style={{flex:1,}}>
        <WebView
          style={{flex:1,}}
          originWhitelist={['*']}
          ref={webViewRef}
          source={{ uri: currentUrl }}
          onNavigationStateChange={onNavigationStateChange}
        />
      </SafeAreaView>
    </View>
  );
}

Solution

  • You can use postMessage api to communicate between your App and your web page.