Welcome to the solution:

https://i.sstatic.net/IhSmO.gif

To achieve the desired effect, use the code provided below. Please note that the zIndex property may not function correctly on RNPlay due to version compatibility.

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  StatusBar,
  View,
  TouchableHighlight,
  Animated
} from 'react-native';

class playground extends Component {
  constructor(props) {
     super(props);
     this.state = {
       slideAnimation: new Animated.Value(22),
     };
   }

  _showNotification() {
    StatusBar.setHidden(true, 'slide');

    Animated.timing(
      this.state.slideAnimation,
      {toValue: 0, duration: 300}
    ).start();
  }

  _hideNotification() {
    StatusBar.setHidden(false, 'slide');

    Animated.timing(
      this.state.slideAnimation,
      {toValue: 22, duration: 300}
    ).start();
  }

  render() {
    return (
      <View style={styles.container}>
        <StatusBar
           barStyle="default"
         />
        <Animated.View style={[styles.notification, {top: this.state.slideAnimation}]}>
          <Text style={styles.notificationText}>This is a notification</Text>
        </Animated.View>
        <View style={styles.body}>
          <TouchableHighlight underlayColor="#D1EEFC" style={styles.button} onPress={()=> { this._showNotification() }}>
            <Text style={styles.buttonText}>
              Show Notification
            </Text>
          </TouchableHighlight>

          <TouchableHighlight underlayColor="#D1EEFC" style={styles.button} onPress={()=> { this._hideNotification() }}>
            <Text style={styles.buttonText}>
              Hide Notification
            </Text>
          </TouchableHighlight>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  body: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF', //Important for hiding the notification behind it
    marginTop: 22, //Creates a gap in the top for the notification to slide in
  },
  button: {
    padding: 10,
    borderColor: '#D1EEFC',
    borderWidth: 2,
    borderRadius: 5,
    marginBottom: 22,
  },
  buttonText: {
    fontSize: 17,
    textAlign: 'center',
    color: '#007AFF'
  },
  notification: {
    backgroundColor: 'black',
    position: 'absolute',
    top: 22,
    left: 0,
    right: 0,
    height: 22,
    zIndex: 0, //Places the notification behind the container
  },
  notificationText: {
    color: 'yellow',
    textAlign: 'center',
    fontSize: 11,
    marginTop: 4
  },
});

AppRegistry.registerComponent('playground', () => playground);

UPDATE

By containing the notification within a view with overflow: 'hidden', the masking concept now works effectively. The container has been set to a height of 22 enabling the notification to appear as if sliding into the background even with minimal movement.

See the outcome here:

https://i.sstatic.net/ouIUI.gif

Check out the revised code:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  StatusBar,
  View,
  TouchableHighlight,
  Animated,
  Image
} from 'react-native';

class playground extends Component {
  constructor(props) {
     super(props);
     this.state = {
       slideAnimation: new Animated.Value(22),
     };
   }

  _showNotification() {
    StatusBar.setHidden(true, 'slide');

    Animated.timing(
      this.state.slideAnimation,
      {toValue: 0, duration: 300}
    ).start();
  }

  _hideNotification() {
    StatusBar.setHidden(false, 'slide');

    Animated.timing(
      this.state.slideAnimation,
      {toValue: 22, duration: 300}
    ).start();
  }

  render() {
    return (
      <View style={styles.container}>
        <Image source={require('./img/splash.png')} style={styles.backgroundImage} resizeMode='cover' />
        <StatusBar
           barStyle="default"
         />
        <View style={styles.notificationContainer}>
          <Animated.View style={[styles.notification, {top: this.state.slideAnimation}]}>
            <Text style={styles.notificationText}>This is a notification</Text>
          </Animated.View>
        </View>
        <TouchableHighlight underlayColor="#D1EEFC" style={styles.button} onPress={()=> { this._showNotification() }}>
          <Text style={styles.buttonText}>
            Show Notification
          </Text>
        </TouchableHighlight>

        <TouchableHighlight underlayColor="#D1EEFC" style={styles.button} onPress={()=> { this._hideNotification() }}>
          <Text style={styles.buttonText}>
            Hide Notification
          </Text>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
    justifyContent: 'center',
    alignItems: 'center',
  },
  backgroundImage: {
    position: 'absolute',
    top: 0,
  },
  button: {
    padding: 10,
    borderRadius: 5,
    marginBottom: 22,
    backgroundColor: '#FFFFFF88',
  },
  buttonText: {
    fontSize: 17,
    textAlign: 'center',
    color: '#000000'
  },
  notificationContainer: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    height: 22,
    overflow: 'hidden' //Enables masking effect
  },
  notification: {
    backgroundColor: '#00000088',
    position: 'absolute',
    top: 22,
    left: 0,
    right: 0,
    height: 22,
  },
  notificationText: {
    color: 'yellow',
    textAlign: 'center',
    fontSize: 11,
    marginTop: 4
  },
});

AppRegistry.registerComponent('playground', () => playground);