Notification.jsx

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

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

    this.state = { offset: new Animated.Value(-100) } // iniciamos aqui um Animated.Value com valor -100
  }

  componentDidMount() {                     // Quando o componete estiver montado executamos a animação.
    Animated.sequence([                     // Utilizamos a função Animated.sequence para compormos animações.
      Animated.spring(this.state.offset, {  // Animated.spring anima o componente atualizando o valor de this.state.offset
        tension: -5,                        // iniciando no -100 até 0 definido na prop toValue
        toValue: 0
      }),
      Animated.timing(this.state.offset, {  // Após executado Animated.spring, Animated.timing é executado
        duration: 1000,                     // numa duração de 1000 milisegundos. Neste momento o this.state.offset tem
        toValue: -100,                      // o Animated.Value como 0 e irá aplicar a animação decrescendo este valor até
        easing: Easing.easeInOut            // -100
      })
    ]).start()
  }

  render() {
    const { message, avatar } = this.props
    
    // Aqui agora mudamos de View para Animated.View para que nossa View seja animada.
    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>
    )
  }
}