All Projects → mastermoo → React Native Pulse Loader

mastermoo / React Native Pulse Loader

tinder-like loader for your react native app

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Native Pulse Loader

Hitchcock
The Master of Suspense 🍿
Stars: ✭ 167 (-33.2%)
Mutual labels:  component, loader
React Async Fetcher
React component for asynchronous loading/fetch online data
Stars: ✭ 50 (-80%)
Mutual labels:  component, loader
Awloader
AWLoader is a UI Component that allows you to integrate loader that fits your needs within your app.
Stars: ✭ 11 (-95.6%)
Mutual labels:  component, loader
Vue Api Request
Control your API calls by using an amazing component which supports axios and vue-resource
Stars: ✭ 116 (-53.6%)
Mutual labels:  component, loader
Vue Element Loading
⏳ Loading inside a container or full screen for Vue.js
Stars: ✭ 234 (-6.4%)
Mutual labels:  component, loader
Vue Loaders
Vue + loaders.css
Stars: ✭ 127 (-49.2%)
Mutual labels:  component, loader
React Native Skeleton Content Nonexpo
A customizable skeleton-like loading placeholder for react native projects not using expo.
Stars: ✭ 92 (-63.2%)
Mutual labels:  component, loader
React Native Wormhole
⚛️ 🌌 Inter-dimensional Portals for React Native. 👽 🖖
Stars: ✭ 133 (-46.8%)
Mutual labels:  component, loader
React Native Skeleton Content
A customizable skeleton-like loading placeholder for react native projects using expo.
Stars: ✭ 221 (-11.6%)
Mutual labels:  component, loader
Reel Search
🔍 RAMReel is a UI controller that allows you to choose options from a list. Swift UI library made by @Ramotion
Stars: ✭ 2,533 (+913.2%)
Mutual labels:  component
Options Resolver
The OptionsResolver component is array_replace() on steroids. It allows you to create an options system with required options, defaults, validation (type, value), normalization and more.
Stars: ✭ 2,723 (+989.2%)
Mutual labels:  component
Vue I18n Loader
🌐 vue-i18n loader for custom blocks
Stars: ✭ 229 (-8.4%)
Mutual labels:  loader
Is Loading
Simple library to show visual feedback when loading data or any action that would take time
Stars: ✭ 232 (-7.2%)
Mutual labels:  loader
React Loading
Build a smooth and lightweight react component loading with css 🎉 .
Stars: ✭ 234 (-6.4%)
Mutual labels:  component
Get Me A Date
😍 Help me get a 💘 date tonight 🌛
Stars: ✭ 228 (-8.8%)
Mutual labels:  tinder
Vuetimeline
🕵️‍♀️🕵️‍♂️ One easy-to-use component for Vue.js to build beautiful responsive timelines.
Stars: ✭ 242 (-3.2%)
Mutual labels:  component
Vue Menu
Menu/Contextmenu Component for vue2
Stars: ✭ 227 (-9.2%)
Mutual labels:  component
Vue Marquee Text Component
[CSS GPU Animation] Marquee Text for vuejs
Stars: ✭ 226 (-9.6%)
Mutual labels:  component
React Native Scalable Image
React Native Image component which scales width or height automatically to keep the original aspect ratio
Stars: ✭ 241 (-3.6%)
Mutual labels:  component
Deep Learning Tinder
Simple Tinder algorithm able to swipe left and right based on the recommendations of a pre-trained deep neural network (Machine Learning).
Stars: ✭ 242 (-3.2%)
Mutual labels:  tinder

Pulse Loader for React Native

tinder-like loader for your react native app

Installation

npm i react-native-pulse-loader --save

Example

import React from 'react';
import PulseLoader from 'react-native-pulse-loader';

const App = ({}) => (
  <PulseLoader
    avatar={'https://scontent-fra3-1.cdninstagram.com/t51.2885-15/e35/11429705_386886401514376_550879228_n.jpg'}
  />
);

API

Property Type Default Description
interval number 2000 action buttons visible or not
size number 100 width and height of the avatar
pulseMaxSize number 250 maximum size of the pulse in the background
avatar string undefined required avatar url to display
pressInValue number 0.8 should be between 0 and 1. scale of the avatar, when pressed in
pressDuration number 150 duration of the scale animation
pressInEasing Easing Easing.in easing type of the press in animation
pressOutEasing Easing Easing.out easing type of the press out animation
borderColor string '#D8335B' border color of the pulse
backgroundColor string '#ED225B55' background color of the pulse
getStyle function undefined override the styling of the pulse. gets as parameter the Animated variable. e.g. (anim) => ({ backgroundColor: 'yellow' })
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].