P5.js in React Native

boyswan · June 19, 2019, 11:52am

Has anyone successfully got p5.js (instanced mode) working in React Native?

I’ve stumbled across this which works, however it’s using processing.js rather than p5.

The main issue I’m struggling with is p5’s browser/window/global dependencies, however can’t find any examples/polyfills online.

GoToLoop · June 19, 2019, 1:57pm

Ru actually using that expo library?

If so, either stick w/ Pjs or request them to create a hackish wrapper for p5js too.
You know, Pjs has an API similar to p5js’: ProcessingJS.org/reference/

Now, if you don’t mind that expo library, and just wanna use p5js + React only, you can search for other wrappers for it.
Or you can ask us to help you make your own hack to embed p5js w/ React.

GoToLoop · June 19, 2019, 2:16pm

I dunno React yet, and got no idea how it works.

But I’ve got this p5js sketch which relies on ES6 native modules:
GoSubRoutine.GitHub.io/Ball-in-the-Chamber/instance/

B/c p5js isn’t itself a module, I had to create a simple “.js” file to act as a bridge between the modular sketch I’ve written and the p5js library instantiation:

github.com

GoSubRoutine/Ball-in-the-Chamber/blob/master/instance/index.js

"use strict";
(async () => {
    const { default: sketch } = await import("./sketch/sketch.js");
    console.log(sketch);
    new p5(sketch);
})();

I believe the technique above can be used for import() a React.Component subclass which contains our sketch function inside of it, similar to the expo example from your link:

Topic		Replies	Views
Processing, P5*js, the Web and Apps Processing	2	225	January 17, 2021
How to adapt a library for Instance Mode (P5JS) Development	7	1834	June 3, 2019
Processing JS, HTML and PHP issue Coding Questions	2	325	March 5, 2020
I made an open source p5js live code editor (with VJ performance focus) p5.js	2	191	December 14, 2022
How do I include p5-dom when importing from npm module/instance mode? Libraries	1	1787	January 28, 2019

P5.js in React Native

Related topics