question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Transform style isn't animating with LayoutAnimation

See original GitHub issue

All the other styles animate fine, only transform isn’t

Using .30

Here is the snippet which can also be viewed in the repo

/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/

import React, { Component } from 'react';

import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    LayoutAnimation,
    UIManager,
    Platform,
    TouchableOpacity,
    Animated
} from 'react-native';

// need this to have LayoutAnimation work on android
if (Platform.OS === 'android') {
    UIManager.setLayoutAnimationEnabledExperimental(true);
}

class NativeSidemenu extends Component {

    constructor(){
        super()

        this.state = {
            active:false,
            fadeAnim: new Animated.Value(0),
        }
    }

    componentWillUpdate() {
        LayoutAnimation.easeInEaseOut();
    }

    handleActivateMenu(){
        this.setState({active:!this.state.active}, this.handleActivateMenuComplete)
    }

    handleActivateMenuComplete(){

        const animationOptions =  {
            toValue: this.state.active ? 1 : 0,
            duration: 550,
        }

        Animated
            .timing(this.state.fadeAnim, animationOptions )
            .start()

    }

    render() {

        const activeCss = this.state.active
            ? styles.containterActive
            : null

        const menuState = this.state.active
            ? styles.menuActive
            : styles.menu

        const links = [
            'Home',
            'Profile',
            'Favorites',
            'Entries',
            'Search',
            'Logout',
        ]

        const last = links.length - 1

        return (
            <View style={styles.outer}>

                <View style={menuState}>
                    <Animated.View  style={{opacity: this.state.fadeAnim}}>
                        {links.map( (name, i) =>
                            <TouchableOpacity key={name} style={[styles.linkWrapper, i === last ? styles.last : null]} onPress={()=> this.handleActivateMenu()} >
                                <Text style={styles.link}>{name}</Text>
                            </TouchableOpacity>
                        )}
                    </Animated.View>
                </View>

                <View style={[styles.container, activeCss]} >
                    <Text style={styles.welcome} onPress={()=> this.setState({active:!this.state.active})} >
                        Side Menu Example
                    </Text>

                    <TouchableOpacity style={styles.btn} onPress={()=> this.handleActivateMenu()}>
                        <Text style={{color:'white'}}>Show Menu</Text>
                    </TouchableOpacity>

                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    outer: {
        backgroundColor: '#ccc',
        flex: 1,
    },
    btn: {
        alignItems: 'center',
        justifyContent: 'center',
        padding: 12,
        borderRadius: 2,
        backgroundColor: '#11c1f3',
        marginLeft:30,
        marginRight:30
    },
    menu:{
        position:'absolute',
        margin: 20,
        left: -50
    },
    menuActive:{
        position:'absolute',
        margin: 20,
        left: 0
    },
    linkWrapper:{
        borderBottomWidth: 1,
        borderBottomColor: '#bbb',
        marginBottom: 20,
        width: 100,
        paddingLeft:10
    },
    last:{
        borderBottomWidth: 0,
    },
    link:{
        paddingTop:10,
        paddingBottom:10,
        fontSize:18
    },
    container: {
        flex: 1,
        justifyContent: 'center',
        backgroundColor: '#ddd',
    },
    containterActive:{
        flex: 5,
        right: -180,
        borderRadius: 4,
        transform: [ //TODO figure out why this isnt animating...
            {scale: .8}
        ],
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },

});

AppRegistry.registerComponent('NativeSidemenu', () => NativeSidemenu);

Does transforms have support for animation with LayoutAnimation?

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
DanielMSchmidtcommented, Jul 30, 2016

I can confirm that scale does work with the Animated API.

1reaction
DanielMSchmidtcommented, Jul 30, 2016

I made an RNPlay to illustrate the issue.

Read more comments on GitHub >

github_iconTop Results From Across the Web

reactjs - Layout Animation on Transforms - Stack Overflow
For scale animation, you need to use customized animation. LayoutAnimation.configureNext({ duration: 700, create: { type: LayoutAnimation.
Read more >
Layout animations | Framer for Developers
Create layout and shared layout animations with React and Framer Motion. CSS layouts are difficult and expensive to animate. Animating a style like...
Read more >
Everything about Framer Motion layout animations
A complete guide to Framer Motion layout animations showcasing every concept, from the layout prop, shared layout animations and LayoutGroup ...
Read more >
Custom Animations | React Native Reanimated
If our set of predefined animations is not enough for you then this tab is what you are looking for.
Read more >
Animations - React Native
Animations allow you to convey physically believable motion in your ... and LayoutAnimation for animated global layout transactions.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found