NotificationExample.jsx

import { Animated, Easing } from 'react-native'

class Notification extends Component {
  constructor(props) {
    super(props)

    this.state = { offset: new Animated.Value(-100) } // We initially set an Animated.Value with -100
  }

  componentDidMount() {                     // When the component is mounted the animation runs.
    Animated.sequence([                     // We use the Animated.sequence function to compose animations.
      Animated.spring(this.state.offset, {  // Animated.spring animates the component by updating the this.state.offset value
        tension: -5,                        // starting by -100 up to 0 set to toValue. 
        toValue: 0
      }),
      Animated.timing(this.state.offset, {  // After Animated.spring have run, Animated.timing starts its animation
        duration: 1000,                     // in a duration of 1000 miliseconds. At this moment this.state.offset has
        toValue: -100,                      // the Animated.Value as 0 and will apply the animation decreasing this value
        easing: Easing.easeInOut            // down to -100
      })
    ]).start()
  }

  render() {
    const { message, avatar } = this.props
    
    // Now here we have to change the View to Animated.View to our animations work.
    return (
      <Animated.View style={{ transform: [{ translateY: this.state.offset }] }}>
        <Image source={this.props.avatar} />
        <Text>Nova Mensagem</Text>
        <Text>{this.props.message}</Text>
      </Animated.View>
    )
  }
}