0.1.2 • Published 7 years ago
Share package fork from react-native-indicator
this will continuous update,for supporting react 16
react-native-extend-indicator
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-extend-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 prop type default description size number 30 circle's size color string '#1e90ff' indicator's color frequency number 1000 scale's frequency
DotsLoader prop type default description size number 10 dot's size color string '#1e90ff' indicator's color betweenSpace number 5 distance between two dots
TextLoader prop type default description text string 'Loading' contents textStyle style inherited text's style
BubblesLoader prop type default description size number 40 circle's size color string '#1e90ff' indicator's color dotRadius number 10 each dot's size
CirclesLoader prop type default description size number 40 circle's size color string '#1e90ff' indicator's color dotRadius number 8 each dot's size
BreathingLoader prop type default description size number 10 circle's size color string '#1e90ff' indicator's color strokeWidth number 3 outline width frequency number 800 scale's frequency
RippleLoader prop type default description size number 10 circle's size color string '#1e90ff' indicator's color strokeWidth number 3 outline width
LinesLoader prop type default description color string '#1e90ff' indicator's color barWidth number 5 each bar's width barHeight number 40 each bar's height barNumber number 5 the number of bar betweenSpace number 2 distance between two bars
MusicBarLoader prop type default description color string '#1e90ff' indicator's color barWidth number 3 each bar's width barHeight number 30 each bar's height betweenSpace number 5 distance between two bars
EatBeanLoader prop type default description color string '#1e90ff' indicator's color size number 30 indicator's size
DoubleCircleLoader prop type default description size number 30 circle's size color string '#1e90ff' indicator's color
RotationCircleLoader prop type default description size number 30 indicator's size color string '#1e90ff' indicator's color rotationSpeed number 800 rotation speed
RotationHoleLoader prop type default description size number 40 indicator's size color string '#1e90ff' indicator's color rotationSpeed number 800 rotation speed strokeWidth number 8 circle outline's width
CirclesRotationScaleLoader prop type default description size number 50 indicator's size color string '#1e90ff' indicator's color
NineCubesLoader prop type default description size number 20 each cube's size color string '#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.
prop type default description size number 10 dot's size color string '#1e90ff' indicator's color dotsNumber number 5 the number of dots betweenSpace number 5 distance between two dots
ColorDotsLoader prop type default description size number 15 each cube's size betweenSpace number 7 distance between two dots color1 string '#ff4500'(red) 1st color color2 string '#ffd700'(yellow) 2nd color color3 string '#9acd32'(green) 3rd color
License MIT
