Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-native-indicator

Package Overview
Dependencies
Maintainers
1
Versions
30
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-indicator

React Native Indicator Component

  • 0.7.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
333
decreased by-20.33%
Maintainers
1
Weekly downloads
 
Created
Source

react-native-indicator

npm react-native VersionEye npm

A useful indicator component for React Native

Installation

Make sure that you are in your React Native project directory and run:

$ npm install react-native-indicator --save 

Android

It works, have fun!

iOS

Add ART.xcodeproj from node_modules/react-native/Libraries/ART to your Libraries then link libART.a. To see more details about Linking Libraries, jump to this.

Usage

Import react-native-indicator as a JavaScript module:

import {CirclesLoader, PulseLoader, TextLoader, DotsLoader, ...} from 'react-native-indicator';

Here is currently available types:

render(){
    return(
        <View>
            <CirclesLoader />
            <TextLoader text="Loading" />
        </View>
    ); 
}

Props

PulseLoader
proptypedefaultdescription
sizenumber30circle's size
colorstring'#1e90ff'indicator's color
frequencynumber1000scale's frequency
DotsLoader
proptypedefaultdescription
sizenumber10dot's size
colorstring'#1e90ff'indicator's color
betweenSpacenumber5distance between two dots
TextLoader
proptypedefaultdescription
textstring'Loading'contents
textStylestyleinheritedtext's style
BubblesLoader
proptypedefaultdescription
sizenumber40circle's size
colorstring'#1e90ff'indicator's color
dotRadiusnumber10each dot's size
CirclesLoader
proptypedefaultdescription
sizenumber40circle's size
colorstring'#1e90ff'indicator's color
dotRadiusnumber8each dot's size
BreathingLoader
proptypedefaultdescription
sizenumber10circle's size
colorstring'#1e90ff'indicator's color
strokeWidthnumber3outline width
frequencynumber800scale's frequency
RippleLoader
proptypedefaultdescription
sizenumber10circle's size
colorstring'#1e90ff'indicator's color
strokeWidthnumber3outline width
LinesLoader
proptypedefaultdescription
colorstring'#1e90ff'indicator's color
barWidthnumber5each bar's width
barHeightnumber40each bar's height
barNumbernumber5the number of bar
betweenSpacenumber2distance between two bars
MusicBarLoader
proptypedefaultdescription
colorstring'#1e90ff'indicator's color
barWidthnumber3each bar's width
barHeightnumber30each bar's height
betweenSpacenumber5distance between two bars
EatBeanLoader
proptypedefaultdescription
colorstring'#1e90ff'indicator's color
sizenumber30indicator's size
DoubleCircleLoader
proptypedefaultdescription
sizenumber30circle's size
colorstring'#1e90ff'indicator's color
RotationCircleLoader
proptypedefaultdescription
sizenumber30indicator's size
colorstring'#1e90ff'indicator's color
rotationSpeednumber800rotation speed
RotationHoleLoader
proptypedefaultdescription
sizenumber40indicator's size
colorstring'#1e90ff'indicator's color
rotationSpeednumber800rotation speed
strokeWidthnumber8circle outline's width
CirclesRotationScaleLoader
proptypedefaultdescription
sizenumber50indicator's size
colorstring'#1e90ff'indicator's color
NineCubesLoader
proptypedefaultdescription
sizenumber20each cube's size
colorstring'#1e90ff'indicator's color
LineDotsLoader

warning: this indicator will occupy a whole horizontal space automatically, which means you don't need to set any center props. Just keeping the direction of its parent View is vertical.

proptypedefaultdescription
sizenumber10dot's size
colorstring'#1e90ff'indicator's color
dotsNumbernumber5the number of dots
betweenSpacenumber5distance between two dots
ColorDotsLoader
proptypedefaultdescription
sizenumber15each cube's size
betweenSpacenumber7distance between two dots
color1string'#ff4500'(red)1st color
color2string'#ffd700'(yellow)2nd color
color3string'#9acd32'(green)3rd color

License

MIT

Keywords

FAQs

Package last updated on 16 Nov 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc