Skip to content

Error adding opacity to animated.view in react native 0.37 #10888

Description

@koraniar

this code works perfectly on react native 0.35 or earlier, but after update to react native 0.36 and 0.37 it not works

class LoginViewComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            scale: new Animated.Value(1.5),
            offset: new Animated.Value((window.height / 2) - (125)),
            opacity: new Animated.Value(0)
        };
    }

    componentDidMount() {
        setTimeout(() => {
            Animated.timing(
                this.state.offset,
                {
                    toValue: 0,
                    duration: 1000
                }
            ).start();

            Animated.timing(
                this.state.scale,
                {
                    toValue: 1,
                    duration: 1000
                }
            ).start();

            setTimeout(() => {
                console.log("it is really called");
                Animated.timing(
                    this.state.opacity,
                    {
                        toValue: 1,
                        duration: 500
                    }
                ).start();
            }, 800);
        }, 1200);
    }

    render() {
        var scale = this.state.scale;
        return (
            <View style={styles.container}>
                {/* this animated view works */}
                <Animated.View style={[{ alignItems: 'center', position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }, { transform: [{ scale }, { translateY: this.state.offset }] }]}>
                    <Image source={require('../Assets/Images/logotype.png')} style={styles.imageLogo} />
                </Animated.View>
                {/* this animated view do not works */}
                <Animated.View style={{ opacity: this.state.opacity }}>
                    <FinalView />
                </Animated.View>
                {/* I have tried too */}
                <Animated.View style={{ opacity: 1 }}>
                    <FinalView />
                </Animated.View>
            </View>
        )
    }
}

It only works if I remove Animated.View, but works without animation

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions