CODEWITHSUNDEEP
react-native
Kakar
Kakar

Reputation: 5599

react native LayoutAnimation spring animation after component mounts

When the component (MenuBtn) mounts, I want to increase the size of the button from 0 to 50 in a spring popping way. But instead I am having to problems:

  1. No only the MenuBtn animates, but also the Text component ("Heading").

  2. The first mounting animation is not a spring type, but in a fadingIn kind of way. But the showMenu() animates in a spring type.

What am I missing here? How can I make only the MenuBtn pop up when it loads and not all the components.

export default class App extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.header}>Heading</Text>
                <View style={styles.wrapper}>
                    <MenuBtn/>
                </View>
            </View>
        )
    }
}

class MenuBtn extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            radius: 0,
            degree: '0deg',
        };
    }

    componentDidMount() {
        LayoutAnimation.spring();
        this.setState({
            radius: 50,
        });
    }

    showMenu = () => {
        LayoutAnimation.spring();
        this.setState({
            radius: this.state.radius == 60 ? 50 : 60,
            degree: this.state.degree == '45deg' ? '0deg' : '45deg',
        })
    };

    render() {
        return (
            <TouchableWithoutFeedback onPress={this.showMenu}>
                <View style={{ width: this.state.radius, height: this.state.radius, borderRadius: this.state.radius/2, transform: [{rotateZ: this.state.degree}],}}>
                    <Icon name="plus" size={30} color="white"/>
                </View>
            </TouchableWithoutFeedback>
        )
    }
}

Upvotes: 1

Views: 2417

Answers (1)

jevakallio
jevakallio

Reputation: 35890

The LayoutAnimation API is simple to use, but doesn't offer a lot of customizability. When you call LayoutAnimation.spring(), or any of the other LayoutAnimation methods, you are effectively saying "animate all UI changes that happen during this render cycle".

Instead, you could use the Animated API to gain more control the type and target of the animation. Because it's a lower-level API, this requires a bit more code.

For simple transitions like this one, I would recommend using the excellent react-native-animatable library, which makes entry transitions as easy as wrapping your element in an Animatable.View and specifying one of the many available transitions:

<Animatable.View animation='bounceIn'>
  // your component
</Animatable.View>

Upvotes: 2

Related Questions