text: import React, { Component } from "react";
  import { StyleSheet, View, FlatList, Text, Image } from "react-native";
  import { ListItem, Icon } from "react-native-elements";
  import firebase from "firebase";
  import MyHeader from "../components/MyHeader";
  import SwipeableFlatlist from "../components/SwipeableFlatlist";
  import db from "../config";
  
  export default class NotificationScreen extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        userId: firebase.auth().currentUser.email,
        allNotifications: []
      };
  
      this.notificationRef = null;
    }
  
    getNotifications = () => {
      this.notificationRef = db
        .collection("all_notifications")
        .where("notification_status", "==", "unread")
        .where("targeted_user_id", "==", this.state.userId)
        .onSnapshot(snapshot => {
          var allNotifications = [];
          snapshot.docs.map(doc => {
            var notification = doc.data();
            notification["doc_id"] = doc.id;
            allNotifications.push(notification);
          });
          this.setState({
            allNotifications: allNotifications
          });
        });
    };
  
    componentDidMount() {
      this.getNotifications();
    }
  
    componentWillUnmount() {
      this.notificationRef();
    }
  
    keyExtractor = (item, index) => index.toString();
  
    renderItem = ({ item, index }) => {
      return (
        <ListItem
          key={index}
          leftElement={<Icon name="book" type="font-awesome" color="#696969" />}
          title={item.book_name}
          titleStyle={styles.LiTitle}
          subtitle={item.message}
          bottomDivider
        />
      );
    };
  
    render() {
      return (
        <View style={styles.container}>
          <View style={{ flex: 0.13 }}>
            <MyHeader
              title={"Notifications"}
              navigation={this.props.navigation}
            />
          </View>
          <View style={{ flex: 0.8 }}>
            {this.state.allNotifications.length === 0 ? (
              <View style={styles.imageView}>
                <Image source={require("../assets/Notification.png")} />
                <Text style={{ fontSize: 25 }}>You have no notifications</Text>
              </View>
            ) : (
              <SwipeableFlatlist allNotifications={this.state.allNotifications} />
            )}
          </View>
        </View>
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: "#deeeed"
    },
    imageView: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center"
    },
    LiTitle: {
      color: "black",
      fontWeight: "bold"
    }
  });
  