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 Examples 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;