mastermoo / React Native Pulse Loader
tinder-like loader for your react native app
Stars: ✭ 250
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Pulse 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
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
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
Vuetimeline
🕵️♀️🕵️♂️ One easy-to-use component for Vue.js to build beautiful responsive timelines.
Stars: ✭ 242 (-3.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].