import React from "react"; import { Image, View, Pressable, Dimensions, StyleSheet, Text, } from "react-native"; import Svg, { G, Path } from "react-native-svg"; import { connect } from "react-redux"; //components import Modal from "../components/Modal"; //assets import avatarPng from "../assets/icons/avatar.png"; //style import tw from "tailwind-rn"; import Colors from "../constants/Colors"; import fontSize from "../constants/fontSize"; const { height, width } = Dimensions.get("window"); function Avatar({ source, size, theme, action }) { const [openModal, setOpenModal] = React.useState(false); return ( setOpenModal(true)} style={[ tw("rounded-full overflow-hidden flex justify-center items-center"), { width: size, height: size, backgroundColor: theme === "light" ? Colors.theme1.grayE3 : Colors.theme1.white + "55", }, ]} > {source ? ( ) : ( )} setOpenModal(!openModal)} > action()} style={{ position: "absolute", top: 16, left: 16, color: "white", fontFamily: "Medium", fontSize: fontSize.tiny, }} > ویرایش e.stopPropagation()} style={{ width, height: width, backgroundColor: "white" }} > ); } const styles = StyleSheet.create({ centeredView: { flex: 1, justifyContent: "center", alignItems: "center", marginTop: 22, }, modalView: { margin: 20, backgroundColor: "white", borderRadius: 20, padding: 35, alignItems: "center", shadowColor: "#000", shadowOffset: { width: 0, height: 2, }, shadowOpacity: 0.25, shadowRadius: 4, elevation: 5, }, button: { borderRadius: 20, padding: 10, elevation: 2, }, buttonOpen: { backgroundColor: "#F194FF", }, buttonClose: { backgroundColor: "#2196F3", }, textStyle: { color: "white", fontWeight: "bold", textAlign: "center", }, modalText: { marginBottom: 15, textAlign: "center", }, }); const mapStateToProps = (state) => ({ theme: state.publicApi.theme, }); export default connect(mapStateToProps)(Avatar);