UI Animations in React Native

UI Animations are important

LayoutAnimation

Simple animations that run when next layout happens.
Easy to setup.
No real control.

Animated

Complicated animations.
Relatively complicated Setup.
Fine grained control.
Very useful for handling gesture animations. (along with PanResponder API)

was finally able to break into the app's proprietary codebase last night and boy! that getTotalMatchCount() subroutine was super tight! amazing app!

- James Young, 5 stars

Animated

Animated.Value()

&

Animated.ValueXY()

Animated.Value()

opacity, scale, rotate, translate, skew ...

Example 1

Rotating the main button.
Reversing the rotate animation.
Animating the child buttons

    
    // MainButton.js
    import { Animated } from 'react-native'

    export default (MainButton = ({ onPress, styles, icon }) => (
      <TouchableWithoutFeedback 
        onPress={onPress}
      >
        <Animated.View style={styles}>
          <Icon
            ...
          />
        </Animated.View>
      </TouchableWithoutFeedback>
    ));

 
    // AddButton.js
    export default class AddButton extends Component {
        render() {
            <View style={styles.container}>
                <MainButton
                    onPress={this.onMainButtonPress}
                    styles={...}
                    icon="md-dd"
                />
            </View>
        } 
    }

 
    // AddButton.js

    const styles = StyleSheet.create({
        mainButton: {
            width: 70,
            height: 70,
            ....
        }
    });

    export default class AddButton extends Component {
        
        dynamicMainButtonStyles = () => ({
            // Return dynamic styles
        });

        onMainButtonPress = () => {
            // Trigger the animation
        };

        render() {
            <View style={styles.container}>
                <MainButton
                    onPress={this.onMainButtonPress}
                    styles={this.dynamicMainButtonStyles()}
                    icon="md-dd"
                />
            </View>
        } 
    }

 
    {
        
        dynamicMainButtonStyles = () => ({
            ...StyleSheet.flatten(styles.mainButton),
        });

        onMainButtonPress = () => {
            // Trigger the animation
        }
        
    }

// TODO : More code walk through for this example to demonstrate Animated.Value(), Animated.timing/spring e.t.c, custom technique to reverse animation and Animated.stagger()

Example 2

Animating contents of newly summoned screen.

// TODO: Code walkthrough for Example 2 to explain Animated.stagger and also for creating custom views for animated child components

Animated.ValueXY()

2D animations, Animations that respond to gesture events emitted by PanResponder API

Example 3

Animate cards based on gestures.

(The final example will have card fully swipeable and dismissable from the list)

// TODO: Code walkthrough briefly explaning PanResponder API and how it can be used to create gesture based animations along with Animated.ValueXY()

Thank You

@NashVail