react-native-blobular
The Man in Blue's awesome Blobular, ported to React Native. Find the original experiment here!
🚀 Getting Started
Using npm
:
npm install --save react-native-blobular
Using yarn
:
yarn add react-native-blobular
This project depends on react-native-svg, so be sure that the library has been linked if you're running anything less than react-native@0.60.
✍️ Example
It's pretty simple, just embed a <Blobular />
inside your render
method, then listen for the onBlobular
callback, where you can allocate a number of Blob
s for your user to play around with.
;;; ; const width height = Dimensions ; <Blobular onBlobular= />;
You can also suppress user interaction by supplying pointerEvents="none"
to your <Blobular />
component, and instead use the blobular
instance returned in the callback to programmatically manipulate what's on screen.
📌 Props
Property | Type | Required | Description |
---|---|---|---|
width | number | no | Width of the view. |
height | number | no | Height of the view. |
renderBlob | func | no | A function you can pass to define the SVG path. |
pointerEvents | string | no | Allow the user to interact, or manipulate programmatically. |
onBlobular | func | no | A callback returning you with a blobular instance. |
onBlobCreated | func | no | A callback for when a new blob has been generated. |
onBlobDeleted | func | no | A callback for when an existing blob has been removed. |