JSPM – react-native-particles@0.0.1

Package Exports

react-native-particles

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-particles) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-particles

This is probably my favorite navigation pattern on Android, I wish it were more common on iOS! This is a very simple JavaScript-only implementation of it for React Native. For more information about how the animations behind this work, check out the Rebound section of the React Native Animation Guide

Add it to your project

Run npm install react-native-particles --save
import { Emitter } from 'react-native-particles

Demo

Basic Particles

Basic usage

import { Emitter } from 'react-native-particles';

const App = React.createClass({
  render() {
    return (
      <Emitter
        autoStart={false}
        numberOfParticles={50}
        emissionRate={5}
        interval={200}
        particleLife={1500}
        direction={-90}
        spread={360}
        width={500}
        height={500}
        segments={15}
        speed={6}
        gravity={0.2}
        fromPosition={() => ({ x: width / 2 - 50, y: height / 2 - 160 })}
        style={{ position: 'absolute', top: 0, left: 0, zIndex: 999, backgroundColor: 'red' }}
      >
        <Image
          source={require('../assets/images/large_star.png')}
          resizeMode="stretch"
          style={{ width: 100, height: 100 }}
        />
      </Emitter>
    );
  }
});

Injecting a custom tab bar

Suppose we had a custom tab bar called CustomTabBar, we would inject it into our ScrollableTabView like this:

var ScrollableTabView = require('react-native-scrollable-tab-view');
var CustomTabBar = require('./CustomTabBar');

var App = React.createClass({
  render() {
    return (
      <ScrollableTabView renderTabBar={() => <CustomTabBar someProp={'here'} />}>
        <ReactPage tabLabel="React" />
        <FlowPage tabLabel="Flow" />
        <JestPage tabLabel="Jest" />
      </ScrollableTabView>
    );
  }
});

To start you can just copy DefaultTabBar.

Examples

Props

Emitter

/** */

/** / segments: number, /* Width of the emitter / width: number, /* Height of the emitter / height: number, /* Style of the emitter / style?: any, /* The particle content to be rendered / children: Element, /* Reference to the Emiter */ ref: EmitterType => void

numberOfParticles (number) - The total of particles to be emitted
interval (number) - Interval between emitting a new bunch of particles
fromPosition (VectorType | (() => VectorType)) - The position from where the particles should be generated
emissionRate (number) - Number of particles to be be emitted on each cycle
particleLife (number) - The particle life time (ms)
direction (number) - The direction angle of the particle (in degrees)
spread (number) - The spread angle where particles are allowed to be rendered (in degrees)
speed (number) - The speed of each particle
gravity (number) - Gravity force to be applied to the particle movement
segments (number) - number of steps the animation will be divided ( more segments == more precise animation == slow performance)
width (number) - Width of the emitter area
height (number) - Height of the emitter area
autoStart (boolean) - Start emitting particles right after initialization
style (Object) - Style of the container view
children (ReactElement) - Particle content

Contribution

Issues are welcome. Please add a screenshot of bug and code snippet. Quickest way to solve issue is to reproduce it on one of the examples.

Pull requests are welcome. If you want to change API or making something big better to create issue and discuss it first. Before submiting PR please run prettier.

MIT Licensed