react-native-expanding-circle-transition
Preview
Installation
npm install react-native-expanding-circle-transition --save
Props
| Props | type | description | required or default |
|---|---|---|---|
| color | string | Color of the circle view | 'orange' |
| size | number | Size of the circle view. Important: It has to fit in the window | Math.min(width, height) - 1 |
| scaleShrink | number | Scale factor to shrink the circle | 0 |
| scaleExpand | number | Scale factor to expand the circle | 4 |
| transitionBuffer | number | Buffer between the transition and the animation. The transition must happen before the circle is hidden | 5 |
| duration | number | Animation duration | 800 |
| expand | bool | Expand the circle if true, reduce the circle if false | true |
| position | enum | Circle position : ['topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'center', 'left', 'right', 'top', 'bottom', 'custom'] | 'topLeft' |
| customLeftMargin | number | Custom position's left margin from the center of the circle positioned at topLeft | 0 |
| customTopMargin | number | Custom position's top margin from the center of the circle positioned at topLeft | 0 |
| easing | func | React Native Animation Easing | Easing.linear |
How to use
To trigger the animation, you need to use a ref to call the start function of this component. To change the scene before the circle is hidden, pass a callback(check out usage exemple handlePress function).
Usage exemples
import React, { Component } from 'react' import { Easing, StyleSheet, Text, View, TouchableWithoutFeedback } from 'react-native' import CircleTransition from 'react-native-expanding-circle-transition' const ANIMATION_DURATION = 1200 const INITIAL_VIEW_BACKGROUND_COLOR = '#E3E4E5' const CIRCLE_COLOR1 = '#29C5DB' const CIRCLE_COLOR2 = '#4EB8AE' const CIRCLE_COLOR3 = '#81C781' const CIRCLE_COLOR4 = '#B0D882' const TRANSITION_BUFFER = 10 const POSITON = 'custom' const reactMixin = require('react-mixin') import TimerMixin from 'react-timer-mixin' class Exemples extends Component { constructor (props) { super(props) this.state = { viewBackgroundColor: INITIAL_VIEW_BACKGROUND_COLOR, circleColor: CIRCLE_COLOR1, customLeftMargin: 0, customTopMargin: 0, counter: 0 } this.handlePress = this.handlePress.bind(this) this.changeColor = this.changeColor.bind(this) } handlePress (event) { let pressLocationX = event.nativeEvent.locationX let pressLocationY = event.nativeEvent.locationY this.setState({ customLeftMargin: pressLocationX, customTopMargin: pressLocationY }, this.circleTransition.start(this.changeColor)) } changeColor () { const { circleColor, counter } = this.state let newCounter = counter < 3 ? counter + 1 : 0 let newCircleColor = this.getColor(newCounter) this.setState({ viewBackgroundColor: circleColor, counter: newCounter }) this.changeCircleColor(newCircleColor) } changeCircleColor (newCircleColor) { this.setTimeout(() => { this.setState({ circleColor: newCircleColor }) }, TRANSITION_BUFFER + 5) } getColor (counter) { switch (counter) { case 0: return CIRCLE_COLOR1 case 1: return CIRCLE_COLOR2 case 2: return CIRCLE_COLOR3 case 3: return CIRCLE_COLOR4 default: return CIRCLE_COLOR4 } } render () { let { circleColor, viewBackgroundColor, customTopMargin, customLeftMargin } = this.state return ( <View style={[ styles.container, { backgroundColor: viewBackgroundColor }]}> <TouchableWithoutFeedback style={styles.touchable} onPress={this.handlePress}> <View style={styles.touchableView}> <Text style={styles.text}>{viewBackgroundColor.toString()}</Text> </View> </TouchableWithoutFeedback> <CircleTransition ref={(circle) => { this.circleTransition = circle }} color={circleColor} expand customTopMargin={customTopMargin} customLeftMargin={customLeftMargin} transitionBuffer={TRANSITION_BUFFER} duration={ANIMATION_DURATION} easing={Easing.linear} position={POSITON} /> </View> ) } } reactMixin(Exemples.prototype, TimerMixin) const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'stretch' }, touchableView: { flex: 1, alignItems: 'center', justifyContent: 'center' }, text: { fontSize: 45, fontWeight: '400', color: '#253039' }, touchable: { flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' } }) export default Exemples
