react-native-expanding-circle-transition

Preview

App 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 when fully expanded.	the height of the screen times 3
scaleShrink	number	scale factor to shrink the circle	0
scaleShrink	number	scale factor to expand the circle	4
transitionBuffer	number	buffer between the transition and the animation. the expanding circle transition must happen before the circle is hidden	5
duration	number	duration of the animation	800
expand	bool	expand if true, reduce false	true
position	enum	position of the circle : ['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's Easing for the animation	Easing.linear
zIndex	number	zIndex of the animation	999

How to use

To trigger the animation, you need to use a ref to call the start function of this component. You need to pass a callback to this function in order to change the scene before the circle is hidden(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 './CircleTransition'
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
            ref={(touchableView) => { this.touchableView = touchableView }} 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```