Viewshot not working Webview js point (Android)

[fikretsefa]

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)

Example:

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 {

 onConfirm(){
 this.refs.viewShot.capture().then(uri => {
 console.log(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: 'https://www.autodraw.com/' }} />
 </ViewShot> 
<View>

 ); }}  });

viewshot not working for line on android ? why ?

Example IOS

Example Android

[fikretsefa]

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

[brents]

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

[fikretsefa]

@brents

androidHardwareAccelerationDisabled={true}

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

<WebView
          style={styles.drawBg}
          ref={(r) => (this.webref = r)}
          useWebKit
          originWhitelist={['*']}
          scalesPageToFit
          source={{ html: htmlStr }}
          mixedContentMode={'compatibility'}
          javaScriptEnabled={true}
          domStorageEnabled={true}
          scrollEnabled={false}
          incognito={true}
          androidHardwareAccelerationDisabled={true}
        />

[wodin]

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

How to do Signature Capture in Expo?

Maybe start with one of these examples?