[ { "path": ".gitignore", "content": "/.idea\n/node_modules" }, { "path": ".npmignore", "content": "/screenshot\n/.idea\n/node_modules\n.prettierrc\nREADME.md\n" }, { "path": ".prettierrc", "content": "{\n \"printWidth\": 100,\n \"trailingComma\": \"all\",\n \"tabWidth\": 2,\n \"semi\": true,\n \"singleQuote\": true,\n \"bracketSpacing\": true,\n \"arrowParens\": \"always\"\n}\n" }, { "path": "LICENSE", "content": "\nMIT License\n\nCopyright (c) 2016 Di Wang\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE." }, { "path": "README.md", "content": "# react-native-indicator\n\n![npm](https://img.shields.io/npm/dw/react-native-indicator.svg) ![npm](https://img.shields.io/npm/v/react-native-indicator.svg) [![npm](https://img.shields.io/npm/l/express.svg)](https://www.npmjs.com/package/react-native-indicator)\n\nA useful indicator component for React Native\n\n\n\n\n\n\n## Installation\n\nMake sure that you are in your React Native project directory and run:\n```\n$ npm install react-native-indicator --save \n$ npm install @react-native-community/art --save\n```\n\nFor react-native >= 0.60 ReactNativeART should be auto-linked and no additional action is required.\n\nFor react-native < 0.60 you need to link ReactNative ART:\n```\n$ react-native link @react-native-community/art\n```\n\nMore info, following the [Art module](https://github.com/react-native-community/art) instruction to configure.\n\n## Usage\n\nImport react-native-indicator as a JavaScript module:\n```\nimport { CirclesLoader, PulseLoader, TextLoader, DotsLoader, ... } from 'react-native-indicator';\n```\n\nHere is currently available types: \n\n- [PulseLoader](#PulseLoader)\n- [DotsLoader](#DotsLoader)\n- [TextLoader](#TextLoader)\n- [BubblesLoader](#BubblesLoader)\n- [CirclesLoader](#CirclesLoader)\n- [BreathingLoader](#BreathingLoader)\n- [RippleLoader](#RippleLoader)\n- [LinesLoader](#LinesLoader)\n- [MusicBarLoader](#MusicBarLoader)\n- [EatBeanLoader](#EatBeanLoader)\n- [DoubleCircleLoader](#DoubleCircleLoader)\n- [RotationCircleLoader](#RotationCircleLoader)\n- [RotationHoleLoader](#RotationHoleLoader)\n- [CirclesRotationScaleLoader](#CirclesRotationScaleLoader)\n- [NineCubesLoader](#NineCubesLoader)\n- [LineDotsLoader](#LineDotsLoader)\n- [ColorDotsLoader](#ColorDotsLoader)\n- [OpacityDotsLoader](#OpacityDotsLoader)\n\n```\nrender(){\n return(\n \n \n \n \n ); \n}\n```\n\n## Props\n\n\n\n##### PulseLoader\n\n| prop | type | default | description |\n| ---- | ---- | ---- | ---- |\n| size | number | 30 | circle's size |\n| color | string | '#1e90ff' | indicator's color |\n| frequency | number | 1000 | scale's frequency |\n\n\n\n\n##### DotsLoader\n\n| prop | type | default | description |\n| ---- | ---- | ---- | ---- |\n| size | number | 10 | dot's size |\n| color | string | '#1e90ff' | indicator's color |\n| betweenSpace | number | 5 | distance between two dots |\n\n\n\n\n##### TextLoader\n\n| prop | type | default | description |\n| ---- | ---- | ---- | ---- |\n| text | string | 'Loading' | contents |\n| textStyle | style | inherited | text's style |\n\n\n\n\n##### BubblesLoader\n\n| prop | type | default | description |\n| ---- | ---- | ---- | ---- |\n| size | number | 40 | circle's size |\n| color | string | '#1e90ff' | indicator's color |\n| dotRadius | number | 10 | each dot's size |\n\n\n\n\n##### CirclesLoader\n\n| prop | type | default | description |\n| ---- | ---- | ---- | ---- |\n| size | number | 40 | circle's size |\n| color | string | '#1e90ff' | indicator's color |\n| dotRadius | number | 8 | each dot's size |\n\n\n\n\n##### BreathingLoader\n\n| prop | type | default | description |\n| ---- | ---- | ---- | ---- |\n| size | number | 10 | circle's size |\n| color | string | '#1e90ff' | indicator's color |\n| strokeWidth | number | 3 | outline width |\n| frequency | number | 800 | scale's frequency |\n\n\n\n\n##### RippleLoader\n\n| prop | type | default | description |\n| ---- | ---- | ---- | ---- |\n| size | number | 10 | circle's size |\n| frequency | number | 1600 | scale's frequency |\n| color | string | '#1e90ff' | indicator's color |\n| strokeWidth | number | 3 | outline width |\n\n\n\n\n##### LinesLoader\n\n| prop | type | default | description |\n| ---- | ---- | ---- | ---- |\n| color | string | '#1e90ff' | indicator's color |\n| barWidth | number | 5 | each bar's width |\n| barHeight | number | 40 | each bar's height |\n| barNumber | number | 5 | the number of bar |\n| betweenSpace | number | 2 | distance between two bars |\n\n\n\n\n##### MusicBarLoader\n\n| prop | type | default | description |\n| ---- | ---- | ---- | ---- |\n| color | string | '#1e90ff' | indicator's color |\n| barWidth | number | 3 | each bar's width |\n| barHeight | number | 30 | each bar's height |\n| betweenSpace | number | 5 | distance between two bars |\n\n\n\n\n##### EatBeanLoader\n\n| prop | type | default | description |\n| ---- | ---- | ---- | ---- |\n| color | string | '#1e90ff' | indicator's color |\n| size | number | 30 | indicator's size |\n\n\n\n\n##### DoubleCircleLoader\n\n| prop | type | default | description |\n| ---- | ---- | ---- | ---- |\n| size | number | 30 | circle's size |\n| color | string | '#1e90ff' | indicator's color |\n\n\n\n\n##### RotationCircleLoader\n\n| prop | type | default | description |\n| ---- | ---- | ---- | ---- |\n| size | number | 30 | indicator's size |\n| color | string | '#1e90ff' | indicator's color |\n| rotationSpeed | number | 800 | rotation speed |\n\n\n\n\n##### RotationHoleLoader\n\n| prop | type | default | description |\n| ---- | ---- | ---- | ---- |\n| size | number | 40 | indicator's size |\n| color | string | '#1e90ff' | indicator's color |\n| rotationSpeed | number | 800 | rotation speed |\n| strokeWidth | number | 8 | circle outline's width |\n\n\n\n\n##### CirclesRotationScaleLoader\n\n| prop | type | default | description |\n| ---- | ---- | ---- | ---- |\n| size | number | 50 | indicator's size |\n| color | string | '#1e90ff' | indicator's color |\n\n\n\n\n##### NineCubesLoader\n\n| prop | type | default | description |\n| ---- | ---- | ---- | ---- |\n| size | number | 20 | each cube's size |\n| color | string | '#1e90ff' | indicator's color |\n\n\n\n\n##### LineDotsLoader\n\n**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.*\n\n| prop | type | default | description |\n| ---- | ---- | ---- | ---- |\n| size | number | 10 | dot's size |\n| color | string | '#1e90ff' | indicator's color |\n| dotsNumber | number | 5 | the number of dots |\n| betweenSpace | number | 5 | distance between two dots |\n\n\n\n\n##### ColorDotsLoader\n\n| prop | type | default | description |\n| ---- | ---- | ---- | ---- |\n| size | number | 15 | each cube's size |\n| betweenSpace | number | 7 | distance between two dots |\n| color1 | string | '#ff4500'(red) | 1st color |\n| color2 | string | '#ffd700'(yellow) | 2nd color |\n| color3 | string | '#9acd32'(green) | 3rd color |\n\n##### OpacityDotsLoader\n\n| prop | type | default | description |\n| ---- | ---- | ---- | ---- |\n| size | number | 10 | dot's size |\n| color | string | '#1e90ff' | indicator's color |\n| betweenSpace | number | 5 | distance between two dots |\n| speed | number | 200 | change speed |\n\n## License\n\nMIT\n" }, { "path": "index.js", "content": "import Breathing from './lib/loader/BreathingLoader';\nimport Bubbles from './lib/loader/BubblesLoader';\nimport Circles from './lib/loader/CirclesLoader';\nimport CirclesRotationScale from './lib/loader/CirclesRotationScaleLoader';\nimport ColorDots from './lib/loader/ColorDotsLoader';\nimport Dots from './lib/loader/DotsLoader';\nimport DoubleCircle from './lib/loader/DoubleCircleLoader';\nimport EatBean from './lib/loader/EatBeanLoader';\nimport Lines from './lib/loader/LinesLoader';\nimport LineDots from './lib/loader/LineDotsLoader';\nimport Music from './lib/loader/MusicLoader';\nimport NineCubes from './lib/loader/NineCubesLoader';\nimport OpacityDots from './lib/loader/OpacityDotsLoader';\nimport Pulse from './lib/loader/PulseLoader';\nimport Ripple from './lib/loader/RippleLoader';\nimport RotationCircle from './lib/loader/RotationCircleLoader';\nimport RotationHole from './lib/loader/RotationHoleLoader';\nimport Text from './lib/loader/TextLoader';\n\nexport const BreathingLoader = Breathing;\nexport const BubblesLoader = Bubbles;\nexport const CirclesLoader = Circles;\nexport const CirclesRotationScaleLoader = CirclesRotationScale;\nexport const ColorDotsLoader = ColorDots;\nexport const DotsLoader = Dots;\nexport const DoubleCircleLoader = DoubleCircle;\nexport const EatBeanLoader = EatBean;\nexport const LinesLoader = Lines;\nexport const LineDotsLoader = LineDots;\nexport const MusicBarLoader = Music;\nexport const NineCubesLoader = NineCubes;\nexport const OpacityDotsLoader = OpacityDots;\nexport const PulseLoader = Pulse;\nexport const RippleLoader = Ripple;\nexport const RotationCircleLoader = RotationCircle;\nexport const RotationHoleLoader = RotationHole;\nexport const TextLoader = Text;\n" }, { "path": "lib/animated/AnimatedBar.js", "content": "import Bar from '../shape/Bar';\nimport { Animated } from 'react-native';\n\nexport default Animated.createAnimatedComponent(Bar);\n" }, { "path": "lib/animated/AnimatedCircle.js", "content": "import Circle from '../shape/Circle';\nimport { Animated } from 'react-native';\n\nexport default Animated.createAnimatedComponent(Circle);\n" }, { "path": "lib/const/index.js", "content": "export const color = '#1e90ff';\n" }, { "path": "lib/loader/BreathingLoader.js", "content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Animated } from 'react-native';\nimport { Surface } from '@react-native-community/art';\nimport AnimatedCircle from '../animated/AnimatedCircle';\nimport { color } from '../const';\n\nexport default class BreathingLoader extends React.PureComponent {\n static propTypes = {\n color: PropTypes.string,\n size: PropTypes.number,\n strokeWidth: PropTypes.number,\n frequency: PropTypes.number,\n };\n\n static defaultProps = {\n color,\n size: 30,\n strokeWidth: 3,\n frequency: 800,\n };\n\n constructor(props) {\n super(props);\n this.state = {\n scale: new Animated.Value(0.1),\n };\n }\n\n componentDidMount() {\n this._animation();\n }\n\n componentWillUnmount() {\n this.unmounted = true;\n }\n\n _animation = () => {\n Animated.sequence([\n Animated.timing(this.state.scale, {\n toValue: 1,\n duration: this.props.frequency,\n useNativeDriver: false,\n }),\n Animated.timing(this.state.scale, {\n toValue: 0.1,\n duration: this.props.frequency,\n useNativeDriver: false,\n }),\n ]).start(() => {\n !this.unmounted && this._animation();\n });\n };\n\n render() {\n const { color, size, strokeWidth } = this.props;\n return (\n \n \n \n );\n }\n}\n" }, { "path": "lib/loader/BubblesLoader.js", "content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Animated } from 'react-native';\nimport { Surface } from '@react-native-community/art';\nimport AnimatedCircle from '../animated/AnimatedCircle';\nimport { color } from '../const';\n\nexport default class BubblesLoader extends React.PureComponent {\n static propTypes = {\n color: PropTypes.string,\n dotRadius: PropTypes.number,\n size: PropTypes.number,\n };\n\n static defaultProps = {\n color,\n dotRadius: 10,\n size: 40,\n };\n\n state = {\n opacities: [\n new Animated.Value(1),\n new Animated.Value(1),\n new Animated.Value(1),\n new Animated.Value(1),\n new Animated.Value(1),\n new Animated.Value(1),\n new Animated.Value(1),\n new Animated.Value(1),\n ],\n };\n eachDegree = 360 / this.state.opacities.length;\n timers = [];\n\n componentDidMount() {\n this.state.opacities.forEach((item, i) => {\n const id = setTimeout(() => {\n this._animation(i);\n }, i * 150);\n this.timers.push(id);\n });\n }\n\n componentWillUnmount() {\n this.unmounted = true;\n this.timers.forEach((id) => {\n clearTimeout(id);\n });\n }\n\n _animation = (i) => {\n Animated.sequence([\n Animated.timing(this.state.opacities[i], {\n toValue: 0.2,\n duration: 600,\n useNativeDriver: false,\n }),\n Animated.timing(this.state.opacities[i], {\n toValue: 1,\n duration: 600,\n useNativeDriver: false,\n }),\n ]).start(() => {\n !this.unmounted && this._animation(i);\n });\n };\n\n render() {\n const { size, dotRadius, color } = this.props;\n const { opacities } = this.state;\n return (\n \n {opacities.map((item, i) => {\n let radian = (i * this.eachDegree * Math.PI) / 180;\n let x = Math.round((size / 2) * Math.cos(radian)) + size / 2 + dotRadius / 2;\n let y = Math.round((size / 2) * Math.sin(radian)) + size / 2 + dotRadius / 2;\n return (\n \n );\n })}\n \n );\n }\n}\n" }, { "path": "lib/loader/CirclesLoader.js", "content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Animated } from 'react-native';\nimport { Surface } from '@react-native-community/art';\nimport AnimatedCircle from '../animated/AnimatedCircle';\nimport { color } from '../const';\n\nexport default class CirclesLoader extends React.PureComponent {\n static propTypes = {\n color: PropTypes.string,\n dotRadius: PropTypes.number,\n size: PropTypes.number,\n };\n\n static defaultProps = {\n color,\n dotRadius: 8,\n size: 40,\n };\n\n state = {\n opacities: [\n new Animated.Value(1),\n new Animated.Value(1),\n new Animated.Value(1),\n new Animated.Value(1),\n new Animated.Value(1),\n new Animated.Value(1),\n new Animated.Value(1),\n new Animated.Value(1),\n ],\n };\n eachDegree = 360 / this.state.opacities.length;\n timers = [];\n\n componentDidMount() {\n this.state.opacities.forEach((item, i) => {\n const id = setTimeout(() => {\n this._animation(i);\n }, i * 150);\n this.timers.push(id);\n });\n }\n\n componentWillUnmount() {\n this.unmounted = true;\n this.timers.forEach((id) => {\n clearTimeout(id);\n });\n }\n\n _animation = (i) => {\n Animated.sequence([\n Animated.timing(this.state.opacities[i], {\n toValue: 0.1,\n duration: 600,\n useNativeDriver: false,\n }),\n Animated.timing(this.state.opacities[i], {\n toValue: 1,\n duration: 600,\n useNativeDriver: false,\n }),\n ]).start(() => {\n !this.unmounted && this._animation(i);\n });\n };\n\n render() {\n const { size, dotRadius, color } = this.props;\n const { opacities } = this.state;\n return (\n \n {opacities.map((item, i) => {\n let radian = (i * this.eachDegree * Math.PI) / 180;\n let x = Math.round((size / 2) * Math.cos(radian)) + size / 2 + dotRadius / 2;\n let y = Math.round((size / 2) * Math.sin(radian)) + size / 2 + dotRadius / 2;\n return (\n \n );\n })}\n \n );\n }\n}\n" }, { "path": "lib/loader/CirclesRotationScaleLoader.js", "content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Animated, Easing } from 'react-native';\nimport { Surface, Group } from '@react-native-community/art';\nimport AnimatedCircle from '../animated/AnimatedCircle';\nimport { color } from '../const';\n\nexport default class RotationCircleLoader extends React.PureComponent {\n\tstatic propTypes = {\n\t\tsize: PropTypes.number,\n\t\tcolor: PropTypes.string,\n\t};\n\n\tstatic defaultProps = {\n\t\tsize: 50,\n\t\tcolor,\n\t};\n\n\tstate = {\n\t\tdegree: new Animated.Value(0),\n\t\tscales: [new Animated.Value(0), new Animated.Value(0)]\n\t};\n\ttimers = [];\n\n\tcomponentDidMount() {\n\t\tthis._animation();\n\t\tthis.state.scales.forEach((item, i) => {\n\t\t\tconst id = setTimeout(() => {\n\t\t\t\tthis._animationCircles(i)\n\t\t\t}, i * 500);\n\t\t\tthis.timers.push(id);\n\t\t});\n\n\t}\n\n\tcomponentWillUnmount() {\n\t\tthis.unmounted = true;\n\t\tthis.timers.forEach((id) => {\n\t\t\tclearTimeout(id);\n\t\t});\n\t}\n\n\t_animation = () => {\n\t\tAnimated.sequence([\n\t\t\tAnimated.timing(this.state.degree, {\n\t\t\t\ttoValue: 360,\n\t\t\t\tduration: 2000,\n\t\t\t\teasing: Easing.linear,\n\t\t\t\tuseNativeDriver: false\n\t\t\t})\n\t\t]).start(() => {\n\t\t\tif (!this.unmounted) {\n\t\t\t\tthis.state.degree.setValue(0);\n\t\t\t\tthis._animation();\n\t\t\t}\n\t\t});\n\t};\n\n\t_animationCircles = (i) => {\n\t\tAnimated.sequence([\n\t\t\tAnimated.timing(this.state.scales[i], { toValue: 1, duration: 1000, useNativeDriver: false }),\n\t\t\tAnimated.timing(this.state.scales[i], {\n\t\t\t\ttoValue: 0.05,\n\t\t\t\tduration: 1000,\n\t\t\t\tuseNativeDriver: false\n\t\t\t}),\n\t\t]).start(() => {\n\t\t\t!this.unmounted && this._animationCircles(i);\n\t\t});\n\t};\n\n\trender() {\n\t\tconst { size, color } = this.props;\n\t\tconst degree = this.state.degree.interpolate({\n\t\t\tinputRange: [0, 360],\n\t\t\toutputRange: ['0deg', '360deg']\n\t\t});\n\t\treturn (\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t);\n\t}\n}\n" }, { "path": "lib/loader/ColorDotsLoader.js", "content": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Animated, Easing } from 'react-native';\nimport { Surface, Group } from '@react-native-community/art';\nimport AnimatedCircle from '../animated/AnimatedCircle';\n\nexport default class ColorDotsLoader extends Component {\n static propTypes = {\n size: PropTypes.number,\n betweenSpace: PropTypes.number,\n color1: PropTypes.string,\n color2: PropTypes.string,\n color3: PropTypes.string,\n };\n\n static defaultProps = {\n size: 15,\n betweenSpace: 7,\n color1: '#ff4500',\n color2: '#ffd700',\n color3: '#9acd32',\n };\n\n constructor(props) {\n super(props);\n const red = this.props.color1;\n const yellow = this.props.color2;\n const green = this.props.color3;\n this.state = {\n colors: [red, red, red],\n color: yellow,\n x: new Animated.Value(-this.props.size / 2),\n };\n this.patterns = [\n [yellow, red, red],\n [yellow, yellow, red],\n [yellow, yellow, yellow],\n [green, yellow, yellow],\n [green, green, yellow],\n [green, green, green],\n [red, green, green],\n [red, red, green],\n [red, red, red],\n ];\n this.timers = [];\n }\n\n componentDidMount() {\n this._animation();\n }\n\n componentWillUnmount() {\n this.unmounted = true;\n this.timers.forEach((id) => {\n clearTimeout(id);\n });\n }\n\n _animation = () => {\n const { size, betweenSpace, color1, color2, color3 } = this.props;\n const id1 = setTimeout(() => {\n this.setState({ color: color3 });\n }, 600);\n const id2 = setTimeout(() => {\n this.setState({ color: color1 });\n }, 1200);\n this.timers.push(id1);\n this.timers.push(id2);\n this.patterns.forEach((item, i) => {\n const id = setTimeout(() => {\n this.setState({ colors: this.patterns[i] });\n }, i * 200 + 100);\n this.timers.push(id);\n });\n\n Animated.sequence([\n Animated.timing(this.state.x, {\n toValue: size * 3 + betweenSpace * 2 + size / 2,\n duration: 600,\n easing: Easing.linear,\n useNativeDriver: false,\n }),\n Animated.timing(this.state.x, {\n toValue: -size / 2,\n duration: 0,\n useNativeDriver: false,\n }),\n Animated.timing(this.state.x, {\n toValue: size * 3 + betweenSpace * 2 + size / 2,\n duration: 600,\n easing: Easing.linear,\n useNativeDriver: false,\n }),\n Animated.timing(this.state.x, {\n toValue: -size / 2,\n duration: 0,\n useNativeDriver: false,\n }),\n Animated.timing(this.state.x, {\n toValue: size * 3 + betweenSpace * 2 + size / 2,\n duration: 600,\n easing: Easing.linear,\n useNativeDriver: false,\n }),\n ]).start(() => {\n if (!this.unmounted) {\n this.state.x.setValue(-size / 2);\n this.setState({ color: color2 });\n this._animation();\n }\n });\n };\n\n render() {\n const { size, betweenSpace } = this.props;\n const { color, colors } = this.state;\n return (\n \n \n {colors.map((item, i) => (\n \n ))}\n \n \n \n );\n }\n}\n" }, { "path": "lib/loader/DotsLoader.js", "content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Animated } from 'react-native';\nimport { Surface } from '@react-native-community/art';\nimport AnimatedCircle from '../animated/AnimatedCircle';\nimport { color } from '../const';\n\nexport default class DotsLoader extends React.PureComponent {\n static propTypes = {\n color: PropTypes.string,\n size: PropTypes.number,\n betweenSpace: PropTypes.number,\n };\n\n static defaultProps = {\n color,\n size: 10,\n betweenSpace: 5,\n };\n\n state = {\n scales: [new Animated.Value(0), new Animated.Value(0), new Animated.Value(0)],\n };\n\n componentDidMount() {\n this._animation();\n }\n\n componentWillUnmount() {\n this.unmounted = true;\n }\n\n _animation = () => {\n function seq(self, i) {\n return Animated.sequence([\n Animated.timing(self.state.scales[i], {\n toValue: 1,\n duration: 300,\n delay: (i + 1) * 200,\n useNativeDriver: false,\n }),\n Animated.timing(self.state.scales[i], {\n toValue: 0,\n duration: 300,\n delay: 50,\n useNativeDriver: false,\n }),\n ]);\n }\n\n Animated.parallel([seq(this, 0), seq(this, 1), seq(this, 2)]).start(() => {\n if (!this.unmounted) this._animation();\n });\n };\n\n _renderCircle = (i) => {\n const { color, size, betweenSpace } = this.props;\n return (\n \n );\n };\n\n render() {\n const { size, betweenSpace } = this.props;\n return (\n \n {this._renderCircle(0)}\n {this._renderCircle(1)}\n {this._renderCircle(2)}\n \n );\n }\n}\n" }, { "path": "lib/loader/DoubleCircleLoader.js", "content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Animated } from 'react-native';\nimport { Surface } from '@react-native-community/art';\nimport AnimatedCircle from '../animated/AnimatedCircle';\nimport { color } from '../const';\n\nexport default class DoubleCircleLoader extends React.PureComponent {\n static propTypes = {\n color: PropTypes.string,\n size: PropTypes.number,\n };\n\n static defaultProps = {\n color,\n size: 30,\n };\n\n state = {\n scales: [new Animated.Value(0), new Animated.Value(0)],\n };\n timers = [];\n\n componentDidMount() {\n this.state.scales.forEach((item, i) => {\n const id = setTimeout(() => {\n this._animation(i);\n }, i * 1000);\n this.timers.push(id);\n });\n }\n\n componentWillUnmount() {\n this.unmounted = true;\n this.timers.forEach((id) => {\n clearTimeout(id);\n });\n }\n\n _animation = (i) => {\n Animated.sequence([\n Animated.timing(this.state.scales[i], { toValue: 1, duration: 1000, useNativeDriver: false }),\n Animated.timing(this.state.scales[i], { toValue: 0, duration: 1000, useNativeDriver: false }),\n ]).start(() => {\n !this.unmounted && this._animation(i);\n });\n };\n\n render() {\n const { color, size } = this.props;\n const { scales } = this.state;\n return (\n \n \n \n \n );\n }\n}\n" }, { "path": "lib/loader/EatBeanLoader.js", "content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Animated } from 'react-native';\nimport { Surface, Shape } from '@react-native-community/art';\nimport AnimatedCircle from '../animated/AnimatedCircle';\nimport { color } from '../const';\n\nexport default class EatBeanLoader extends React.PureComponent {\n static propTypes = {\n size: PropTypes.number,\n color: PropTypes.string,\n };\n\n static defaultProps = {\n size: 30,\n color,\n };\n\n state = {\n dotsY: [\n new Animated.Value(this.props.size * 2.2),\n new Animated.Value(this.props.size * 2.2),\n new Animated.Value(this.props.size * 2.2),\n new Animated.Value(this.props.size * 2.2),\n ],\n };\n timers = [];\n\n componentDidMount() {\n this.state.dotsY.forEach((item, i) => {\n const id = setTimeout(() => {\n this._animation(i);\n }, i * 300);\n this.timers.push(id);\n });\n }\n\n componentWillUnmount() {\n this.unmounted = true;\n this.timers.forEach((id) => {\n clearTimeout(id);\n });\n }\n\n _animation = (i) => {\n Animated.timing(this.state.dotsY[i], {\n toValue: this.props.size / 2,\n duration: 1200,\n useNativeDriver: false,\n }).start(() => {\n if (!this.unmounted) {\n this.state.dotsY[i].setValue(this.props.size * 2.2);\n this._animation(i);\n }\n });\n };\n\n render() {\n const { size, color } = this.props;\n\n const sinValue = Math.sqrt(2) / 2;\n const x = Math.floor((size / 2) * sinValue) + size / 2;\n const startY = Math.floor((size / 2) * sinValue) + size / 2;\n const endY = size / 2 - Math.floor((size / 2) * sinValue);\n const d = `M${x} ${startY} A ${size / 2} ${size / 2}, 0, 1, 1, ${x} ${endY} L ${size /\n 2} ${size / 2} Z`;\n return (\n \n \n {this.state.dotsY.map((item, i) => (\n \n ))}\n \n );\n }\n}\n" }, { "path": "lib/loader/LineDotsLoader.js", "content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Animated, Dimensions } from 'react-native';\nimport { Surface } from '@react-native-community/art';\nimport AnimatedCircle from '../animated/AnimatedCircle';\nimport { color } from '../const';\n\nexport default class LineDotsLoader extends React.PureComponent {\n static propTypes = {\n color: PropTypes.string,\n size: PropTypes.number,\n dotsNumber: PropTypes.number,\n betweenSpace: PropTypes.number,\n };\n\n static defaultProps = {\n color,\n size: 10,\n dotsNumber: 5,\n betweenSpace: 5,\n };\n\n constructor(props) {\n super(props);\n this.screenWidth = Dimensions.get('window').width;\n const { size, dotsNumber, betweenSpace } = this.props;\n const midX =\n this.screenWidth / 2 + (size * dotsNumber + betweenSpace * (dotsNumber - 1)) / 2 - size / 2;\n let circlesX = [];\n this.beginX = [];\n this.centerX = [];\n this.destX = [];\n for (let i = 0; i < dotsNumber; i++) {\n let beginX = -size / 2 - (size + betweenSpace) * i;\n circlesX.push(new Animated.Value(beginX));\n this.beginX.push(beginX);\n this.centerX.push(midX - i * (size + betweenSpace));\n this.destX.push(this.screenWidth + size / 2 + i * (size + betweenSpace));\n }\n\n this.state = {\n x: circlesX,\n };\n }\n\n render() {\n const { color, size } = this.props;\n return (\n \n {this.state.x.map((item, i) => (\n \n ))}\n \n );\n }\n\n componentDidMount() {\n this._animation();\n }\n\n componentWillUnmount() {\n this.unmounted = true;\n }\n\n _animation = () => {\n this.state.x.forEach((item, i) => {\n Animated.sequence([\n Animated.timing(this.state.x[i], {\n toValue: this.centerX[i],\n duration: 600,\n delay: i * 50,\n useNativeDriver: false,\n }),\n Animated.timing(this.state.x[i], {\n toValue: this.centerX[i],\n duration: 600,\n delay: 300,\n useNativeDriver: false,\n }),\n Animated.timing(this.state.x[i], {\n toValue: this.destX[i],\n duration: 600,\n delay: i * 50,\n useNativeDriver: false,\n }),\n ]).start(() => {\n if (i === this.props.dotsNumber - 1) {\n for (let idx in this.state.x) {\n this.state.x[idx].setValue(this.beginX[idx]);\n }\n !this.unmounted && this._animation();\n }\n });\n });\n };\n}\n" }, { "path": "lib/loader/LinesLoader.js", "content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Animated } from 'react-native';\nimport { Surface } from '@react-native-community/art';\nimport AnimatedBar from '../animated/AnimatedBar';\nimport { color } from '../const';\n\nexport default class LinesLoader extends React.PureComponent {\n static propTypes = {\n color: PropTypes.string,\n barWidth: PropTypes.number,\n barHeight: PropTypes.number,\n betweenSpace: PropTypes.number,\n barNumber: PropTypes.number,\n };\n\n static defaultProps = {\n color,\n betweenSpace: 2,\n barNumber: 5,\n barWidth: 5,\n barHeight: 40,\n };\n\n constructor(props) {\n super(props);\n const heights = [];\n for (let i = 0; i < this.props.barNumber; i++) {\n heights.push(new Animated.Value(this.props.barHeight / 3));\n }\n\n this.state = {\n heights,\n };\n }\n\n componentDidMount() {\n this._animation();\n }\n\n componentWillUnmount() {\n this.unmounted = true;\n }\n\n _animation = () => {\n function seq(self, i) {\n return Animated.sequence([\n Animated.timing(self.state.heights[i], {\n toValue: self.props.barHeight,\n duration: 400,\n delay: i * 200,\n useNativeDriver: false,\n }),\n Animated.timing(self.state.heights[i], {\n toValue: self.props.barHeight / 3,\n duration: 400,\n useNativeDriver: false,\n }),\n ]);\n }\n\n const anim = [];\n for (let i = 0; i < this.props.barNumber; i++) anim.push(seq(this, i));\n\n Animated.parallel(anim).start(() => {\n !this.unmounted && this._animation();\n });\n };\n\n render() {\n const { color, betweenSpace, barWidth, barHeight, barNumber } = this.props;\n return (\n \n {this.state.heights.map((item, i) => (\n \n ))}\n \n );\n }\n}\n" }, { "path": "lib/loader/MusicLoader.js", "content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Animated } from 'react-native';\nimport { Surface } from '@react-native-community/art';\nimport Bar from '../shape/Bar2';\nimport { color } from '../const';\n\nconst AnimatedBar = Animated.createAnimatedComponent(Bar);\n\nexport default class LinesLoader extends React.PureComponent {\n static propTypes = {\n color: PropTypes.string,\n barWidth: PropTypes.number,\n barHeight: PropTypes.number,\n betweenSpace: PropTypes.number,\n };\n\n static defaultProps = {\n color,\n betweenSpace: 5,\n barWidth: 3,\n barHeight: 30,\n };\n\n constructor(props) {\n super(props);\n this.fixedMaxValue = [\n this.props.barHeight * 0.8,\n this.props.barHeight * 0.4,\n this.props.barHeight,\n this.props.barHeight * 0.2,\n ];\n this.fixedMinValue = [\n this.props.barHeight * 0.3,\n this.props.barHeight,\n this.props.barHeight * 0.5,\n this.props.barHeight * 0.8,\n ];\n\n this.state = {\n heights: [\n new Animated.Value(this.fixedMinValue[0]),\n new Animated.Value(this.fixedMinValue[1]),\n new Animated.Value(this.fixedMinValue[2]),\n new Animated.Value(this.fixedMinValue[3]),\n ],\n };\n }\n\n componentDidMount() {\n this.state.heights.forEach((item, i) => {\n this._animation(i);\n });\n }\n\n componentWillUnmount() {\n this.unmounted = true;\n }\n\n _animation = (i) => {\n Animated.sequence([\n Animated.timing(this.state.heights[i], {\n toValue: this.fixedMaxValue[i],\n duration: 500,\n useNativeDriver: false,\n }),\n Animated.timing(this.state.heights[i], {\n toValue: this.fixedMinValue[i],\n duration: 500,\n useNativeDriver: false,\n }),\n ]).start(() => {\n !this.unmounted && this._animation(i);\n });\n };\n\n render() {\n const { color, betweenSpace, barWidth, barHeight, barNumber } = this.props;\n return (\n \n {this.state.heights.map((item, i) => {\n return (\n \n );\n })}\n \n );\n }\n}\n" }, { "path": "lib/loader/NineCubesLoader.js", "content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Animated } from 'react-native';\nimport { Surface } from '@react-native-community/art';\nimport Bar3 from '../shape/Bar3';\nimport { color } from '../const';\n\nconst AnimatedBar = Animated.createAnimatedComponent(Bar3);\n\nexport default class NineCubesLoader extends React.PureComponent {\n state = {\n scales: [\n new Animated.Value(0),\n new Animated.Value(0),\n new Animated.Value(0),\n new Animated.Value(0),\n new Animated.Value(0),\n ],\n };\n\n static propTypes = {\n size: PropTypes.number,\n color: PropTypes.string,\n };\n\n static defaultProps = {\n size: 20,\n color,\n };\n\n _renderCube(i, j, scaleID) {\n const { size, color } = this.props;\n return (\n \n );\n }\n\n render() {\n const { size, color } = this.props;\n return (\n \n {this._renderCube(0, 0, 2)}\n {this._renderCube(0, 1, 1)}\n {this._renderCube(0, 2, 0)}\n {this._renderCube(1, 0, 3)}\n {this._renderCube(1, 1, 2)}\n {this._renderCube(1, 2, 1)}\n {this._renderCube(2, 0, 4)}\n {this._renderCube(2, 1, 3)}\n {this._renderCube(2, 2, 2)}\n \n );\n }\n\n componentDidMount() {\n this._animation();\n }\n\n componentWillUnmount() {\n this.unmounted = true;\n }\n\n _animation = () => {\n function seq(self, i) {\n return Animated.sequence([\n Animated.timing(self.state.scales[i], {\n toValue: 1,\n duration: 300,\n delay: (i + 1) * 100,\n useNativeDriver: false,\n }),\n Animated.timing(self.state.scales[i], {\n toValue: 0,\n duration: 300,\n delay: 200,\n useNativeDriver: false,\n }),\n ]);\n }\n\n Animated.parallel([seq(this, 0), seq(this, 1), seq(this, 2), seq(this, 3), seq(this, 4)]).start(\n () => {\n !this.unmounted && this._animation();\n },\n );\n };\n}\n" }, { "path": "lib/loader/OpacityDotsLoader.js", "content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Animated } from 'react-native';\nimport { Surface } from '@react-native-community/art';\nimport AnimatedCircle from '../animated/AnimatedCircle';\nimport { color } from '../const';\n\nexport default class OpacityDotsLoader extends React.PureComponent {\n static propTypes = {\n color: PropTypes.string,\n size: PropTypes.number,\n betweenSpace: PropTypes.number,\n speed: PropTypes.number,\n };\n\n static defaultProps = {\n color,\n size: 10,\n betweenSpace: 5,\n speed: 200,\n };\n\n state = {\n opacity: [new Animated.Value(0.5), new Animated.Value(0.5), new Animated.Value(0.5)],\n };\n\n _renderCircle(i) {\n const { color, size, betweenSpace } = this.props;\n return (\n \n );\n }\n\n componentDidMount() {\n this._animation();\n }\n\n componentWillUnmount() {\n this.unmounted = true;\n }\n\n _animation = () => {\n const { speed } = this.props;\n\n function seq(self, i) {\n return Animated.sequence([\n Animated.timing(self.state.opacity[i], {\n toValue: 1,\n duration: speed,\n delay: i * speed,\n useNativeDriver: false,\n }),\n Animated.timing(self.state.opacity[i], {\n toValue: 0.3,\n duration: speed,\n delay: speed,\n useNativeDriver: false,\n }),\n ]);\n }\n\n Animated.parallel([seq(this, 0), seq(this, 1), seq(this, 2)]).start(() => {\n !this.unmounted && this._animation();\n });\n };\n\n render() {\n const { size, betweenSpace } = this.props;\n return (\n \n {this._renderCircle(0)}\n {this._renderCircle(1)}\n {this._renderCircle(2)}\n \n );\n }\n}\n" }, { "path": "lib/loader/PulseLoader.js", "content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Animated } from 'react-native';\nimport { Surface } from '@react-native-community/art';\nimport AnimatedCircle from '../animated/AnimatedCircle';\nimport { color } from '../const';\n\nexport default class PulseLoader extends React.PureComponent {\n static propTypes = {\n color: PropTypes.string,\n size: PropTypes.number,\n frequency: PropTypes.number,\n };\n\n static defaultProps = {\n color,\n size: 30,\n frequency: 1000,\n };\n\n state = {\n effect: new Animated.ValueXY({ x: 0, y: 1 }),\n };\n\n componentDidMount() {\n this._animation();\n }\n\n componentWillUnmount() {\n this.unmounted = true;\n }\n\n _animation = () => {\n Animated.parallel([\n Animated.timing(this.state.effect.x, {\n toValue: 1,\n duration: this.props.frequency,\n useNativeDriver: false,\n }),\n Animated.timing(this.state.effect.y, {\n toValue: 0.05,\n duration: this.props.frequency,\n useNativeDriver: false,\n }),\n ]).start(() => {\n if (!this.unmounted) {\n this.state.effect.setValue({ x: 0, y: 1 });\n this._animation();\n }\n });\n };\n\n render() {\n const { color, size } = this.props;\n return (\n \n \n \n );\n }\n}\n" }, { "path": "lib/loader/RippleLoader.js", "content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Animated } from 'react-native';\nimport { Surface } from '@react-native-community/art';\nimport AnimatedCircle from '../animated/AnimatedCircle';\nimport { color } from '../const';\n\nexport default class RippleLoader extends React.PureComponent {\n static propTypes = {\n color: PropTypes.string,\n size: PropTypes.number,\n strokeWidth: PropTypes.number,\n frequency: PropTypes.number,\n };\n\n static defaultProps = {\n color,\n size: 40,\n strokeWidth: 3,\n frequency: 1600,\n };\n\n state = {\n scales: [new Animated.Value(0.1), new Animated.Value(0.1)],\n opacities: [new Animated.Value(1), new Animated.Value(1)],\n };\n timers = [];\n\n componentDidMount() {\n this.state.scales.forEach((item, i) => {\n const id = setTimeout(() => {\n this._animation(i);\n }, i * this.props.frequency * 0.75);\n this.timers.push(id);\n });\n }\n\n componentWillUnmount() {\n this.unmounted = true;\n this.timers.forEach((id) => {\n clearTimeout(id);\n });\n }\n\n _animation = (i) => {\n const { frequency } = this.props;\n Animated.parallel([\n Animated.timing(this.state.scales[i], {\n toValue: 1,\n duration: frequency,\n useNativeDriver: false,\n }),\n Animated.timing(this.state.opacities[i], {\n toValue: 0,\n duration: frequency,\n delay: frequency / 2,\n useNativeDriver: false,\n }),\n ]).start(() => {\n if (!this.unmounted) {\n this.state.scales[i].setValue(0.1);\n this.state.opacities[i].setValue(1);\n this._animation(i);\n }\n });\n };\n\n render() {\n const { color, size, strokeWidth } = this.props;\n const { scales, opacities } = this.state;\n return (\n \n {scales.map((item, i) => (\n \n ))}\n \n );\n }\n}\n" }, { "path": "lib/loader/RotationCircleLoader.js", "content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Animated, Easing } from 'react-native';\nimport { Surface, Group } from '@react-native-community/art';\nimport AnimatedCircle from '../animated/AnimatedCircle';\nimport { color } from '../const';\n\nexport default class RotationCircleLoader extends React.PureComponent {\n\tstatic propTypes = {\n\t\tsize: PropTypes.number,\n\t\tcolor: PropTypes.string,\n\t\trotationSpeed: PropTypes.number\n\t};\n\n\tstatic defaultProps = {\n\t\tsize: 40,\n\t\tcolor,\n\t\trotationSpeed: 800\n\t};\n\n\tstate = {\n\t\tdegree: new Animated.Value(0)\n\t};\n\n\tcomponentDidMount() {\n\t\tthis._animation();\n\t}\n\n\tcomponentWillUnmount() {\n\t\tthis.unmounted = true;\n\t}\n\n\t_animation = () => {\n\t\tAnimated.sequence([\n\t\t\tAnimated.timing(this.state.degree, {\n\t\t\t\ttoValue: 360,\n\t\t\t\tduration: this.props.rotationSpeed,\n\t\t\t\teasing: Easing.linear,\n\t\t\t\tuseNativeDriver: false\n\t\t\t})\n\t\t]).start(() => {\n\t\t\tif (!this.unmounted) {\n\t\t\t\tthis.state.degree.setValue(0);\n\t\t\t\tthis._animation();\n\t\t\t}\n\t\t});\n\t};\n\n\trender() {\n\t\tconst { size, color } = this.props;\n\t\tconst degree = this.state.degree.interpolate({\n\t\t\tinputRange: [0, 360],\n\t\t\toutputRange: ['0deg', '360deg']\n\t\t});\n\t\treturn (\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t);\n\t}\n}\n" }, { "path": "lib/loader/RotationHoleLoader.js", "content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Animated, Easing } from 'react-native';\nimport { Surface, Group } from '@react-native-community/art';\nimport AnimatedCircle from '../animated/AnimatedCircle';\nimport { color } from '../const';\n\nexport default class RotationHoleLoader extends React.PureComponent {\n\tstatic propTypes = {\n\t\tsize: PropTypes.number,\n\t\tcolor: PropTypes.string,\n\t\tstrokeWith: PropTypes.number,\n\t\trotationSpeed: PropTypes.number\n\t};\n\n\tstatic defaultProps = {\n\t\tsize: 40,\n\t\tcolor,\n\t\trotationSpeed: 800,\n\t\tstrokeWith: 8\n\t};\n\n\tstate = {\n\t\tdegree: new Animated.Value(0)\n\t};\n\n\tcomponentDidMount() {\n\t\tthis._animation();\n\t}\n\n\tcomponentWillUnmount() {\n\t\tthis.unmounted = true;\n\t}\n\n\t_animation = () => {\n\t\tAnimated.sequence([\n\t\t\tAnimated.timing(this.state.degree, {\n\t\t\t\ttoValue: 360,\n\t\t\t\tduration: this.props.rotationSpeed,\n\t\t\t\teasing: Easing.linear,\n\t\t\t\tuseNativeDriver: false\n\t\t\t})\n\t\t]).start(() => {\n\t\t\tif (!this.unmounted) {\n\t\t\t\tthis.state.degree.setValue(0);\n\t\t\t\tthis._animation();\n\t\t\t}\n\t\t});\n\t};\n\n\trender() {\n\t\tconst { size, color, strokeWith } = this.props;\n\t\tconst degree = this.state.degree.interpolate({\n\t\t\tinputRange: [0, 360],\n\t\t\toutputRange: ['0deg', '360deg']\n\t\t});\n\t\treturn (\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t);\n\t}\n}\n" }, { "path": "lib/loader/TextLoader.js", "content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Text, View } from 'react-native';\n\nexport default class TextLoader extends React.PureComponent {\n static propTypes = {\n text: PropTypes.string,\n textStyle: Text.propTypes.style,\n };\n\n static defaultProps = {\n text: 'Loading',\n };\n\n state = {\n opacities: [0, 0, 0],\n };\n patterns = [[0, 0, 0], [1, 0, 0], [1, 1, 0], [1, 1, 1]];\n timers = [];\n\n componentDidMount() {\n this._animation(1);\n }\n\n componentWillUnmount() {\n this.unmounted = true;\n this.timers.forEach((id) => {\n clearTimeout(id);\n });\n }\n\n _animation = (index) => {\n if (!this.unmounted) {\n const id = setTimeout(() => {\n this.setState({ opacities: this.patterns[index] });\n index++;\n if (index >= this.patterns.length) index = 0;\n this._animation(index);\n }, 500);\n this.timers.push(id);\n }\n };\n\n render() {\n const { text, textStyle } = this.props;\n return (\n \n {text}\n {this.state.opacities.map((item, i) => (\n \n .\n \n ))}\n \n );\n }\n}\n" }, { "path": "lib/shape/Bar.js", "content": "/**\n * The scale center of this bar is left-center\n */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { Shape, Path } from '@react-native-community/art';\n\nexport default class Bar extends React.PureComponent {\n static propTypes = {\n width: PropTypes.number.isRequired,\n height: PropTypes.number.isRequired,\n };\n\n render() {\n const { width, height } = this.props;\n\n const path = Path()\n .moveTo(width, height / 2)\n .lineTo(0, height / 2)\n .lineTo(0, -height / 2)\n .lineTo(width, -height / 2)\n .close();\n\n return ;\n }\n}\n" }, { "path": "lib/shape/Bar2.js", "content": "/**\n * The scale center of this bar is bottom-center\n */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { Shape, Path } from '@react-native-community/art';\n\nexport default class Bar2 extends React.PureComponent {\n static propTypes = {\n width: PropTypes.number.isRequired,\n height: PropTypes.number.isRequired,\n };\n\n render() {\n const { width, height } = this.props;\n\n const path = Path()\n .moveTo(0, 0)\n .lineTo(0, -height)\n .lineTo(width, -height)\n .lineTo(width, 0)\n .close();\n\n return ;\n }\n}\n" }, { "path": "lib/shape/Bar3.js", "content": "/**\n * The scale center of this bar is center\n */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { Shape, Path } from '@react-native-community/art';\n\nexport default class Bar3 extends React.PureComponent {\n static propTypes = {\n width: PropTypes.number.isRequired,\n height: PropTypes.number.isRequired,\n };\n\n render() {\n const { width, height } = this.props;\n\n const path = Path()\n .moveTo(width / 2, height / 2)\n .lineTo(-width / 2, height / 2)\n .lineTo(-width / 2, -height / 2)\n .lineTo(width / 2, -height / 2)\n .close();\n\n return ;\n }\n}\n" }, { "path": "lib/shape/Circle.js", "content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Shape, Path } from '@react-native-community/art';\n\nexport default class Circle extends React.PureComponent {\n static propTypes = {\n radius: PropTypes.number.isRequired,\n opacity: PropTypes.number,\n };\n\n render() {\n const { radius } = this.props;\n\n const path = Path()\n .moveTo(0, -radius / 2)\n .arc(0, radius, 1)\n .arc(0, -radius, 1)\n .close();\n\n return ;\n }\n}\n" }, { "path": "package.json", "content": "{\n \"name\": \"react-native-indicator\",\n \"version\": \"1.2.2\",\n \"description\": \"React Native Indicator Component\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"lint\": \"./node_modules/.bin/prettier --config .prettierrc --write lib/**/*.js\",\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/wangdicoder/react-native-indicator.git\"\n },\n \"keywords\": [\n \"react-native\",\n \"indicator\",\n \"loader\",\n \"progress\"\n ],\n \"author\": \"Di Wang \",\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/wangdicoder/react-native-indicator/issues\"\n },\n \"homepage\": \"https://github.com/wangdicoder/react-native-indicator#readme\",\n \"dependencies\": {\n \"prop-types\": \"^15.6.0\"\n },\n \"devDependencies\": {\n \"prettier\": \"^1.19.1\"\n }\n}\n" } ]