How to use the react-move.Animate function in react-move

To help you get started, we’ve selected a few react-move examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github jarden-digital / react-native-switches / dist / index.js View on Github external
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,

react-move

Beautiful, data-driven animations for React.

MIT
Latest version published 3 years ago

Package Health Score

64 / 100
Full package analysis