title: How to use camera in webview react native?
body: <p>I'm trying to capture image from a webview in react native and then display the same on my html page.</p>
  
  <p>Problem: I cannot access camera and save images from webview.</p>
  
  <p>Solution: I am capturing and saving the images using react-native-camera.</p>
  
  <p>Next Problem: I want to display this above saved image in my webview and then save it on a server.</p>
  
  <p>Note: My page is able to capture and save the data on server when i am opening it in a browser. I am facinf issues with webview in react native.</p>
  
  <p>mywebview.js file</p>
  
  <pre><code>import React from 'react';
  import { StyleSheet, View, WebView, ActivityIndicator } from 'react-native';
  
  const HtmlPage = require('./index.html');
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          justifyContent: 'center'
      },
      horizontal: {
          flexDirection: 'row',
          justifyContent: 'space-around',
          padding: 10
      }
  })
  
  class WebViewScreen extends React.Component {
  
      webView = {
          canGoBack: false,
          ref: null,
          postMessage: function () { }
      }
  
      renderLoading() {
          return (&lt;View style={[styles.container, styles.horizontal]}&gt;
              &lt;ActivityIndicator size="large" color="#0000ff" /&gt;
              &lt;ActivityIndicator size="small" color="#00ff00" /&gt;
              &lt;ActivityIndicator size="large" color="#0000ff" /&gt;
              &lt;ActivityIndicator size="small" color="#00ff00" /&gt;
          &lt;/View&gt;);
      }
  
      render() {
          return (
  
              &lt;WebView
                  //source={{uri:uri_source}}
                  source={HtmlPage}
                  style={{ marginTop: 2 }}
                  onMessage={this.msgHandler.bind(this)}
                  domStorageEnabled={true}
                  ref={(webView) =&gt; { this.webView.ref = webView; }}
                  renderLoading={this.renderLoading.bind(this)}
                  startInLoadingState
              /&gt;
  
          );
      }
  }
  export default WebViewScreen
  </code></pre>
  
  <p>index.html file</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
      &lt;meta charset="utf-8" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;title&gt;Native Boiler&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;p&gt;Hi from html 5&lt;/p&gt;
  
  
      &lt;img src="file:///data/user/0/com.awesomeproject/files/pic.jpg" alt="Smiley face" height="42" width="42"&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>