Alert: Top Banner with Dismiss Button

import React from 'react';
import {
  StyleSheet,
  View,
  SafeAreaView,
  Text,
  TouchableOpacity,
} from 'react-native';
import FeatherIcon from 'react-native-vector-icons/Feather';

export default function Example() {
  return (
    <SafeAreaView>
      <View style={styles.container}>
        <View style={styles.alert}>
          <View
            style={[
              styles.alertIcon,
              { backgroundColor: '#14b073', borderColor: '#14b073' },
            ]}>
            <FeatherIcon
              color="#fff"
              name="credit-card"
              size={30} />
          </View>

          <View style={styles.alertBody}>
            <Text style={styles.alertTitle}>Credit card updated!</Text>

            <Text style={styles.alertMessage}>
              Lorem nisi enim laboris quis elit. nisi enim laboris quis elit.
            </Text>
          </View>

          <TouchableOpacity
            onPress={() => {
              // handle onPress
            }}>
            <View style={styles.alertClose}>
              <FeatherIcon color="#9a9a9a" name="x" size={24} />
            </View>
          </TouchableOpacity>
        </View>
        <View style={styles.alert}>
          <View
            style={[
              styles.alertIcon,
              { backgroundColor: '#fa5855', borderColor: '#fa5855' },
            ]}>
            <FeatherIcon color="#fff" name="shield" size={30} />
          </View>

          <View style={styles.alertBody}>
            <Text style={styles.alertTitle}>Your account is secured!</Text>

            <Text style={styles.alertMessage}>
              Lorem nisi enim laboris quis elit. nisi enim laboris quis elit.
            </Text>
          </View>

          <TouchableOpacity
            onPress={() => {
              // handle onPress
            }}>
            <View style={styles.alertClose}>
              <FeatherIcon color="#9a9a9a" name="x" size={24} />
            </View>
          </TouchableOpacity>
        </View>
        <View style={styles.alert}>
          <View
            style={[
              styles.alertIcon,
              { backgroundColor: '#7b829b', borderColor: '#7b829b' },
            ]}>
            <FeatherIcon color="#fff" name="video" size={30} />
          </View>

          <View style={styles.alertBody}>
            <Text style={styles.alertTitle}>Smile! You are on camera</Text>

            <Text style={styles.alertMessage}>
              Lorem nisi enim laboris quis elit. nisi enim laboris quis elit.
            </Text>
          </View>

          <TouchableOpacity
            onPress={() => {
              // handle onPress
            }}>
            <View style={styles.alertClose}>
              <FeatherIcon color="#9a9a9a" name="x" size={24} />
            </View>
          </TouchableOpacity>
        </View>
        <View style={styles.alert}>
          <View
            style={[
              styles.alertIcon,
              { backgroundColor: '#314de7', borderColor: '#314de7' },
            ]}>
            <FeatherIcon
              color="#fff"
              name="message-square"
              size={30} />
          </View>

          <View style={styles.alertBody}>
            <Text style={styles.alertTitle}>57 new messages</Text>

            <Text style={styles.alertMessage}>
              Lorem nisi enim laboris quis elit. nisi enim laboris quis elit.
            </Text>
          </View>

          <TouchableOpacity
            onPress={() => {
              // handle onPress
            }}>
            <View style={styles.alertClose}>
              <FeatherIcon color="#9a9a9a" name="x" size={24} />
            </View>
          </TouchableOpacity>
        </View>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 24,
  },
  /** Alert */
  alert: {
    position: 'relative',
    flexDirection: 'row',
    marginBottom: 24,
  },
  alertIcon: {
    padding: 16,
    borderWidth: 1,
    borderTopLeftRadius: 8,
    borderBottomLeftRadius: 8,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  alertBody: {
    flexGrow: 1,
    flexShrink: 1,
    flexBasis: 0,
    padding: 16,
    borderWidth: 1,
    borderColor: '#ccc',
    borderLeftWidth: 0,
    borderTopRightRadius: 8,
    borderBottomRightRadius: 8,
  },
  alertTitle: {
    fontSize: 17,
    fontWeight: '600',
    color: '#1e1e1e',
    marginBottom: 4,
  },
  alertMessage: {
    fontSize: 14,
    fontWeight: '500',
    color: '#9c9c9c',
  },
  alertClose: {
    position: 'absolute',
    top: 0,
    right: 0,
    padding: 6,
    alignItems: 'center',
    justifyContent: 'center',
  },
});