getting white screen when taking screenshot

[Akshaybagai52]

When i'm taking screenshot with "react-native-view-shot" package then i'm getting blank in signature screen can anyone tell me what to do for this behaviour

[YanYuanFE]

https://github.com/gre/react-native-view-shot/issues?q=webview+canvas

[YanYuanFE]

The problem is caused by the use of Webview and Canvas. I think of an alternative. You can use the generated signature base64 to replace the webview after drawing, so that you can take a screenshot

[Akshaybagai52]

can you elaborate more to me so that i can try that Thanks for reply

[YanYuanFE]

export default function App() {
  const [img, setImg] = useState(null);
  const [sign, setSign] = useState(null);
  const ref = useRef();

  const onCapture = () => {
    ref.current.capture().then(uri => {
      console.log("do something with ", uri);
      setImg(uri);
      // setSign(null);
    });
  }

  useEffect(() => {
    if(sign) {
      setTimeout(() => {
        onCapture();
      }, 300)
    }
  }, [sign]);
  return (
      <View style={styles.container}>
        <ViewShot ref={ref} options={{ fileName: "Your-File-Name", format: "png", quality: 0.9, result: 'data-uri' }}>
          <View style={{
            width: 400,
            height: 300
          }}>
            {sign ? (
                <Image
                    resizeMode={"contain"}
                    style={{ width: 400, height: 114 }}
                    source={{ uri: sign }}
                />
            ) : <Sign text="Test" onOK={(img) => {
              console.log('ok')
              setSign(img);
              onCapture();
            }} />}
          </View>
          <Text>...Something to rasterize...</Text>
        </ViewShot>
        <View style={styles.preview}>
          {img ? (
              <Image
                  resizeMode={"contain"}
                  style={{ width: 335, height: 114 }}
                  source={{ uri: img }}
              />
          ) : null}
        </View>
      </View>
  );
}