react-native-canvas | A Canvas component for React Native | Frontend Framework library

The black border is the whole canvas area

• when the rectangle is moved, it leaves a black traces which cannot be removed
• when rectangle is moved down it is hidden at some point. I think 75% of canvas is not working.

the working example is here Canvas Basic Snack

While I was making another app, I ran into an issue with react-native-canvas, so I created this minimal project. The issue is that the WebView is much smaller than the Canvas and does not fill up the entire canvas when it should. Here is the code (very similar to the example code):

following are the errors being returned 'Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.' This error is specifically telling me to review the 'Dates' and 'Canvas' element defs in the code. Also, says to check the render method of 'App.'

I want to mirror an analog segment display in my React Native app. The segment display is quite complicated, it consists of more than 100 different segments. It contains three 7-segment displays for numbers and a progress bar with 20 elements. The rest are custom shapes and symbols that provide information about the current state of the machine it is attached to. I have some experience with the HTML canvas and found the React Native module react-native-canvas and wanted to give it a try. However, drawing on the react-native-canvas seems to be quite slow compared to the HTML canvas that I can use in a web-browser.

Here is what I do:

1. I import the module in my component:

import Canvas, {Image as CanvasImage, Path2D, ImageData} from 'react-native-canvas';

1. Add a canvas element to my render function:

1. store a reference to the canvas and set its size: