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)

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

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

maybe this will help: https://github.com/gre/react-native-view-shot/issues/315

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

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