Description
Hi!
I'm new with react native so this could be my mistake but neither the sample code does not work for me, the canvas remain empty.
So I try this for Windows:
import { useEffect, useRef } from 'react';
import {Text, TextInput, StyleSheet, SafeAreaView } from 'react-native';
import Canvas from 'react-native-canvas';
function Canv (prop) {
const canvasRef = useRef(null);
useEffect(() => {
if (canvasRef.current) {
const canvas = canvasRef.current;
const context = canvas.getContext('2d');
context.fillStyle = 'red';
context.fillText ("Test", 10, 10);
context.fillRect(0, 0, 100, 100);
}
}, [canvasRef, prop.text]);
return (
<SafeAreaView style={{ flex: 1 }}>
<Text>{prop.text}</Text>
<Canvas ref={canvasRef} style={[{ width: '100%', height: '100%', backgroundColor: 'transparent' }]} />
</SafeAreaView>
)
}
export default Canv;
If I debug a little a got this error message, but I don't know what it means or why I got this:
Error
at Canvas._callee$ (http://localhost:8081/index.bundle?platform=windows&dev=true&hot=false&inlineSourceMap=true:98642:24)
at tryCatch (http://localhost:8081/index.bundle?platform=windows&dev=true&hot=false&inlineSourceMap=true:46451:19)
at Generator. (http://localhost:8081/index.bundle?platform=windows&dev=true&hot=false&inlineSourceMap=true:46532:24)
at Generator.next (http://localhost:8081/index.bundle?platform=windows&dev=true&hot=false&inlineSourceMap=true:4…nlineSourceMap=true:46482:22)
at http://localhost:8081/index.bundle?platform=windows&dev=true&hot=false&inlineSourceMap=true:46503:15
at tryCallTwo (http://localhost:8081/index.bundle?platform=windows&dev=true&hot=false&inlineSourceMap=true:26561:7)
at doResolve (http://localhost:8081/index.bundle?platform=windows&dev=true&hot=false&inlineSourceMap=true:26693:15)
at new Promise (http://localhost:8081/index.bundle?platform=windows&dev=true&hot=false&inlineSourceMap=true:26580:5)
Any Idea? It would be great if worked it. Thank you!