The Man in Blue's awesome Blobular, ported to React Native. Find the original experiment here!
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 [email protected].
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.
import React from 'react';
import { Dimensions } from 'react-native';
import uuidv4 from 'uuid/v4';
import Blobular, { Blob } from 'react-native-blobular';
const { width, height } = Dimensions
.get('window');
export default () => (
<Blobular
onBlobular={({ putBlob }) => putBlob(
new Blob(
uuidv4(), // unique id
100, // radius
75, // viscosity
50, // min radius
),
width * 0.5,
height * 0.5,
)}
/>
);
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.
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. |