Use with React / React-native?

[davidfloegel]

Hi there,

Is it possible to use vexflow with react (react-native) at all? I've used this library before for a phonegap based app but switching to react and would love to keep using this one!

Cheers david

[gristow]

Sounds like maybe react-native-svg isn't processing absolute vs relative move commands in paths correctly. (Absolute is capital M, relative is lower case m.)

[panarch]

Hi everyone, I have a good news.

Now VexFlow runs with React Native including font rendering. You can use this, https://github.com/panarch/standalone-vexflow-context and seed project url is here, https://github.com/panarch/react-native-vexflow-seed I think it will work fine for any cases, but I didn't integrate VexFlow tests with this new context yet so it may have some bugs.

I wanted to participate since @matt-gardner reactivated but huh, I was having quite tough schedule on my 6 weeks trip so... now it's the last week of my long vacation and I made some work. Thanks @matt-gardner for participation, I was able to avoid the absolute path of react-native-svg bug easily because of you.

At first, I thought making VexFlow run with React Native might be similar with Node.js, but it was very different issue.

What I did first was replacing my previous TextSVGContext render function to use react-native-svg rather than react server-side rendering function.

Then, other big issue was font. Because we cannot use powerful font feature of web browsers in Node.js & React Native, I used some tricks for making VexFlow run on Node.js.(far above on this thread I mentioned)

It was easy to use file system in Node.js, but in React Native... it looked little bit messy to use file system directly for loading font files. So, for making the issue simple, I just converted raw font files to base64 to solve. (Similar work what https://github.com/mudcube/MIDI.js/ does for soundfont)

standalone-vexflow-context currently only supports react native for now. I'll add Node.js context later.

[davidfloegel]

That is amazing!! Thank you so much :)

[SalahAdDin]

@panarch, thank you very much, why will you add Node.js context?

[panarch]

@SalahAdDin I just want to run VexFlow in my server without browser emulation. With Node.js context, we can render VexFlow without browser so it can make sense in may purposes.

[msand]

@panarch @davidfloegel @0xfe I've done a lot of work to improve the svg spec conformance and rendering accuracy of react-native-svg on android. You might want to try testing my fork, until it gets ported to ios and merged into master.

https://github.com/react-native-community/react-native-svg/pull/406

https://github.com/msand/react-native-svg/tree/5.3.0-conformance

[msand]

I'm currently implementing and improving https://drafts.csswg.org/css-inline/#propdef-alignment-baseline and https://svgwg.org/svg2-draft/text.html#AlignmentBaselineProperty

Therefore, I need access to the os2 and hhea baseline tables from all the glyphs in the used fonts. https://www.microsoft.com/typography/otspec/base.htm https://www.microsoft.com/typography/otspec/os2.htm https://www.microsoft.com/typography/otspec/hhea.htm https://developer.apple.com/fonts/TrueType-Reference-Manual/RM06/Chap6bsln.html

Which is probably highly relevant to your use cases as well. Related material: http://bl.ocks.org/eweitnauer/7325338 http://apike.ca/prog_svg_text_style.html http://christopheraue.net/2014/03/05/vertical-align/ http://vanseodesign.com/web-design/svg-text-baseline-alignment/ https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align https://stackoverflow.com/questions/19856094/computing-font-truetype-hhea-values-ascender-descender

I'm now in the choice of opentype.js and something like: https://software.intel.com/en-us/articles/building-freetype-libraries-for-x86-devices-using-the-android-ndk

opentype.js would allow keeping all the logic in js, instead of both java + obj-c, but might have a performance impact. While building on and bundling freetype probably adds more to the app size and requires the NDK. Then again, the data only needs to be parsed once per configured font. Any suggestions/input?

[msand]

@matt-gardner you should probably get a mention about the fork/pull request as well

[msand]

I've forked the seed project, updated react, react-native, and, react-native-svg (using both master and my fork), ported the code to android, and updated the android build setup. If anyone is interested you can check it out here: https://github.com/msand/react-native-vexflow-seed

[msand]

[0xfe]

Wow, looks great Mike! Thanks for doing this. Would you mind adding some instructions to the Wiki?

[njwest]

Happy to find this thread! You guys have done some awesome work

I get the following error after I git clone, npm i, and react-native run-ios@msand's fork of https://github.com/msand/react-native-vexflow-seed

[msand]

@njwest Haven't touched this for quite some time, I guess there's newer/more changes in react-native-svg that I need to adapt the code to, or then I had monkey-patched it to work around that problem. Might look at it in the weekend.

[njwest]

@msand Many thanks for the response -- could you post the package versions your fork works with?

[ulisinn]

"dependencies": { "lodash": "^4.17.4", "midiutils": "0.0.4", "mobx": "^3.3.2", "mobx-react": "^4.3.5", "react": "16.0.0", "react-native": "0.50.4", "react-native-svg": "^6.0.1-rc.1", "standalone-vexflow-context": "^0.1.1", "tonal": "^1.1.0", "vexflow": "^1.2.84" }

[ulisinn]

https://github.com/panarch/standalone-vexflow-context

[SalahAdDin]

@ulisinn, hi man, it's your project a open source project?

[njwest]

Sweet project! I am also a trumpet player :P

[sschmidTU]

You can simply create a Vexflow component for React. It works for OSMD, which has the same setup as Vexflow (handing it a div container). Here's example code, you can pretty much just exchange the OpenSheetMusicDisplay.jsx in the lib folder: https://github.com/opensheetmusicdisplay/react-opensheetmusicdisplay/tree/master/src

Maybe this will still help someone.

[RemyNtshaykolo]

https://github.com/panarch/standalone-vexflow-context

Thank you so much for this!