React-native-web: Unable to animate transforms

[holmesal]

I'm attempting to animate a transform, but it appears to just retain the initial value.

Here's the component:

import React, {
    Animated,
    Component,
    Image,
    PropTypes,
    StyleSheet,
    Text,
    View
} from 'react-native';

export default class AnimationTest extends Component {

    state = {
        position: new Animated.Value(0)
    };

    componentDidMount() {
        setTimeout(() => {
            Animated.spring(this.state.position, {
                toValue: 300
            }).start()
        }, 2000);
    }


    render() {
        return (
            <Animated.View style={[styles.wrapper, {
                                opacity: this.state.position,   // this works
                                transform: [{translateX: this.state.position    // this doesn't work
                                }]}]}>
                <Text>I am the AnimationTest component!</Text>
            </Animated.View>
        );
    }
}

let styles = StyleSheet.create({
    wrapper: {
        width: 200,
        height: 200,
        backgroundColor: 'red'
    }
});

And the result:

[holmesal]

Animating left updates the property correctly:

render() {
        return (
            <Animated.View style={[styles.wrapper, {
                                opacity: this.state.position,   // this works
                                left: this.state.position,  // this works
                                transform: [{translateX: this.state.position    // this doesn't work
                                }]}]}>
                <Text>I am the AnimationTest component!</Text>
            </Animated.View>
        );
    }

But it's not a good approach.

[bmcmahen]

I'm running into this issue too. left does work, but translateX doesn't.

[necolas]

This was happening because the transform value was a number and ended up creating inline styles without the px unit. It should be fixed in 0.0.32