Remove Android WebView from view system before calling destroy()

[nfischer]

Bug description:

React-native needs to remove WebView from the view hierarchy before calling .destroy(). From this comment it seems react-native is not doing so:

...
W/cr_AwContents: WebView.destroy() called while WebView is still attached to window.
...

This probably isn't causing a crash (WebView tries to handle this case gracefully), but older versions of WebView may not handle this as gracefully (I've observed crashes on really old Android versions).

To Reproduce:

Not sure. This log message probably repros every time you trigger the cleanup code path.

Expected behavior:

The documentation states:

This method should be called after this WebView has been removed from the view system. No other methods may be called on this WebView after destroy.

https://developer.android.com/reference/android/webkit/WebView.html#destroy()

Screenshots/Videos:

N/A

Environment:

• OS: Android
• OS version: probably all
• react-native version:
• react-native-webview version:

[srajesh636]

Hi Nate is there any fix for the above issue coming soon . We are facing exactly the same issue. on android.

[nfischer]

I don't work on react-native-webview, but the fix would need to be in this project.

[github-actions]

Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically

[ysfzrn]

I resolved with using conditional rendering, like this. Before pop action, I set show state to false

const AccountDetailScreen = ({route, navigation}) => {
  const {title, url} = route.params;
  const [show, setShow] = useState(true);

  useFocusEffect(
    useCallback(() => {
      const onBackPress = () => {
        setShow(false);
        return false;
      };
      BackHandler.addEventListener('hardwareBackPress', onBackPress);
      return () =>
        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
    }, []),
  );

  const goBack = () => {
    setShow(false);
    navigation.pop();
  };

  return (
    <SafeAreaView style={[styles.container]}>
      <Header title={title} onPress={goBack} />
      {show && (
        <WebView
          style={styles.view}
          renderLoading={() => <Loader backgroundColor="white" />}
          startInLoadingState
          source={{uri: url}}
        />
      )}
    </SafeAreaView>
  );
};
```_

[zlwu]

when using react navigation, we can hide WebView in event listener

  React.useEffect(() => navigation.addListener('blur', () => setShow(false)), [ navigation ]);

[Leanderson-Coelho]

when using react navigation, we can hide WebView in event listener

  React.useEffect(() => navigation.addListener('blur', () => setShow(false)), [ navigation ]);

it worked here!!!! thank you <3

[github-actions]

Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically