Viewshot not working Webview js point (Android)

I needed a plug-in that draws on pictures. That’s why I added pure js drawing in web view. But when I take a picture with viewshot, js lines are not visible. I am experiencing the same situation while testing online drawing applications on the internet. (Only Android)


import React from 'react';
import { StyleSheet, View, SafeAreaView,TouchableOpacity,Text,ScrollView ,Image} from 'react-native';
import ViewShot from 'react-native-view-shot'; 

export default class Test extends React.Component {

 this.refs.viewShot.capture().then(uri => {
 }); };

 render() {
 return ( 
 <View style={{flex:1}}>
<TouchableOpacity onPress={() => this.onConfirm()}><View><Text >Confirm</Text></View></TouchableOpacity> 
<ViewShot style={{flex:1}} ref="viewShot" options={{ format: "jpg", quality: 0.9 }}>
 <WebView source={{ uri: '' }} />

 ); }}  });

viewshot not working for line on android ? why ?

Example IOS

Example Android

An urgent situation for me, does anyone have any opinion or idea?

maybe this will help: Unable To take a screenshot of a website's graph (Canvas) loaded inside Web view in React native · Issue #315 · gre/react-native-view-shot · GitHub

Setting androidHardwareAccelerationDisabled={true} on the WebView fixed it for me, not sure if it is a good solution though.
EDIT: this cause serious performance issues (not a surprise) so it is not a viable workaround in my context.

if that doesn’t work for you, you could open a pr there to fix it

you could alternatively use something like expo-gl for drawing

1 Like

Oh God
You solved the problem I was dealing with for weeks in seconds.
I am grateful for your help.

this is work for me

          ref={(r) => (this.webref = r)}
          source={{ html: htmlStr }}
1 Like

If you haven’t yet, it might be worth looking at expo-pixi. e.g.:

1 Like

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.