All Projects → sahlhoff → React Native Pulse

sahlhoff / React Native Pulse

Licence: mit
React Native Pulse Animation

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Native Pulse

Framy Css
Very simple CSS Framework
Stars: ✭ 103 (-20.16%)
Mutual labels:  ux
Smart Webcomponents
Web Components & Custom Elements for Professional Web Applications
Stars: ✭ 110 (-14.73%)
Mutual labels:  ux
Frontend
🌌 Vue based front-end.
Stars: ✭ 121 (-6.2%)
Mutual labels:  ux
Panels
Panels is a framework to easily add sliding panels to your application
Stars: ✭ 1,457 (+1029.46%)
Mutual labels:  ux
Realtaiizor
C# WinForm UI/UX Component Library
Stars: ✭ 109 (-15.5%)
Mutual labels:  ux
Sketchmine
Tools to validate, generate and analyse sketch files from web pages
Stars: ✭ 114 (-11.63%)
Mutual labels:  ux
Ui Ux Designer Roadmap
Roadmap on becoming a UI/UX designer in 2017
Stars: ✭ 1,357 (+951.94%)
Mutual labels:  ux
Syblinkanimationkit
SYBlinkAnimationKit is a blink effect animation framework for iOS, written in Swift.
Stars: ✭ 126 (-2.33%)
Mutual labels:  ux
Doormat
Let's take a scroll!
Stars: ✭ 111 (-13.95%)
Mutual labels:  ux
Sample Currency Converter
A sample currency conversion Progressive Web App
Stars: ✭ 119 (-7.75%)
Mutual labels:  ux
Jtop
SVG virtual desktop library that lets you build beautiful desktop like user interfaces.
Stars: ✭ 108 (-16.28%)
Mutual labels:  ux
Reel Search Android
Reel Search for Android is a UI/UX design for autocomplete action. It is a beautiful minimalistic addition to any use case.
Stars: ✭ 110 (-14.73%)
Mutual labels:  ux
Easytransitions
A simple way to create custom interactive UIViewController transitions
Stars: ✭ 1,592 (+1134.11%)
Mutual labels:  ux
Web Client
Generic Linked Data browser and UX component framework. Apache license.
Stars: ✭ 105 (-18.6%)
Mutual labels:  ux
Ui Ux
📝 Curated list for UI/UX Designers
Stars: ✭ 125 (-3.1%)
Mutual labels:  ux
Bootstrap Select
🚀 The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more.
Stars: ✭ 9,442 (+7219.38%)
Mutual labels:  ux
Overrideit Sketchplugin
Overrideit is sketch plugin that allow designers to search in overridelist and overrides dropdowns, and with many other features.
Stars: ✭ 113 (-12.4%)
Mutual labels:  ux
Liquid
Create a playful backsplash in SwiftUI.
Stars: ✭ 127 (-1.55%)
Mutual labels:  ux
Awesome Product Design
A collection of bookmarks, resources, articles for product designers.
Stars: ✭ 1,679 (+1201.55%)
Mutual labels:  ux
Pixelwave
Fully customizable pixel wave animation for seamless page transitions.
Stars: ✭ 119 (-7.75%)
Mutual labels:  ux

React Native Pulse Animation

react native pulse

Installation

  npm install react-native-pulse --save

Usage

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

class helloWorld extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Pulse color='orange' numPulses={3} diameter={400} speed={20} duration={2000} />
      </View>
    );
  }  
}

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.)
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].