react-native-view-shot
react-native-view-shot copied to clipboard
Canvas is not captured when the width and height are manually set!
bug report
react-native-view-shot does not work with react-native-canvas, when the canvas dimension is assigned by user. Running example/src/Canvas.js works perfect, but when I set the width and height of the canvas, it does not work, returning blank image.
Version & Platform
npm ls react-native react-native-view-shot
├── [email protected]
└── [email protected]
Platform: Only in android
Actual behavior
returning blank image without error
Steps to reproduce the behavior
Add canvas width and height to the example of example/src/Canvas.js
//@flow
import React, { useRef, useState, useEffect, useCallback } from 'react';
import { SafeAreaView, Image } from 'react-native';
import ViewShot from 'react-native-view-shot';
import Canvas from 'react-native-canvas';
const dimension = { width: 300, height: 300};
const CanvasRendering = ({ onDrawn }) => {
const ref = useRef();
useEffect(() => {
ref.current.width=400;
ref.current.height=400;
// To set the canvas width and height
const ctx = ref.current.getContext('2d');
ctx.fillStyle = '#eee';
ctx.fillRect(0, 0, ref.current.width, ref.current.height);
ctx.fillStyle = 'red';
ctx.fillRect(120, 30, 60, 60);
ctx.fillStyle = 'blue';
ctx.fillRect(140, 50, 60, 60);
const timeout = setTimeout(onDrawn, 1000); // hack. react-native-canvas have no way to tell when it's executed
return () => clearTimeout(timeout);
}, [onDrawn]);
return <Canvas ref={ref} style={dimension} />;
};
const CanvasExample = () => {
const [source, setSource] = useState(null);
const viewShotRef = useRef();
const onCapture = useCallback(() => {
viewShotRef.current.capture().then(uri => setSource({ uri }));
}, []);
return (
<SafeAreaView>
<ViewShot ref={viewShotRef} style={dimension}>
<CanvasRendering onDrawn={onCapture} />
</ViewShot>
<Image fadeDuration={0} source={source} style={dimension} />
</SafeAreaView>
);
};
CanvasExample.navigationOptions = {
title: 'react-native-canvas',
};
export default CanvasExample;