# P5.js in React Native

**URL:** https://discourse.processing.org/t/p5-js-in-react-native/12181
**Category:** p5.js
**Created:** [June 19, 2019, 11:52am UTC](https://discourse.processing.org/t/p5-js-in-react-native/12181 "2019-06-19T11:52:05Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![boyswan](https://avatars.discourse-cdn.com/v4/letter/b/9e8a1a/32.png) [@boyswan](https://discourse.processing.org/u/boyswan)
#### Post date: [June 19, 2019, 11:52am UTC](https://discourse.processing.org/t/p5-js-in-react-native/12181/1 "2019-06-19T11:52:05Z")

</div>

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

I’ve stumbled across [this](https://github.com/expo/expo-processing) 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.

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [June 19, 2019, 1:57pm UTC](https://discourse.processing.org/t/p5-js-in-react-native/12181/2 "2019-06-19T13:57:00Z")

</div>

> [@boyswan](#):
>
> , however it’s using processing.js rather than p5.

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/](http://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.

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [June 19, 2019, 2:16pm UTC](https://discourse.processing.org/t/p5-js-in-react-native/12181/3 "2019-06-19T14:16:52Z")

</div>

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/](http://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: 🌉

> <https://github.com/GoSubRoutine/Ball-in-the-Chamber/blob/master/instance/index.js>

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: 💡

> **[expo/expo-processing](https://github.com/expo/expo-processing#example)**
>
> Utilities for using Processing.js on Expo. Contribute to expo/expo-processing development by creating an account on GitHub.