CODEWITHSUNDEEP
react-nativepositionreact-animated
Walrus
Walrus

Reputation: 20464

React Native animate position (Left & Right) using useNativeDriver

Is it possible to extend ReactNative to allow animation of an element's position using the native driver.

Whilst you can animate via translateX, in this case, the size of the element is to be reduced adding by changing both its left and right style parameters.

Neither left, right, marginLeft, marginRight, paddingLeft nor paddingRight are supported for native animations. Is there a way around this or some ingenious idea involving scaling that won't distort the element.

export class ViewScreen extends React.Component {
    constructor(props) {
        super(props);
        this.state= {
            scrollY: new Animated.Value(0)
        }
    }

    render() {
        var VSStickyElementsMargin = this.state.scrollY.interpolate({
            inputRange: [0, 44],
            outputRange: [0, 4]
        });

    return (

        <Animated.ScrollView
            onScroll={Animated.event([
                { nativeEvent: { contentOffset: { y: this.state.scrollY } }}],
                { useNativeDriver: true }
            )}>

            <Animated.View style={[
                {left: VSStickyElementsMargin},
                {right: VSStickyElementsMargin}
            ]}>
                <Text>I am content that is not to become distorted</Text>
            </Animated.View>

        </Animated.ScrollView>
        )
    }
}

Upvotes: 0

Views: 4659

Answers (1)

JoshPerry
JoshPerry

Reputation: 125

There is no way to use native driver on properties that are not transforms or opacity.

If I understand what you are trying to achieve correctly you should use use translateX to move the element outwith its parent and animate it back into view when you need to, use overflow hidden on the parent.

Alternatively if this is not the effect you want try looking at the layoutanimation api as you can get better performance using it to drive values than animating non transform/opacity properties.

Upvotes: 1

Related Questions