How to resize react native webview content?

Related searches

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...

<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}
/>

Resize WebView to content height in react-native · GitHub, var ReactNative = require('react-native');. var {AppRegistry, Text, WebView, View, Dimensions} = ReactNative;. var WebViewResizing = React.createClass({. Go forward one page in the web view's history. goBack() goBack (); Go back one page in the web view's history. reload() reload (); Reloads the current page. stopLoading() stopLoading (); Stop loading the current page.

I believe you want this:

   <WebView 
        source={this.props.source} 
        style={{
            width: '100%',
            height: 300
        }}
        scrollEnabled={false}
        />;

React Native WebView Resizing by Content · GitHub, React Native WebView Resizing by Content. RNWebViewResizing.js. 'use strict';. import React, { Component } from 'react';. import {. AppRegistry,. ScrollView,. Resize WebView to content height in react-native. GitHub Gist: instantly share code, notes, and snippets.

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'}
  />

webview doesn't resize images in the content to fit the mobile screen , I use WebView from "react-native-webview" and I'm trying to make the web content fit into the mobile screen but images don't fit at all causing  In simple terms, WebView is a component that used to load webpages in your React Native app. It was formerly available out of the box in React Native, but it will now be removed from React Native core and added as a component of the React Native Community libraries; for more information, read The Slimmening proposal.

How to resize react native webview content? - react-native - html, 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  All your code in one place. Over 40 million developers use GitHub together to host and review code, project manage, and build software together across more than 100 million projects. Sign up for free See pricing for teams and enterprises. An auto resize content height webview for React Native.

An auto resize content height webview for React Native, An auto resize content height webview for React Native. Pure JavaScript,and easy to use. (rn >= 0.44). install. yarn add react-native-autoreheight-  'always' - WebView will allow a secure origin to load content from any other origin, even if that origin is insecure. 'compatibility' - WebView will attempt to be compatible with the approach of a modern web browser with regard to mixed content.

allowsInlineMediaPlayback. Boolean that determines whether HTML5 videos play inline or use the native full-screen controller. The default value is false.. NOTE: In order for video to play inline, not only does this property need to be set to true, but the video element in the HTML document must also include the webkit-playsinline attribute.

Comments
  • Can you set this property to false scalesPageToFit for WebView and try it
  • Does nothing...
  • Remove the style and set this! Can you explain more and a screenshot?
  • Check my update :-) However, I can't remove the flex style because the webview would not render. Any suggestions ?
  • @AshwinMothilal scalesPageToFit must not be used with useWebKit=true and useWebKit cannot be false as UIWebView is deprecated.
  • Thanks for your answer. Unfortunatly, it seems that react don't want to understand the resizing to 100% because the image is not entirely displayed. If I set scrollEnabled to true, I can see that it didn't resized. Please, check my update on my question to see the screenshots.
  • Isn't that part of the url the webview is loading? What is the source code of that? I am guessing it has a fixed width.