How to resize react native webview content?

Question

This is my code, I'm trying to load a stream from my IP camera.

  <View style={{flex:1,marginTop:70, flexDirection:'column', justifyContent:'space-between'}}>
    <Hue/>
    <View style={{flex:1}}>
        <WebView
        source={{uri: 'http://192.168.2.6:81/videostream.cgi?user=admin&pwd=XXXXX'}}
        style={{/*marginTop: 20, flex: 1, width:450, height:100*/}}
        javaScriptEnabled={false}
        domStorageEnabled={false}
        startInLoadingState={false}
        scalesPageToFit={false}
        scrollEnabled={true}
        />
    </View>
    <Text>Just some text</Text>

  </View>

<Hue/> is a component to check if the WebView is still loading (because in a normal case, it won't load if it's not the only component).

The width property have an ambiguous behavior: reducing it increase the height of the webview. Leaving an empty scrolling space.

Moreover, modifying the height of the webview component does nothing at all.

I tried to modify the parent view applying height and width with no luck.

Also, I did not find any props to modify the webview content itself.

Is there any way, or a react-native component that can help me to integrate my IP camera stream in my application ?

Any suggestion is very appreciated.

EDIT

Updated the code according to Ashwin's comment and I still get this :

EDIT 2

I updated my code according to sfratini answer but if I set the scroll enabled and then scroll, I'm able so see that there is always a part of the image not displayed. Seems that react does not understand to resize to 100%.. It's strange...

Answer 1

<WebView
  source={{
    uri: this.props.url
  }}
  style={{ height: height, width, resizeMode: 'cover', flex: 1 }}
  injectedJavaScript={`const meta = document.createElement('meta'); meta.setAttribute('content', 'width=width, initial-scale=0.5, maximum-scale=0.5, user-scalable=2.0'); meta.setAttribute('name', 'viewport'); document.getElementsByTagName('head')[0].appendChild(meta); `}
  scalesPageToFit={false}
  onLoadEnd={this._onLoadEnd}
/>

Answer 2

Managed to get the same behavior for ios and Android. Thanks Gowtham Palanisamy.

<WebView
    source={{ uri: url }}
    style={{ flex: 1 }}
    injectedJavaScript={`
     const iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
     if (!iOS) {
       const meta = document.createElement('meta');
       let initialScale = 1;
       if(screen.width <= 800) {
        initialScale = ((screen.width / window.innerWidth) + 0.1).toFixed(2);
       }
       const content = 'width=device-width, initial-scale=' + initialScale ;
       meta.setAttribute('name', 'viewport');
       meta.setAttribute('content', content);
       document.getElementsByTagName('head')[0].appendChild(meta);
     }
   `}
    scalesPageToFit={Platform.OS === 'ios'}
  />