I had this issue. WebView would render when it was the only component returned, but not when nested in another View component.

For reasons I'm not entirely sure of the issue was resolved by setting a width property on the WebView component.

class App extends React.Component {
  render() {

    return (
      <View style={styles.container}>
        <WebView
          source={{uri: 'https://www.youtube.com/embed/MhkGQAoc7bc'}}
          style={styles.video}
        />
        <WebView
          source={{uri: 'https://www.youtube.com/embed/PGUMRVowdv8'}}
          style={styles.video}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-between',

  },
  video: {
    marginTop: 20,
    maxHeight: 200,
    width: 320,
    flex: 1
  }
});

I think u should run :

cd android && gradlew clean && cd .. && npx react-native run-android

The easiest way to inspect your WebView in React Native is to just use the Remote JS Debugger. This has the added benefit for working in either iOS or Android, since you're simply debugging the JavaScript that is running on your application.

In order to see the WebViews, you'll want to go a step further and use Chrome's Remote Devices.

If you click on Inspect next to your Document matching the index.html you're wanting to debug, you can then see all of the logs in the console for that WebView.

I added a <script> inside of index.html in the <header> that just does the following:

console.log('This is showing in the console!')

You can see in the image above, its logging out in the DevTools that is inspecting that WebView.

For more on react-native-webview debugging guide head on to Debugging Guide Docs