How to use camera roll image in webview react native?
Multi tool use
How to use camera roll image in webview react native?
I'm trying to capture image from a webview in react native and then display the same on my html page.
Problem: I cannot access camera and save images from webview.
Solution: I am capturing and saving the images using react-native-camera.
Next Problem: I want to display this above saved image in my webview and then save it on a server.
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.
mywebview.js file
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 (<View style={[styles.container, styles.horizontal]}>
<ActivityIndicator size="large" color="#0000ff" />
<ActivityIndicator size="small" color="#00ff00" />
<ActivityIndicator size="large" color="#0000ff" />
<ActivityIndicator size="small" color="#00ff00" />
</View>);
}
render() {
return (
<WebView
//source={{uri:uri_source}}
source={HtmlPage}
style={{ marginTop: 2 }}
onMessage={this.msgHandler.bind(this)}
domStorageEnabled={true}
ref={(webView) => { this.webView.ref = webView; }}
renderLoading={this.renderLoading.bind(this)}
startInLoadingState
/>
);
}
}
export default WebViewScreen
index.html file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Native Boiler</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p>Hi from html 5</p>
<img src="file:///data/user/0/com.awesomeproject/files/pic.jpg" alt="Smiley face" height="42" width="42">
</body>
</html>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Basically i wish to use images stored in my phone and display then in my webview or access mobiel data from webview.
– Vivek
Jul 1 at 8:29