How to use the react-move/Animate.default 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-pincode / dist / src / PinCode.js View on Github external
})),
                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);
github jarden-digital / react-native-pincode / dist / src / PinCode.js View on Github external
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
github jarden-digital / react-native-pincode / dist / src / ApplicationLocked.js View on Github external
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),
github jarden-digital / react-native-pincode / dist / src / ApplicationLocked.js View on Github external
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 = {

react-move

Beautiful, data-driven animations for React.

MIT
Latest version published 3 years ago

Package Health Score

64 / 100
Full package analysis