How to use react-move - 7 common examples

})),
                React.createElement(react_native_easy_grid_1.Row, { style: this.props.styleRowButtons
                        ? this.props.styleRowButtons
                        : styles.row },
                    React.createElement(react_native_easy_grid_1.Col, { style: this.props.styleEmptyColumn
                            ? this.props.styleEmptyColumn
                            : styles.colEmpty }, this.props.emptyColumnComponent || null),
                    React.createElement(react_native_easy_grid_1.Col, { style: this.props.styleColumnButtons
                            ? this.props.styleColumnButtons
                            : styles.colButtonCircle }, this.props.buttonNumberComponent
                        ? this.props.buttonNumberComponent("0", this.onPressButtonNumber)
                        : this.renderButtonNumber("0")),
                    React.createElement(react_native_easy_grid_1.Col, { style: this.props.styleColumnButtons
                            ? this.props.styleColumnButtons
                            : styles.colButtonCircle },
                        React.createElement(Animate_1.default, { show: true, start: {
                                opacity: 0.5
                            }, update: {
                                opacity: [
                                    password.length === 0 ||
                                        password.length === this.props.passwordLength
                                        ? 0.5
                                        : 1
                                ],
                                timing: { duration: 400, ease: d3_ease_1.easeLinear }
                            } }, ({ opacity }) => this.props.buttonDeleteComponent
                            ? this.props.buttonDeleteComponent(() => {
                                if (this.state.password.length > 0) {
                                    const newPass = this.state.password.slice(0, -1);
                                    this.setState({ password: newPass });
                                    if (this.props.getCurrentLength)
                                        this.props.getCurrentLength(newPass.length);

this.renderButtonNumber = (text) => {
            const disabled = (this.state.password.length === this.props.passwordLength ||
                this.state.showError) &&
                !this.state.attemptFailed;
            return (React.createElement(Animate_1.default, { show: true, start: {
                    opacity: 1
                }, update: {
                    opacity: [
                        this.state.showError && !this.state.attemptFailed ? 0.5 : 1
                    ],
                    timing: { duration: 200, ease: d3_ease_1.easeLinear }
                } }, ({ opacity }) => (React.createElement(react_native_1.TouchableHighlight, { style: [
                    this.props.styleButtonCircle
                        ? this.props.styleButtonCircle
                        : styles.buttonCircle,
                    {
                        backgroundColor: this.props.colorCircleButtons
                            ? this.props.colorCircleButtons
                            : "rgb(242, 245, 251)"
                    }
                ], underlayColor: this.props.numbersButtonOverlayColor

this.renderErrorLocked = () => {
            const minutes = Math.floor(this.state.timeDiff / 1000 / 60);
            const seconds = Math.floor(this.state.timeDiff / 1000) % 60;
            return (React.createElement(react_native_1.View, null,
                React.createElement(Animate_1.default, { show: true, start: {
                        opacity: 0
                    }, enter: {
                        opacity: [1],
                        timing: { delay: 1000, duration: 1500, ease: d3_ease_1.easeLinear }
                    } }, (state) => (React.createElement(react_native_1.View, { style: [
                        this.props.styleViewTextLock
                            ? this.props.styleViewTextLock
                            : styles.viewTextLock,
                        { opacity: state.opacity }
                    ] },
                    this.props.titleComponent
                        ? this.props.titleComponent()
                        : this.renderTitle(),
                    this.props.timerComponent
                        ? this.props.timerComponent()
                        : this.renderTimer(minutes, seconds),

this.props.titleComponent
                        ? this.props.titleComponent()
                        : this.renderTitle(),
                    this.props.timerComponent
                        ? this.props.timerComponent()
                        : this.renderTimer(minutes, seconds),
                    this.props.iconComponent
                        ? this.props.iconComponent()
                        : this.renderIcon(),
                    React.createElement(react_native_1.Text, { style: this.props.styleText ? this.props.styleText : styles.text }, this.props.textDescription
                        ? this.props.textDescription
                        : `To protect your information, access has been locked for ${Math.ceil(this.props.timeToLock / 1000 / 60)} minutes.`),
                    React.createElement(react_native_1.Text, { style: this.props.styleText ? this.props.styleText : styles.text }, this.props.textSubDescription
                        ? this.props.textSubDescription
                        : "Come back later and try again.")))),
                React.createElement(Animate_1.default, { show: true, start: {
                        opacity: 0
                    }, enter: {
                        opacity: [1],
                        timing: { delay: 2000, duration: 1500, ease: d3_ease_1.easeLinear }
                    } }, (state) => (React.createElement(react_native_1.View, { style: { opacity: state.opacity, flex: 1 } },
                    React.createElement(react_native_1.View, { style: this.props.styleViewButton
                            ? this.props.styleViewButton
                            : styles.viewCloseButton }, this.props.buttonComponent
                        ? this.props.buttonComponent()
                        : this.renderButton()))))));
        };
        this.state = {

const colorTextOn = this.props.colorTextOn || defaultColorTextOnLine;
            const disabled = this.props.disabled || defaultDisabledValue;
            const colorTextOff = this.props.colorTextOff || defaultColorTextOffLine;
            const textFont = this.props.textFont || defaultTextFont;
            const textOn = this.props.textOn || defaultTextOnLine;
            const textOff = this.props.textOff || defaultTextOffLine;
            const sliderHeight = this.props.sliderHeight || defaultSwitchHeightLine;
            const sliderWidth = this.props.sliderWidth || defaultSwitchWidthLine;
            const spaceBetween = this.props.spaceBetween || defaultSpaceBetweenLine;
            const buttonColor = this.props.buttonColor || defaultButtonColorLine;
            const colorSwitchOn = this.props.colorSwitchOn || defaultColorSwitch;
            const colorSwitchOff = this.props.colorSwitchOff || defaultColorSwitch;
            const showText = this.props.showText === false ? this.props.showText : defaultShowText;
            const borderWidth = this.props.borderWidth ? this.props.borderWidth : defaultBorderWidth;
            const borderColor = this.props.borderColor ? this.props.borderColor : defaultBorderColor;
            return (React.createElement(react_move_1.Animate, { show: true, start: {
                    colorNo: this.props.value ? colorTextOff : colorTextOn,
                    colorYes: this.props.value ? colorTextOn : colorTextOff,
                    positionButton: this.props.value ? sliderWidth - buttonOffsetRight - buttonSize / 2 : buttonOffsetLeft,
                    opacityChildren: this.props.value ? 1 : 0
                }, update: {
                    colorNo: [this.props.value ? colorTextOff : colorTextOn],
                    colorYes: [this.props.value ? colorTextOn : colorTextOff],
                    positionButton: [this.props.value ? sliderWidth - buttonOffsetRight - buttonSize / 2 : buttonOffsetLeft],
                    opacityChildren: this.props.value ? [1] : [0],
                    timing: { duration: duration, ease: easingFunction }
                } }, (state) => (React.createElement(react_native_1.View, null,
                React.createElement(react_native_1.View, { style: { alignItems: 'center', flexDirection: 'row' } },
                    showText && React.createElement(react_native_1.Text, { style: { fontFamily: textFont, color: state.colorNo, marginRight: spaceBetween / 2 } }, textOff),
                    React.createElement(react_native_1.View, { style: { paddingRight: spaceBetween / 2, paddingLeft: spaceBetween / 2 } },
                        React.createElement(react_native_1.View, { style: {
                                height: sliderHeight,

import { createAnimate } from 'react-move'
import { interpolate, interpolateTransformSvg } from 'd3-interpolate'

export default createAnimate(function getInterpolator(attr, begValue, endValue) {
  if (attr === 'transform') {
    return interpolateTransformSvg(begValue, endValue)
  }

  return interpolate(begValue, endValue)
}, 'DocsAnimate')

import { createNodeGroup } from 'react-move'
import { interpolate, interpolateTransformSvg } from 'd3-interpolate'

export default createNodeGroup(function getInterpolator(begValue, endValue, attr) {
  if (attr === 'transform') {
    return interpolateTransformSvg(begValue, endValue)
  }

  return interpolate(begValue, endValue)
}, 'DocsNodeGroup')