Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-native-indicator
Advanced tools
react-native-indicator - npm Package Compare versions
Comparing version 1.2.1 to 1.2.2
@@ -9,98 +9,100 @@ import React from 'react'; | ||
| export default class RotationCircleLoader extends React.PureComponent { | ||
| static propTypes = { | ||
| size: PropTypes.number, | ||
| color: PropTypes.string, | ||
| }; | ||
| static propTypes = { | ||
| size: PropTypes.number, | ||
| color: PropTypes.string, | ||
| }; | ||
| static defaultProps = { | ||
| size: 50, | ||
| color, | ||
| }; | ||
| static defaultProps = { | ||
| size: 50, | ||
| color, | ||
| }; | ||
| state = { | ||
| degree: new Animated.Value(0), | ||
| scales: [new Animated.Value(0), new Animated.Value(0)], | ||
| }; | ||
| timers = []; | ||
| state = { | ||
| degree: new Animated.Value(0), | ||
| scales: [new Animated.Value(0), new Animated.Value(0)] | ||
| }; | ||
| timers = []; | ||
| componentDidMount() { | ||
| this._animation(); | ||
| this.state.scales.forEach((item, i) => { | ||
| const id = setTimeout(() => { | ||
| this._animationCircles(i); | ||
| }, i * 500); | ||
| this.timers.push(id); | ||
| }); | ||
| } | ||
| componentDidMount() { | ||
| this._animation(); | ||
| this.state.scales.forEach((item, i) => { | ||
| const id = setTimeout(() => { | ||
| this._animationCircles(i) | ||
| }, i * 500); | ||
| this.timers.push(id); | ||
| }); | ||
| componentWillUnmount() { | ||
| this.unmounted = true; | ||
| this.timers.forEach((id) => { | ||
| clearTimeout(id); | ||
| }); | ||
| } | ||
| } | ||
| _animation = () => { | ||
| Animated.sequence([ | ||
| Animated.timing(this.state.degree, { | ||
| toValue: 360, | ||
| duration: 2000, | ||
| easing: Easing.linear, | ||
| useNativeDriver: false, | ||
| }), | ||
| ]).start(() => { | ||
| if (!this.unmounted) { | ||
| this.state.degree.setValue(0); | ||
| this._animation(); | ||
| } | ||
| }); | ||
| }; | ||
| componentWillUnmount() { | ||
| this.unmounted = true; | ||
| this.timers.forEach((id) => { | ||
| clearTimeout(id); | ||
| }); | ||
| } | ||
| _animationCircles = (i) => { | ||
| Animated.sequence([ | ||
| Animated.timing(this.state.scales[i], { toValue: 1, duration: 1000, useNativeDriver: false }), | ||
| Animated.timing(this.state.scales[i], { | ||
| toValue: 0.05, | ||
| duration: 1000, | ||
| useNativeDriver: false, | ||
| }), | ||
| ]).start(() => { | ||
| !this.unmounted && this._animationCircles(i); | ||
| }); | ||
| }; | ||
| _animation = () => { | ||
| Animated.sequence([ | ||
| Animated.timing(this.state.degree, { | ||
| toValue: 360, | ||
| duration: 2000, | ||
| easing: Easing.linear, | ||
| useNativeDriver: false | ||
| }) | ||
| ]).start(() => { | ||
| if (!this.unmounted) { | ||
| this.state.degree.setValue(0); | ||
| this._animation(); | ||
| } | ||
| }); | ||
| }; | ||
| render() { | ||
| const { size, color } = this.props; | ||
| const degree = this.state.degree.interpolate({ | ||
| inputRange: [0, 360], | ||
| outputRange: ['0deg', '360deg'], | ||
| }); | ||
| return ( | ||
| <Animated.View | ||
| style={{ | ||
| transform: [{ rotate: degree }], | ||
| backgroundColor: 'rgba(0,0,0,0)', | ||
| }} | ||
| > | ||
| <Surface width={size} height={size}> | ||
| <Group> | ||
| <AnimatedCircle | ||
| fill={color} | ||
| radius={size / 2} | ||
| x={size / 2} | ||
| y={size / 4} | ||
| scale={this.state.scales[0]} | ||
| /> | ||
| <AnimatedCircle | ||
| fill={color} | ||
| radius={size / 2} | ||
| x={size / 2} | ||
| y={(size / 4) * 3} | ||
| scale={this.state.scales[1]} | ||
| /> | ||
| </Group> | ||
| </Surface> | ||
| </Animated.View> | ||
| ); | ||
| } | ||
| _animationCircles = (i) => { | ||
| Animated.sequence([ | ||
| Animated.timing(this.state.scales[i], { toValue: 1, duration: 1000, useNativeDriver: false }), | ||
| Animated.timing(this.state.scales[i], { | ||
| toValue: 0.05, | ||
| duration: 1000, | ||
| useNativeDriver: false | ||
| }), | ||
| ]).start(() => { | ||
| !this.unmounted && this._animationCircles(i); | ||
| }); | ||
| }; | ||
| render() { | ||
| const { size, color } = this.props; | ||
| const degree = this.state.degree.interpolate({ | ||
| inputRange: [0, 360], | ||
| outputRange: ['0deg', '360deg'] | ||
| }); | ||
| return ( | ||
| <Animated.View | ||
| style={{ | ||
| transform: [{ rotate: degree }], | ||
| backgroundColor: 'rgba(0,0,0,0)', | ||
| width: size, | ||
| height: size | ||
| }}> | ||
| <Surface width={size} height={size}> | ||
| <Group> | ||
| <AnimatedCircle | ||
| fill={color} | ||
| radius={size / 2} | ||
| x={size / 2} | ||
| y={size / 4} | ||
| scale={this.state.scales[0]} | ||
| /> | ||
| <AnimatedCircle | ||
| fill={color} | ||
| radius={size / 2} | ||
| x={size / 2} | ||
| y={size / 4 * 3} | ||
| scale={this.state.scales[1]} | ||
| /> | ||
| </Group> | ||
| </Surface> | ||
| </Animated.View> | ||
| ); | ||
| } | ||
| } |
@@ -9,59 +9,65 @@ import React from 'react'; | ||
| export default class RotationCircleLoader extends React.PureComponent { | ||
| static propTypes = { | ||
| size: PropTypes.number, | ||
| color: PropTypes.string, | ||
| rotationSpeed: PropTypes.number, | ||
| }; | ||
| static propTypes = { | ||
| size: PropTypes.number, | ||
| color: PropTypes.string, | ||
| rotationSpeed: PropTypes.number | ||
| }; | ||
| static defaultProps = { | ||
| size: 40, | ||
| color, | ||
| rotationSpeed: 800, | ||
| }; | ||
| static defaultProps = { | ||
| size: 40, | ||
| color, | ||
| rotationSpeed: 800 | ||
| }; | ||
| state = { | ||
| degree: new Animated.Value(0), | ||
| }; | ||
| state = { | ||
| degree: new Animated.Value(0) | ||
| }; | ||
| componentDidMount() { | ||
| this._animation(); | ||
| } | ||
| componentDidMount() { | ||
| this._animation(); | ||
| } | ||
| componentWillUnmount() { | ||
| this.unmounted = true; | ||
| } | ||
| componentWillUnmount() { | ||
| this.unmounted = true; | ||
| } | ||
| _animation = () => { | ||
| Animated.sequence([ | ||
| Animated.timing(this.state.degree, { | ||
| toValue: 360, | ||
| duration: this.props.rotationSpeed, | ||
| easing: Easing.linear, | ||
| useNativeDriver: false, | ||
| }), | ||
| ]).start(() => { | ||
| if (!this.unmounted) { | ||
| this.state.degree.setValue(0); | ||
| this._animation(); | ||
| } | ||
| }); | ||
| }; | ||
| _animation = () => { | ||
| Animated.sequence([ | ||
| Animated.timing(this.state.degree, { | ||
| toValue: 360, | ||
| duration: this.props.rotationSpeed, | ||
| easing: Easing.linear, | ||
| useNativeDriver: false | ||
| }) | ||
| ]).start(() => { | ||
| if (!this.unmounted) { | ||
| this.state.degree.setValue(0); | ||
| this._animation(); | ||
| } | ||
| }); | ||
| }; | ||
| render() { | ||
| const { size, color } = this.props; | ||
| const degree = this.state.degree.interpolate({ | ||
| inputRange: [0, 360], | ||
| outputRange: ['0deg', '360deg'], | ||
| }); | ||
| return ( | ||
| <Animated.View style={{ transform: [{ rotate: degree }], backgroundColor: 'rgba(0,0,0,0)' }}> | ||
| <Surface width={size} height={size}> | ||
| <Group> | ||
| <AnimatedCircle fill={color} radius={size} x={size / 2} y={size / 2} /> | ||
| <AnimatedCircle fill="#fff" radius={size / 4} x={size / 2} y={size / 8} /> | ||
| </Group> | ||
| </Surface> | ||
| </Animated.View> | ||
| ); | ||
| } | ||
| render() { | ||
| const { size, color } = this.props; | ||
| const degree = this.state.degree.interpolate({ | ||
| inputRange: [0, 360], | ||
| outputRange: ['0deg', '360deg'] | ||
| }); | ||
| return ( | ||
| <Animated.View | ||
| style={{ | ||
| transform: [{ rotate: degree }], | ||
| backgroundColor: 'rgba(0,0,0,0)', | ||
| width: size, | ||
| height: size | ||
| }}> | ||
| <Surface width={size} height={size}> | ||
| <Group> | ||
| <AnimatedCircle fill={color} radius={size} x={size / 2} y={size / 2}/> | ||
| <AnimatedCircle fill="#fff" radius={size / 4} x={size / 2} y={size / 8}/> | ||
| </Group> | ||
| </Surface> | ||
| </Animated.View> | ||
| ); | ||
| } | ||
| } |
@@ -9,73 +9,79 @@ import React from 'react'; | ||
| export default class RotationHoleLoader extends React.PureComponent { | ||
| static propTypes = { | ||
| size: PropTypes.number, | ||
| color: PropTypes.string, | ||
| strokeWith: PropTypes.number, | ||
| rotationSpeed: PropTypes.number, | ||
| }; | ||
| static propTypes = { | ||
| size: PropTypes.number, | ||
| color: PropTypes.string, | ||
| strokeWith: PropTypes.number, | ||
| rotationSpeed: PropTypes.number | ||
| }; | ||
| static defaultProps = { | ||
| size: 40, | ||
| color, | ||
| rotationSpeed: 800, | ||
| strokeWith: 8, | ||
| }; | ||
| static defaultProps = { | ||
| size: 40, | ||
| color, | ||
| rotationSpeed: 800, | ||
| strokeWith: 8 | ||
| }; | ||
| state = { | ||
| degree: new Animated.Value(0), | ||
| }; | ||
| state = { | ||
| degree: new Animated.Value(0) | ||
| }; | ||
| componentDidMount() { | ||
| this._animation(); | ||
| } | ||
| componentDidMount() { | ||
| this._animation(); | ||
| } | ||
| componentWillUnmount() { | ||
| this.unmounted = true; | ||
| } | ||
| componentWillUnmount() { | ||
| this.unmounted = true; | ||
| } | ||
| _animation = () => { | ||
| Animated.sequence([ | ||
| Animated.timing(this.state.degree, { | ||
| toValue: 360, | ||
| duration: this.props.rotationSpeed, | ||
| easing: Easing.linear, | ||
| useNativeDriver: false, | ||
| }), | ||
| ]).start(() => { | ||
| if (!this.unmounted) { | ||
| this.state.degree.setValue(0); | ||
| this._animation(); | ||
| } | ||
| }); | ||
| }; | ||
| _animation = () => { | ||
| Animated.sequence([ | ||
| Animated.timing(this.state.degree, { | ||
| toValue: 360, | ||
| duration: this.props.rotationSpeed, | ||
| easing: Easing.linear, | ||
| useNativeDriver: false | ||
| }) | ||
| ]).start(() => { | ||
| if (!this.unmounted) { | ||
| this.state.degree.setValue(0); | ||
| this._animation(); | ||
| } | ||
| }); | ||
| }; | ||
| render() { | ||
| const { size, color, strokeWith } = this.props; | ||
| const degree = this.state.degree.interpolate({ | ||
| inputRange: [0, 360], | ||
| outputRange: ['0deg', '360deg'], | ||
| }); | ||
| return ( | ||
| <Animated.View style={{ transform: [{ rotate: degree }], backgroundColor: 'rgba(0,0,0,0)' }}> | ||
| <Surface width={size + strokeWith * 2} height={size + strokeWith * 2}> | ||
| <Group> | ||
| <AnimatedCircle | ||
| stroke={color} | ||
| opacity={0.3} | ||
| strokeWidth={strokeWith} | ||
| radius={size} | ||
| x={size / 2 + strokeWith} | ||
| y={size / 2 + strokeWith} | ||
| /> | ||
| <AnimatedCircle | ||
| fill={color} | ||
| radius={strokeWith} | ||
| x={size / 2 + strokeWith} | ||
| y={strokeWith} | ||
| /> | ||
| </Group> | ||
| </Surface> | ||
| </Animated.View> | ||
| ); | ||
| } | ||
| render() { | ||
| const { size, color, strokeWith } = this.props; | ||
| const degree = this.state.degree.interpolate({ | ||
| inputRange: [0, 360], | ||
| outputRange: ['0deg', '360deg'] | ||
| }); | ||
| return ( | ||
| <Animated.View | ||
| style={{ | ||
| transform: [{ rotate: degree }], | ||
| backgroundColor: 'rgba(0,0,0,0)', | ||
| width: size + strokeWith * 2, | ||
| height: size + strokeWith * 2 | ||
| }}> | ||
| <Surface width={size + strokeWith * 2} height={size + strokeWith * 2}> | ||
| <Group> | ||
| <AnimatedCircle | ||
| stroke={color} | ||
| opacity={0.3} | ||
| strokeWidth={strokeWith} | ||
| radius={size} | ||
| x={size / 2 + strokeWith} | ||
| y={size / 2 + strokeWith} | ||
| /> | ||
| <AnimatedCircle | ||
| fill={color} | ||
| radius={strokeWith} | ||
| x={size / 2 + strokeWith} | ||
| y={strokeWith} | ||
| /> | ||
| </Group> | ||
| </Surface> | ||
| </Animated.View> | ||
| ); | ||
| } | ||
| } |
| { | ||
| "name": "react-native-indicator", | ||
| "version": "1.2.1", | ||
| "version": "1.2.2", | ||
| "description": "React Native Indicator Component", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by0.85%
1534
Worsened metrics
- Total package byte prevSize
- decreased by-0.9%
51316
No dependency changes