Untitled

import {
  View,
  StyleSheet,
  Image,
  TouchableOpacity,
  ScrollView,
  Text,
  Alert,
  Button,
  Modal,
} from "react-native";
// import { Button } from "../components/ButtonComponent";
import { Input } from "../components/InputComponent";
import { styles } from "../styles/style";
import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { loginUser } from "../store/actions/profileAction";
const ProfileSreenJS = ({ navigation }) => {
  const globalState = useSelector((store) => store.profileReducer);
  const [isModalVisible, setIsModalVisible] = useState(false);

  const dispatch = useDispatch();
  return (
    <View>
      <ScrollView contentContainerStyle={styles.Pscroll}>
        <View style={styles.PmainContainer}>
          <View style={styles.PimageContainer}>
            <Image
              style={styles.Pimage}
              source={require("../assets/images/avatar.png")}
            />
          </View>
          <View style={styles.PinputContainer}>
            <Input
              title="Username"
              editable={false}
              value={globalState.username}
            />
            <Input title="Email" editable={false} value={globalState.email} />
            <Input
              title="Password"
              editable={false}
              value={globalState.password}
            />
            <Button
              title="Log Out"
              onPress={() => {
                setIsModalVisible(true);
              }}
            />
            <Modal
              animationType="slide"
              transparent={true}
              visible={isModalVisible}
              onRequestClose={() => {
                setIsModalVisible(!isModalVisible);
              }}
            >
              <View style={styles.backgroundView}>
                <View style={styles.modalView}>
                  <Text style={styles.modalText}>
                    Are you sure want to logout?
                  </Text>
                  <View style={styles.modalButton}>
                    <Button
                      title="yes"
                      onPress={() => {
                        setIsModalVisible(false);
                        dispatch(loginUser(false));
                      }}
                    />
                    <Button
                      title="no"
                      onPress={() => {
                        setIsModalVisible(false);
                      }}
                    />
                  </View>
                </View>
              </View>
            </Modal>
          </View>
        </View>
      </ScrollView>
    </View>
  );
};
export default ProfileSreenJS;