example4.jsx

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

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

    this.state = { offset: new Animated.Value(props.offset) } // agora recebemos o offset inicial calculado
  }                                                           // do componente pai

  componentDidMount() {                     
    Animated.sequence([
      Animated.delay(this.props.delay), // acrescentamos aqui um delay
      Animated.spring(this.state.offset, {  
        tension: -5,                        
        toValue: 0
      }),
      Animated.timing(this.state.offset, {  
        duration: 1000,                     
        toValue: -100,                      
        easing: Easing.easeInOut            
      })
    ]).start(() => this.props.removeNotification(this.props.id)) // na função start passamos um callback que será
  }                                                              // chamado ao completar a sequência de animações
                                                                 // para remover a notificação que já foi mostrada
  // ...
}

class TopBarNotification extends Component {
  render() {
    return this.props.notifications.map((notification, index) => {
      return (
        <Notification
          key={notification.id}
          offset={-(100 * (index + 1))} // agora cada notificação tem um offset calculado
          delay={index === 0 ? 100 : (index + 1) * 2000} // e um delay diferente também, pra que se apresente sucessivamente
          removeNotification={id => this.props.removeNotification(id)} // após terminar a animação removemos a notificação
          {...notification}
         />
      )
    })
  }
}

class App extends Component {
  state = { notifications: [] }

  removeNotification(id) {
    this.setState((state) => {
      return {
        notifications: state.notifications.filter(notification => notification.id !== id)
      }
    })
  }

  render () {
    <View>
      <TopBarNotification
        {...this.state}
        removeNotification={id => this.removeNotification(id)}
      />
      
      <Button
        onPress={() => this.setState({ notifications: newNotifications })}
        title="Receive Notifications"
      />
    </View>
  }
}