rnb
react-native-blobular
npm i react-native-blobular
rnb

react-native-blobular

The Man in Blue's awesome Blobular, ported to React Native.

by Alexander Thomas

0.0.2 (see all)License:MITTypeScript:Not Found
npm i react-native-blobular
Readme

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 Blobs 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.

📌 Props

PropertyTypeRequiredDescription
widthnumbernoWidth of the view.
heightnumbernoHeight of the view.
renderBlobfuncnoA function you can pass to define the SVG path.
pointerEventsstringnoAllow the user to interact, or manipulate programmatically.
onBlobularfuncnoA callback returning you with a blobular instance.
onBlobCreatedfuncnoA callback for when a new blob has been generated.
onBlobDeletedfuncnoA callback for when an existing blob has been removed.

✌️ License

MIT

Downloads/wk

4

GitHub Stars

52

LAST COMMIT

3yrs ago

MAINTAINERS

1

CONTRIBUTORS

2

OPEN ISSUES

0

OPEN PRs

15
VersionTagPublished
0.0.2
latest
3yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate