Skip to content

Canvas component for using VexFlow on React Native. 🖼

Notifications You must be signed in to change notification settings

erenyenigul/react-native-vexflow-canvas

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-vexflow-canvas 🎇

This a simple package that enables using VexFlow in React Native. Below, you can find an example on how to use VexCanvas. If you like, you can also read the small documentation which is also down below.

Example usage:

import VexCanvas from "react-native-vexflow-canvas";

// some other imports... 

const MyVexView = () => {
    const draw = (ref) => {
        const context = ref.getContext(); // get the context from the canvas.
        context.clear(); // To have a clean canvas in every render.

        /*
            Your VexFlow Code After Here
        */

        const stave = new Stave(0, 0, 250, 250);

        stave.setContext(context);
        stave.draw();
    };

    return (<View>
                <VexCanvas
                    draw={draw} // this prop allows access to Canvas, and thus the context. Pass a function to it.
                ></VexCanvas>
            </View>
    );
};

Documentation 📑

The package provides two main utilities: VexCanvas and RNVexFlowSVGContext.

VexCanvas

Prop Descripton 
width width of the canvas.
height height of the canvas.
draw callback function which takes a reference to canvas. you can use it to access the context.
Method Descripton 
getContext() returns the context (RNVexFlowSVGContext).

RNVexFlowSVGContext

This is a class that VexFlow will use to create a SVG element (react-native-svg).

Method Descripton 
render() returns a React element that is filled with correct SVG elements (like text, path etc.)

There are other methods of RNVexFlowSVGContext that are only used by VexFlow to fill the canvas. You can check them out in the source code.

About

Canvas component for using VexFlow on React Native. 🖼

Resources

Stars

Watchers

Forks

Packages

No packages published