https://github.com/sahlhoff/react-native-pulse

React Native Pulse Animation
https://github.com/sahlhoff/react-native-pulse

animation pulse react-native ux

Last synced: 22 days ago
JSON representation

React Native Pulse Animation

• Host: GitHub
• URL: https://github.com/sahlhoff/react-native-pulse
• Owner: sahlhoff
• License: mit
• Created: 2016-06-21T20:23:41.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2019-09-19T17:02:28.000Z (over 5 years ago)
• Last Synced: 2024-11-14T10:12:41.655Z (about 1 month ago)
• Topics: animation, pulse, react-native, ux
• Language: JavaScript
• Size: 1.02 MB
• Stars: 149
• Watchers: 3
• Forks: 49
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Native Pulse Animation

![react native pulse](https://raw.githubusercontent.com/sahlhoff/react-native-pulse/master/pulse-gif.gif)

## Installation

```

  npm install react-native-pulse --save

```

## Usage

```js

const Pulse = require('react-native-pulse').default;

class helloWorld extends Component {

  render() {

    return (

      

        

      

    );

  }  

}

```

## Props

Component accepts several self-descriptive properties:

- **`color`** _(String)_ - Backgroundcolor for pulse. React-native colors supported. Default color is blue.

- **`diameter`** _(Number)_ - This is the maximum diameter that a pulse will be. Defaults to 400.

- **`duration`** _(Number)_ - Duration in milliseconds this is the delay new pulses will be created. Defaults to 1000.

- **`image`** _(Object)_ - Image for center pulse thumbnail.

- **`initialDiameter`** _(Number)_ - The diameter new pulses will start with. Defaults to 0.

- **`numPulses`** _(Number)_ - This is the number of pulses that will be rendered. Defaults to 3.

- **`pulseStyle`** _(Object)_ - Style properties for pulses (borderColor eg.)

- **`speed`** _(Number)_ - Speed in milliseconds pulse will redraw. Defaults to 10.

- **`style`** _(Object)_ - Style properties for pulse container (positioning eg.)