Implementation with hooks

makeNotification.js

import React from "react";
import PropTypes from "prop-types";
import { StyleSheet, TouchableOpacity, Text, Animated } from "react-native";
import { FontAwesome } from "@expo/vector-icons";

const ICON_SQUARE_SIZE_PX = 100;
const ANIMATION_DURATION_MS = 150;
const NOTIFICATION_HEIGHT_PX = 120;

export const makeNotification = (iconName, colorPrimary, colorAccent) => {
  // now it is a functional component
  function NotificationBase(props) {
    const { title, message, onClosePress } = props;
    const [animated] = React.useState(new Animated.Value(0));

    // useEffect is a hook
    React.useEffect(() => {
      Animated.timing(animated, {
        toValue: 1,
        duration: ANIMATION_DURATION_MS
      }).start();
    }, []); // the empty array is to tell React that effect doesn't depend on props or state

    return (
      <TouchableOpacity
        onPress={() => {
          if (onClosePress) {
            Animated.timing(animated, {
              toValue: 0,
              duration: ANIMATION_DURATION_MS
            }).start(onClosePress);
          }
        }}
      >
        <Animated.View
          style={[
            {
              opacity: animated,
              height: animated.interpolate({
                inputRange: [0, 1],
                outputRange: [0, NOTIFICATION_HEIGHT_PX],
                extrapolate: "clamp"
              }),
              transform: [
                {
                  translateX: animated.interpolate({
                    inputRange: [0, 1],
                    outputRange: [30, 0],
                    extrapolate: "clamp"
                  })
                }
              ]
            },
            styles.mainContainer,
            { backgroundColor: colorPrimary }
          ]}
        >
          <FontAwesome
            style={styles.icon}
            name={iconName}
            size={ICON_SQUARE_SIZE_PX}
            color={colorAccent}
          />
          <Text style={[styles.title, { color: colorAccent }]}>{title}</Text>
          <Text style={[styles.message, { color: colorAccent }]}>
            {message}
          </Text>
        </Animated.View>
      </TouchableOpacity>
    );
  }

  NotificationBase.propTypes = {
    title: PropTypes.string.isRequired,
    message: PropTypes.string.isRequired,
    onClosePress: PropTypes.func
  };

  return NotificationBase;
};