iddan / react-native-canvas

A Canvas component for React Native
MIT License
981 stars 172 forks source link

Canvas remain black on windows #303

Open kucsvan opened 1 year ago

kucsvan commented 1 year ago

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!