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

1import React, {
2  Component
3} from 'react'
4
5import {
6  Easing,
7  StyleSheet,
8  Text,
9  View,
10  TouchableWithoutFeedback
11} from 'react-native'
12
13import CircleTransition from 'react-native-expanding-circle-transition'
14const ANIMATION_DURATION = 1200
15const INITIAL_VIEW_BACKGROUND_COLOR = '#E3E4E5'
16const CIRCLE_COLOR1 = '#29C5DB'
17const CIRCLE_COLOR2 = '#4EB8AE'
18const CIRCLE_COLOR3 = '#81C781'
19const CIRCLE_COLOR4 = '#B0D882'
20const TRANSITION_BUFFER = 10
21const POSITON = 'custom'
22
23const reactMixin = require('react-mixin')
24import TimerMixin from 'react-timer-mixin'
25
26class Exemples extends Component {
27  constructor (props) {
28    super(props)
29    this.state = {
30      viewBackgroundColor: INITIAL_VIEW_BACKGROUND_COLOR,
31      circleColor: CIRCLE_COLOR1,
32      customLeftMargin: 0,
33      customTopMargin: 0,
34      counter: 0
35    }
36    this.handlePress = this.handlePress.bind(this)
37    this.changeColor = this.changeColor.bind(this)
38  }
39
40  handlePress (event) {
41    let pressLocationX = event.nativeEvent.locationX
42    let pressLocationY = event.nativeEvent.locationY
43    this.setState({
44      customLeftMargin: pressLocationX,
45      customTopMargin: pressLocationY
46    }, this.circleTransition.start(this.changeColor))
47  }
48
49  changeColor () {
50    const { circleColor, counter } = this.state
51    let newCounter = counter < 3 ? counter + 1 : 0
52    let newCircleColor = this.getColor(newCounter)
53    this.setState({
54      viewBackgroundColor: circleColor,
55      counter: newCounter
56    })
57    this.changeCircleColor(newCircleColor)
58  }
59
60  changeCircleColor (newCircleColor) {
61    this.setTimeout(() => {
62      this.setState({
63        circleColor: newCircleColor
64      })
65    }, TRANSITION_BUFFER + 5)
66  }
67
68  getColor (counter) {
69    switch (counter) {
70      case 0:
71        return CIRCLE_COLOR1
72      case 1:
73        return CIRCLE_COLOR2
74      case 2:
75        return CIRCLE_COLOR3
76      case 3:
77        return CIRCLE_COLOR4
78      default:
79        return CIRCLE_COLOR4
80    }
81  }
82
83  render () {
84    let {
85      circleColor,
86      viewBackgroundColor,
87      customTopMargin,
88      customLeftMargin
89    } = this.state
90    return (
91      <View style={[
92        styles.container,
93        {
94          backgroundColor: viewBackgroundColor
95        }]}>
96        <TouchableWithoutFeedback
97          style={styles.touchable}
98          onPress={this.handlePress}>
99          <View style={styles.touchableView}>
100            <Text style={styles.text}>{viewBackgroundColor.toString()}</Text>
101          </View>
102        </TouchableWithoutFeedback>
103        <CircleTransition
104          ref={(circle) => { this.circleTransition = circle }}
105          color={circleColor}
106          expand
107          customTopMargin={customTopMargin}
108          customLeftMargin={customLeftMargin}
109          transitionBuffer={TRANSITION_BUFFER}
110          duration={ANIMATION_DURATION}
111          easing={Easing.linear}
112          position={POSITON}
113        />
114      </View>
115    )
116  }
117}
118
119reactMixin(Exemples.prototype, TimerMixin)
120
121const styles = StyleSheet.create({
122  container: {
123    flex: 1,
124    flexDirection: 'column',
125    justifyContent: 'center',
126    alignItems: 'stretch'
127  },
128  touchableView: {
129    flex: 1,
130    alignItems: 'center',
131    justifyContent: 'center'
132  },
133  text: {
134    fontSize: 45,
135    fontWeight: '400',
136    color: '#253039'
137  },
138  touchable: {
139    flex: 1,
140    flexDirection: 'row',
141    alignItems: 'center',
142    justifyContent: 'center'
143  }
144})
145
146export default Exemples