Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
38 kB
1
Indexable
Never
// Customizable Area Start

import React from 'react';
// Customizable Area Start
import {
  StyleSheet,
  FlatList,
  Text,
  TouchableOpacity,
  View,
  Platform,
  ActivityIndicator,
  Modal,
  Switch,
  TextInput,
  Image,
} from 'react-native';
import SenderInfoScreenController, {
  Props,
} from './SenderInfoScreenController';
// import { NavigationEvents } from "@react-navigation/compat";
import Miniplayer from '../../../categoriessubcategories/src/MainFeed/Miniplayer';
import { Avatar, Divider, Header, Icon, Input } from 'react-native-elements';
import CustomBottomBar from '../../../../components/src/CustomBottomBar';
import {
  GiftedChat,
  Bubble,
  Send,
  InputToolbar,
  InputToolbarProps,
} from 'react-native-gifted-chat';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Ionicons from 'react-native-vector-icons/Ionicons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
// import CustomHeader from "../../../components/src/CustomHeader";
import FastImage from 'react-native-fast-image';
import {
  chatAttachment,
  imageupload,
  imgBlog,
  imgClose,
  imgProduct,
  imgVideo,
  messageSendArrow,
} from '../../../HamburgerMenu/src/assets';
import { primaryColor } from 'framework/src/Utilities';
import AppHeader from '../../../../components/src/AppHeader';
import {
  whiteminipause,
  whiteminiplayerforward,
  playbutton,
  forwordIcon,
} from '../../../categoriessubcategories/src/assets';
import Scale from 'framework/src/Scale';
import {
  Menu,
  MenuOptions,
  MenuOption,
  MenuTrigger,
} from 'react-native-popup-menu';
import { FONTS } from 'framework/src/AppFonts';
import Apptheme from '../../../HamburgerMenu/src/Apptheme';
import {
  menuicon,
  heartIcon,
  searchwhiteicon,
  closeChevron,
  redvibefull,
  fullvibeWhite,
} from '../../../HamburgerMenu/src/assets';
import {
  backgrounImg,
  horizontalthreedots,
} from '../../../CustomerProfile/src/assets';
import { shareWhiteIcon } from '../../../categoriessubcategories/src/assets';
import { calendarFormat, relativeTimeRounding } from 'moment';
const htmlReg = /<\/?[a-z][\s\S]*>/i;

// Customizable Area End

export default class SenderInfoScreen extends SenderInfoScreenController {
  constructor(props: Props) {
    super(props);
    // Customizable Area Start
    // Customizable Area End
  }
  // Customizable Area End
  headerComponent = (props: any) => {
    return (
      <Header
        containerStyle={{
          backgroundColor: 'red',
        }}
        leftComponent={
          <TouchableOpacity onPress={() => this.props.navigation.goBack()}>
            <FastImage style={styles.image_backImage} source={closeChevron} />
          </TouchableOpacity>
        }
        centerComponent={
          <View>
            <Text style={[styles.headertext]}>Message Info </Text>
          </View>
        }
      />
    );
  };
  // Customizable Area Start

  render() {
    return (
      //Merge Engine DefaultContainer
      <View
        style={{
          backgroundColor: Apptheme.getbottomfeedbackgroundcolor(),
          flex: 1,
        }}
      >
        <Header
          containerStyle={{
            backgroundColor: Apptheme.getbottomfeedbackgroundcolor(),
            borderBottomColor: 'transparent',
          }}
          leftComponent={
            <TouchableOpacity onPress={() => this.props.navigation.goBack()}>
              <FastImage style={styles.image_backImage} source={closeChevron} />
            </TouchableOpacity>
          }
          centerComponent={
            <View style={styles.userviewmsg}>
              <Text style={[styles.headertext]}>Message Info </Text>
            </View>
          }
        />

        <View style={styles.userview}>
          <FastImage
            style={styles.personImg}
            source={{ uri: this.state.profileImage }}
          />
          <View style={{ flexDirection: 'row' }}>
            <>
              {this.state.profileName !== '' ? (
                <Text style={styles.headertext}>{this.state.profileName}</Text>
              ) : (
                <Text style={styles.headertext}>No Name</Text>
              )}
              <Text
                style={{
                  color: '#707082',
                  fontFamily: FONTS.AppleSymbols,
                  alignSelf: 'flex-end',
                  fontSize: Scale(18),
                }}
              >
                {''} @yellobutton
              </Text>
            </>
          </View>
        </View>
        <View style={styles.notificationView}>
          <Text style={[styles.notificationTxt]}>Notifications</Text>
          <Switch
            trackColor={{ false: 'rgb(42,42,49)', true: primaryColor }}
            thumbColor={this.state.isNotification ? '#FFF' : '#FFF'}
            style={{ transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }] }}
            value={this.state.isNotification}
            onValueChange={() => {
              this.setState({ isNotification: !this.state.isNotification });
              alert(`Notification is set ${!this.state.isNotification}`);
            }}
          />
        </View>

        <Text style={styles.declaration}>
          Receive a notification each time you have a new message from{' '}
          {this.state.headerName ? this.state.headerName : 'No Name'}.
        </Text>

        <View style={styles.block_report_view}>
          <View style={styles.horizontal}>
            <View>
              <Text style={styles.headertextblock}>Block @theyellobutton</Text>
              <Text style={styles.headertext}>Report @theyellobutton</Text>
            </View>
            <View>
              <TouchableOpacity onPress={() => this.setState({ block: true })}>
                <Icon
                  name={'arrowright'}
                  type="antdesign"
                  color={'#FFF'}
                  size={35}
                  containerStyle={[styles.forward, { marginTop: 8 }]}
                />
              </TouchableOpacity>
              <View />
              <TouchableOpacity
                onPress={() => {
                  this.getReportListApi(), this.setState({ report: true });
                }}
              >
                <Icon
                  name={'arrowright'}
                  type="antdesign"
                  color={'#FFF'}
                  size={35}
                  containerStyle={[styles.forward, { marginTop: 10 }]}
                />
              </TouchableOpacity>
            </View>
          </View>
        </View>
        <View style={styles.center}>
          <TouchableOpacity
            style={styles.deleteConversation}
            onPress={() => {
              this.setState({ delete: true });
            }}
          >
            <Text style={styles.deleteTxt}>Delete Conversation</Text>
          </TouchableOpacity>
        </View>
                 <Miniplayer
         songId={this.context?.playSongData?.songId}
         playerIcon={this.state.platform === 'apple' ? Apptheme.getapplemusic() : Apptheme.getspotifyhomeicon()}
         SongImage={this.context?.playSongData?.songImageUrl}
         songName={this.context?.playSongData?.songName}
         artistName={this.context?.playSongData?.artistName}
         playerimg={this.context?.playSongData?.playerimage}
         heart={this.state.platform}
         pausePlay={whiteminiplayerforward}
         next={this.context.isplay ? playbutton : whiteminipause}
         sliderValue={this.state.sliderValue}
         onpressPlayPause={this.playPauseSong}
         type={this.context?.playSongData?.type}
         RadioName={this.context?.playSongData?.RadioName}
       />
        <CustomBottomBar
            showCreatepost={false}
            selectedTab={'Feed'}
            onCreatePost={(value) => {
              this.setState({ showCreatepost: value });
            }}
            navigation={this.props.navigation}
            onRefresh={() =>
              this.props.navigation.navigate('FeedBlock', { index: 1 })
            }
          />

      </View>

      //       <>
      //         <View style={[styles.container, { backgroundColor: Apptheme.getbottomfeedbackgroundcolor() }]}>
      //           <View style={[styles.chatBox, { backgroundColor: Apptheme.getbottomfeedbackgroundcolor() }]}>
      //             <Header
      //     containerStyle={{
      //       backgroundColor: Apptheme.getbottomfeedbackgroundcolor(),
      //       borderBottomColor: 'transparent',
      //     }}
      //     leftComponent={
      //       <TouchableOpacity onPress={() => this.props.navigation.goBack()}>
      //         <FastImage style={styles.image_backImage} source={closeChevron} />
      //       </TouchableOpacity>
      //     }
      //     centerComponent={
      //       <View style={styles.userviewmsg}>
      //         <Text style={[styles.headertext]}>Message Info </Text>
      //       </View>
      //     }
      //   />

      //             <View style={styles.userview}>
      //               <FastImage
      //                 style={styles.personImg}
      //                 source={{ uri: this.state.profileImage }}
      //               />
      //               <View style={{flexDirection:'row', }} >
      //                 <>
      //                    {
      //                 this.state.profileName !== '' ?
      //                   <Text style={styles.headertext}>{this.state.profileName}</Text>
      //                   :
      //                   <Text style={styles.headertext}>No Name</Text>
      //               }
      //               <Text style={{
      //                 color:'#707082',
      //                 fontFamily:FONTS.AppleSymbols,
      //                 alignSelf:"flex-end",
      //                 fontSize:Scale(18)

      //               }} >{""} @yellobutton</Text>
      //                 </>

      //               </View>

      //             </View>
      //             <View style={styles.notificationView}>
      //               <Text style={[styles.notificationTxt]}>Notifications</Text>
      //               <Switch

      //                 trackColor={{ false: "rgb(42,42,49)", true: primaryColor }}
      //                 thumbColor={this.state.isNotification ? "#FFF" : "#FFF"}
      //                 style={{ transform: [{ scaleX: .8 }, { scaleY: .8 }] }}
      //                 value={this.state.isNotification} onValueChange={() => {
      //                   this.setState({ isNotification: !this.state.isNotification })
      //                   alert(`Notification is set ${!this.state.isNotification}`)
      //                 }}

      //                 />
      //             </View>
      //             {/* <Text style={styles.declaration}>Receive a notification each time you have a new</Text>
      //             <Text style={styles.declaration}>message from {this.state.headerName ? this.state.headerName : "No Name"}.</Text> */}
      //              <Text style={styles.declaration}>Receive a notification each time you have a new message from {this.state.headerName ? this.state.headerName : "No Name"}.
      //             </Text>
      //             <View style={styles.block_report_view}>
      //               <View style={styles.horizontal}>
      //                 <View>
      //                   <Text style={styles.headertextblock}>Block @theyellobutton</Text>
      //                   <Text style={styles.headertext}>Report @theyellobutton</Text>
      //                 </View>
      //                 <View>
      //                   <TouchableOpacity
      //                     onPress={() => this.setState({ block: true })}
      //                   >
      //                     <Icon
      //                       name={"arrowright"}
      //                       type="antdesign"
      //                       color={'#FFF'}
      //                       size={35}
      //                       containerStyle={[styles.forward, { marginTop: 8 }]}
      //                     />
      //                   </TouchableOpacity>
      //                   <View>
      //                   </View>
      //                   <TouchableOpacity
      //                     onPress={() => { this.getReportListApi(), this.setState({ report: true }) }}
      //                   >
      //                     {/* <FastImage style={styles.forward}
      //            source={forwordIcon} /> */}
      //                     <Icon
      //                       name={"arrowright"}
      //                       type="antdesign"
      //                       color={'#FFF'}
      //                       size={35}
      //                       containerStyle={[styles.forward, { marginTop: 10 }]}
      //                     />
      //                   </TouchableOpacity>
      //                 </View>
      //               </View>
      //             </View>
      //           </View>
      //           <View style={styles.center}>
      //             <TouchableOpacity style={styles.deleteConversation}
      //               onPress={() => { this.setState({ delete: true }) }}>
      //               <Text style={styles.deleteTxt}>Delete Conversation</Text>
      //             </TouchableOpacity>
      //           </View>
      //           <Miniplayer
      //             songId={this.context?.playSongData?.songId}
      //             playerIcon={Apptheme.getspotifyhomeicon()}
      //             SongImage={this.context?.playSongData?.songImageUrl}
      //             songName={this.context?.playSongData?.songName}
      //             artistName={this.context?.playSongData?.artistName}
      //             playerimg={this.context?.playSongData?.playerimage}
      //             heart={heartIcon}
      //             pausePlay={whiteminiplayerforward}
      //             next={this.context.isplay ? playbutton : whiteminipause}
      //             sliderValue={this.state.sliderValue}
      //             onpressPlayPause={this.playPauseSong}
      //             type={this.context?.playSongData?.type}
      //             RadioName={this.context?.playSongData?.RadioName}
      //           />

      // <CustomBottomBar showCreatepost={this.state.showCreatepost}

      //             selectedTab = {'Chats'}
      //               onCreatePost={(value) => {
      //                 this.setState({ showCreatepost: value })
      //               }} navigation={this.props.navigation} onRefresh={() => this.props.navigation.navigate('FeedBlock', { index: 1 })}
      //                />
      //           {/* <NavigationEvents

      //     </View>

      // </View>

      //         </View>
      //         <View style = {styles.center}>
      //         <TouchableOpacity style = {styles.deleteConversation}
      //         onPress = {() => {this.setState({delete: true})}}>
      //             <Text style = {styles.deleteTxt}>Delete Conversation</Text>
      //         </TouchableOpacity>

      //         </View>

      //         <Miniplayer
      //   songId={this.context?.playSongData?.songId}
      //   playerIcon={this.state.platform === 'apple' ? Apptheme.getapplemusic() : Apptheme.getspotifyhomeicon()}
      //   SongImage={this.context?.playSongData?.songImageUrl}
      //   songName={this.context?.playSongData?.songName}
      //   artistName={this.context?.playSongData?.artistName}
      //   playerimg={this.context?.playSongData?.playerimage}
      //   heart={this.state.platform}
      //   pausePlay={whiteminiplayerforward}
      //   next={this.context.isplay ? playbutton : whiteminipause}
      //   sliderValue={this.state.sliderValue}
      //   onpressPlayPause={this.playPauseSong}
      //   type={this.context?.playSongData?.type}
      //   RadioName={this.context?.playSongData?.RadioName}
      // />

      //          <CustomBottomBar showCreatepost={this.state.showCreatepost}
      //           onCreatePost={(value) => {
      //             this.setState({ showCreatepost: value })
      //           }} navigation={this.props.navigation} onRefresh={() => this.onRefresh()} />
      //         {/* <NavigationEvents
      //           onWillFocus={() => { this.onFocusEventFun() }}
      //           onWillBlur={() => { this.onBlurEventFun() }}
      //         /> */}

      //         </View>
      //         <Modal
      //           animationType={'none'}
      //           transparent={true}
      //           visible={this.state.block}
      //           onRequestClose={() => this.setState({ block: false })}
      //           onDismiss={() => this.setState({ block: false })}
      //         >
      //           <View style={styles.modalContentContainer}>
      //             <View style={styles.main_view}>
      //               <View>
      //                 {
      //                   this.state.block_confirmed ?
      //                     <Image
      //                       source={redvibefull}
      //                       resizeMode="contain"
      //                       style={{
      //                         height: Scale(80),
      //                         width: Scale(80),
      //                         alignSelf: 'center',
      //                         tintColor: 'black'
      //                       }}
      //                     />
      //                     :
      //                     null
      //                 }
      //                 {this.state.block_confirmed ?
      //                   <Text style={styles.BlockTxt}>@theyellobutton has been BLOCKED</Text> :
      //                   <Text style={styles.BlockTxt}>Block @theyellobutton?</Text>
      //                 }

      //                 {this.state.block_confirmed ?
      //                   <Text style={styles.blockdisclaimer}>You will not see content from this user. If you would like to unblock them click the "Unblock" button in their profile.</Text>
      //                   :
      //                   <Text style={styles.blockdisclaimer}>@Yellobutton will no longer be able to follow or message you, and you will not see notifications from @yellobutton</Text>
      //                 }
      //               </View>
      //               {this.state.block_confirmed ?
      //                 <View style={styles.done_button}>
      //                   <TouchableOpacity style={[styles.button_view, { backgroundColor: primaryColor }]}
      //                     onPress={() => this.setState({ block: false })}>
      //                     <Text style={styles.button}>Done</Text>
      //                   </TouchableOpacity>
      //                 </View>
      //                 :
      //                 <>
      //                   <View style={styles.buttonView}>
      //                     <TouchableOpacity
      //                       style={[styles.button_view, { backgroundColor: '#000' }]}
      //                       onPress={() => this.setState({ block: false })}>
      //                       <Text style={styles.button}>Cancel</Text>
      //                     </TouchableOpacity>
      //                     <TouchableOpacity style={[styles.button_view, { backgroundColor: primaryColor }]}
      //                       onPress={() => this.setState({ block_confirmed: true })}>
      //                       <Text style={styles.button}>Block</Text>
      //                     </TouchableOpacity>
      //                   </View>
      //                 </>
      //               }
      //             </View>
      //           </View>
      //         </Modal>
      //         <Modal
      //           animationType={'none'}
      //           transparent={true}
      //           visible={this.state.report}
      //           onRequestClose={() => this.setState({ report: false })}
      //           onDismiss={() => this.setState({ report: false })}
      //         >
      //           <View style={styles.modalContentContainer}>
      //             <View style={styles.main_view}>
      //               <View>
      //                 {
      //                   this.state.report_reason ?
      //                     <Image source={redvibefull}
      //                       resizeMode="contain"
      //                       style={{
      //                         height: Scale(80),
      //                         width: Scale(80),
      //                         alignSelf: 'center',
      //                         tintColor: 'black'
      //                       }}
      //                     />
      //                     :
      //                     null
      //                 }
      //                 {this.state.report_reason ?
      //                   <Text style={[{ fontSize: Scale(18) }, styles.BlockTxt]}>We appreciate your help</Text>
      //                   :
      //                   <Text style={styles.BlockTxt}>Why are you filling this report?</Text>
      //                 }
      //                 {this.state.report_reason ?
      //                   <Text style={styles.blockdisclaimer}>This information help us improve the experience for everyone</Text>
      //                   :
      //                   <Text style={styles.reportdisclaimer}>
      //                     {`All report are made ananymous. If someone is in \nimmediate danger, contact the local emergency Services.\n Our community is everythingg to us, we want Vibe to be a safe space for everyone`}</Text>
      //                 }
      //               </View>
      //               {this.state.report_reason ?
      //                 null :
      //                 <FlatList
      //                   data={this.state.getReportList}
      //                   renderItem={({ item, index }) => {
      //                     return (
      //                       <>
      //                         <View style={styles.report_reason_view}>
      //                           {/* {console.log("data", item.attributes)} */}
      //                           <Text style={styles.reason_txt}>{item.attributes.name}</Text>
      //                           <Icon
      //                             onPress={() => this.setState({ report_reason: true })}
      //                             name={"arrowright"}
      //                             type="antdesign"
      //                             color={'#000'}
      //                             size={35}
      //                             containerStyle={[styles.forward]}
      //                           />
      //                         </View>
      //                       </>
      //                     );
      //                   }}
      //                 />
      //               }

      //               {this.state.report_reason ?
      //                 <View style={styles.done_button}>
      //                   <TouchableOpacity style={[styles.button_view, { backgroundColor: primaryColor }]}
      //                     onPress={() => this.setState({ report: false })}>
      //                     <Text style={styles.button}>Done</Text>
      //                   </TouchableOpacity>
      //                 </View>
      //                 :
      //                 <>
      //                   <View style={styles.buttonView}>
      //                     <TouchableOpacity
      //                       style={[styles.button_view, { backgroundColor: '#000' }]}
      //                       onPress={() => this.setState({ report: false })}>
      //                       <Text style={styles.button}>Cancel</Text>
      //                     </TouchableOpacity>
      //                   </View>
      //                 </>
      //               }
      //             </View>
      //           </View>
      //         </Modal>
      //         <Modal
      //           animationType={'none'}
      //           transparent={true}
      //           visible={this.state.delete}
      //           onRequestClose={() => this.setState({ delete: false })}
      //           onDismiss={() => this.setState({ delete: false })}
      //         >
      //           <View style={styles.modalContentContainer}>
      //             <View style={styles.main_view}>
      //               <View>
      //                 <Text style={styles.BlockTxt}>Delete Conversation?</Text>
      //                 <Text style={styles.blockdisclaimer}>Are you sure you want to delete your conversation with @theyellowbutton? Deleted messages can not be recovered.</Text>
      //               </View>
      //               <View style={styles.buttonView}>
      //                 <TouchableOpacity
      //                   style={[styles.button_view, { backgroundColor: '#000' }]}
      //                   onPress={() => this.setState({ delete: false })}>
      //                   <Text style={styles.button}>Cancel</Text>
      //                 </TouchableOpacity>
      //                 <TouchableOpacity style={[styles.button_view, { backgroundColor: primaryColor }]}
      //                   onPress={() => { this._deleteChat(this.props.navigation.state.params.allItem), this.setState({ delete: false }) }}>
      //                   <Text style={styles.button}>Yes</Text>
      //                 </TouchableOpacity>
      //               </View>
      //             </View>
      //           </View>
      //         </Modal>
      //       </>
      //Merge Engine End DefaultContainer
    );
  }

  // Customizable Area End
}

// Customizable Area Start
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    width: '100%',
  },
  sendImg: {
    height: 65,
    width: 65,
  },
  blockImage: {
    width: '15%',
  },
  infotxt: {
    color: '#FFF',
    fontWeight: 'bold',
  },
  chatProfile: {
    paddingHorizontal: 20,
    paddingBottom: 20,
  },
  address: {
    fontSize: 9,
    color: '#344d5b',
    lineHeight: 12,
    // fontFamily: "Gilroy-Medium",
  },
  blockText: {
    width: '85%',
    marginLeft: 5,
  },
  titleHead: {
    fontSize: 16,
    color: '#000000',
    marginBottom: 3,
    // fontFamily: "NeutraTextTF-DemiAlt"
  },
  horizontal: {
    flexDirection: 'row',
    paddingTop: Scale(20),
    alignItems: 'center',
  },
  center: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  image_backImage: {
    marginTop: Scale(10),
    width: Scale(50),
    height: Scale(50),
  },
  forward: {
    width: Scale(40),
    height: Scale(40),
    marginLeft: Scale(20),
  },
  declaration: {
    fontSize: Scale(19),
    marginHorizontal: Scale(20),
    fontFamily: FONTS.AppleSymbols,
    color: 'rgb(101,99,111)',
    letterSpacing: 0.5,
  },
  threedotsview: {
    padding: Scale(4),
    marginTop: Scale(10),
    width: '8%',
    borderRadius: Scale(200),
    borderWidth: Scale(2),
    borderColor: '#FFF',
    alignItems: 'center',
  },
  main_view: {
    borderTopLeftRadius: Scale(30),
    borderTopRightRadius: Scale(30),
    borderColor: '#292A2F',
    borderWidth: 1,
    backgroundColor: '#FFF',
    padding: Scale(10),
    paddingTop: Scale(30),
  },
  button_view: {
    paddingVertical: Scale(8),
    paddingHorizontal: Scale(30),
    borderRadius: Scale(10),
    justifyContent: 'center',
    alignItems: 'center',
    width: '45%',
  },
  button: {
    color: '#FFF',
    fontSize: Scale(20),
    fontFamily: FONTS.RobotoCondensedBold,
  },
  headertext: {
    color: '#fff',
    fontSize: Scale(20),
    fontFamily: FONTS.RobotoCondensedBold,
    letterSpacing: 0.7,
  },
  headertextblock: {
    color: '#FFF',
    fontSize: Scale(20),
    fontFamily: FONTS.RobotoCondensedBold,
    marginBottom: 20,
  },
  notificationTxt: {
    color: '#FFF',
    fontSize: Scale(25),
    fontFamily: FONTS.RobotoCondensedBold,
  },
  notificationView: {
    padding: 20,
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'row',
  },
  saloonImg: {
    width: 38,
    height: 38,
    borderRadius: 6,
  },
  flexRight: {
    justifyContent: 'flex-end',
    display: 'flex',
    alignItems: 'flex-end',
  },
  blockdisclaimer: {
    fontSize: Scale(18),
    fontFamily: FONTS.RobotoCondensedRegular,
    justifyContent: 'center',
    textAlign: 'center',
    marginHorizontal: 10,
  },
  reportdisclaimer: {
    fontSize: Scale(14),
    fontFamily: FONTS.RobotoCondensedRegular,
    justifyContent: 'center',
    textAlign: 'center',
    marginHorizontal: 10,
  },
  deleteConversation: {
    marginBottom: 40,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgb(55,56,64)',
    width: '55%',
    paddingVertical: Scale(10),
    paddingHorizontal: Scale(10),
    borderRadius: Scale(30),
  },
  deleteTxt: {
    color: 'red',
    fontSize: Scale(20),
    fontFamily: FONTS.RobotoCondensedBold,
  },
  heading: {
    fontSize: 20,
    color: '#243640',
    // fontFamily: "NeutraTextTF-DemiAlt"
  },
  userview: {
    alignItems: 'center',
  },
  userviewmsg: {
    // marginRight: Scale(45),
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  titleContainer: {
    alignItems: 'center',
  },
  flexTitle: {
    flex: 3,
  },
  menuview: {
    marginLeft: Scale(20),
    width: Scale(50),
    marginTop: Scale(10),
  },
  backImg: {
    height: 33,
    width: 33,
  },
  innerContainer: {
    backgroundColor: '#fff',
    paddingHorizontal: 20,
    paddingVertical: 20,
  },
  flexWidth: {
    flex: 1,
  },
  flexBox: {
    display: 'flex',
    flexDirection: 'row',
  },
  spaceFlex: {
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  spaceFlexBox: {
    alignItems: 'center',
  },
  buttonView: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: Scale(20),
  },
  chatBox: {
    backgroundColor: 'white', //"#F2F8FF",
    // borderTopLeftRadius: 12,
    // borderTopRightRadius: 12,
    height: '100%',
    flex: 1,
  },
  chatDetailsBar: {
    flexDirection: 'row',
    backgroundColor: '#E8E8E8',
    paddingVertical: 12,
    alignItems: 'center',
  },
  personImg: {
    height: Scale(100),
    width: Scale(100),
    borderRadius: 100,
    marginBottom: Scale(10),
  },
  sendMenuWrap: {
    flexDirection: 'row',
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    height: 50,
    width: '100%',
    backgroundColor: 'white',
    alignItems: 'center',
    paddingHorizontal: 10,
  },
  commentContainerStyle: {
    backgroundColor: 'rgb(250,250,250)',
    borderRadius: 40,
    marginHorizontal: 10,
    height: 40,
    width: '85%',
  },
  commentContainerStyleUser: {
    backgroundColor: 'rgb(250,250,250)',
    borderRadius: 40,
    // marginHorizontal: 10,
    height: 40,
    width: '100%',
  },
  headerView: {
    paddingTop: Scale(20),
    paddingHorizontal: Scale(5),
    justifyContent: 'space-between',
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: Scale(20),
  },
  commentInputContainerStyle: {
    borderBottomColor: 'transparent',
    ...Platform.select({
      ios: {
        paddingVertical: 4,
      },
      android: {},
      default: {
        // other platforms, web for example
      },
    }),
    alignItems: 'center',
    justifyContent: 'center',
  },
  commentInputStyle: {
    paddingVertical: 0,
  },
  menuWrap: {
    // flexGrow:1,
    // padding:10,
    flexDirection: 'row',
  },
  menuOpenWrap: {
    flexGrow: 1,
    padding: 10,
    alignItems: 'center',
  },
  block_report_view: { padding: Scale(20) },
  menuClose: {
    borderRadius: 40,
    width: 40,
    height: 40,
    // backgroundColor:"rgba(147, 213, 208, 1)",
    justifyContent: 'center',
  },
  menuImage: {
    borderRadius: 30,
    width: 30,
    height: 30,
    backgroundColor: 'rgba(147, 213, 208, 1)',
    alignItems: 'center',
    justifyContent: 'center',
    left: -15,
    ...Platform.select({
      ios: {
        marginBottom: 4,
      },
    }),
    // marginRight:5,
  },
  txtMenuPlus: {
    color: 'white',
    fontSize: 30,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  menuOpen: {
    borderRadius: 40,
    flexDirection: 'row',
    height: 40,
    paddingHorizontal: 20,
    backgroundColor: 'rgba(147, 213, 208, 1)',
    alignItems: 'center',
  },
  menuItem: {
    height: 30,
    width: 30,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 20,
  },
  menuItemClose: {
    borderRadius: 30,
    height: 30,
    width: 30,
    alignItems: 'center',
    justifyContent: 'center',
  },
  profileImgWrap: {
    paddingHorizontal: 15,
    alignItems: 'center',
    justifyContent: 'center',
  },
  profileImg: {
    backgroundColor: 'rgba(216, 216, 216, 1)',
    borderRadius: 30,
    height: 36,
    width: 36,
    paddingHorizontal: 15,
  },
  menuView: {
    flex: 1,
    backgroundColor: 'white',
    borderTopRightRadius: 40,
    borderTopLeftRadius: 40,
    paddingHorizontal: 30,
    paddingBottom: 0,
    paddingTop: 30,
    bottom: 0,
    position: 'absolute',
    width: '100%',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
    // height:150,
  },
  titleSection: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  txtmodalTitle: {
    color: 'rgba(24, 75, 123, 1)',
    fontSize: 16,
  },
  txtSelected: {
    color: 'rgba(147, 213, 208, 1)',
    fontSize: 16,
  },
  searchContainerStyle: {
    backgroundColor: 'rgb(250,250,250)',
    borderRadius: 8,
    marginVertical: 20,
  },
  searchInputContainerStyle: {
    borderBottomColor: 'transparent',
  },
  flatListWrap: {
    height: 400,
    // height:"50%",
    // paddingBottom:50,
  },
  done_button: {
    marginVertical: Scale(20),

    justifyContent: 'center',
    alignSelf: 'center',
  },
  report_reason_view: {
    justifyContent: 'space-between',
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: Scale(10),
    marginHorizontal: Scale(10),
  },
  reason_txt: {
    fontFamily: FONTS.RobotoCondensedRegular,
    fontSize: Scale(18),
  },
  columnWrapperStyle: {
    justifyContent: 'space-between',
  },
  productWrap: {
    width: 150,
  },
  productBox: {
    // width: 150,
    width: '100%',
    height: 180,
    borderColor: 'rgba(24, 75, 123, 1)',
    borderWidth: 1,
  },
  txtProductTitle: {
    color: 'rgba(24, 75, 123, 1)',
    fontSize: 14,
    fontWeight: 'bold',
    textAlign: 'center',
    marginTop: 15,
  },
  unSelectedIndicator: {
    backgroundColor: 'rgba(242, 242, 242, 1)',
    borderRadius: 25,
    height: 25,
    width: 25,
    right: 10,
    top: 10,
    position: 'absolute',
  },
  selectedIndicator: {
    backgroundColor: 'rgba(147, 213, 208, 1)',
    borderRadius: 25,
    height: 25,
    width: 25,
    right: 10,
    top: 10,
    position: 'absolute',
  },
  chatProductWrap: {
    flexDirection: 'row',
    margin: 10,
    padding: 10,
    backgroundColor: '#5092ac',
    borderRadius: 20,
  },
  chatProductReverseWrap: {
    flexDirection: 'row-reverse',
    margin: 10,
    padding: 10,
    backgroundColor: '#E9F7F6',
    borderRadius: 20,
  },
  chatProductImgWrap: {
    width: '25%',
  },
  chatProductDescWrap: {
    width: '75%',
    paddingHorizontal: 10,
    justifyContent: 'center',
  },
  chatProductImgContainer: {
    height: 80,
    width: '100%',
    borderRadius: 10,
  },
  imageThumb: {
    resizeMode: 'contain',
    width: '100%',
    height: '100%',
    borderRadius: 10,
  },
  txtChatProductTitle: {
    color: 'white',
    fontSize: 14,
    fontWeight: 'bold',
    textAlign: 'left',
    marginBottom: 10,
  },
  modalContentContainer: {
    flex: 1,
    // backgroundColor: "rgba(50,50,50,0.6)",
    justifyContent: 'flex-end',
  },
  blogPostFlatlist: {
    borderWidth: 1,
    borderRadius: 5,
    justifyContent: 'center',
    margin: 4,
    borderColor: '#6397B4',
    flex: 0.5,
  },
  corrinaImage: {
    width: '100%',
    height: 200,
    borderRadius: 5,
    alignSelf: 'center',
  },
  blogpostTitle: {
    fontWeight: 'bold',
    fontSize: 15,
    color: '#296A94',
  },
  tutorialWrap: {
    width: '45%',
  },
  BlockTxt: {
    fontSize: Scale(20),
    fontFamily: FONTS.RobotoCondensedBold,
    textAlign: 'center',
    marginVertical: Scale(10),
    justifyContent: 'center',
  },
  videoThumbnail: {
    width: '100%',
    height: '100%',
    borderRadius: 5,
    alignSelf: 'center',
  },
  modalView: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.2)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  modalSubView: {
    backgroundColor: 'white',
    borderRadius: 5,
    // marginHorizontal: "10%",
    // marginVertical: "5%",
    paddingHorizontal: 10,
    paddingVertical: 10,
    paddingTop: 20,
    width: '90%',
    maxHeight: '80%',
  },
  txtModalTitle: {
    color: '#296A94',
    fontSize: 16,
    fontWeight: 'bold',
  },
  closeWrap: {
    alignItems: 'flex-end',
    paddingHorizontal: 10,
    // position:'absolute',
    // right:0,
  },
  closeIcon: {
    height: 20,
    width: 20,
  },
  txtCancel: {
    color: '#296A94',
    fontSize: 16,
  },
  modalImages: {
    width: 30,
    height: 30,
    alignSelf: 'center',
  },
  textModal: {
    fontWeight: 'bold',
    fontSize: 14,
    width: 150,
    textAlign: 'center',
    marginTop: 15,
  },
  sosBtnStyle: {
    alignItems: 'center',
    justifyContent: 'flex-end',
    borderRadius: 10,
    height: 40,
    width: 80,
  },
  footer: {
    padding: 10,
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
    marginBottom: 24,
  },
  loadMoreBtn: {
    padding: 10,
    paddingHorizontal: 20,
    backgroundColor: '#93D5D0',
    borderRadius: 40,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  btnText: {
    color: '#184B7B',
    fontSize: 15,
    textAlign: 'center',
  },
  imageThumb1: {
    resizeMode: 'contain',
    width: '100%',
    height: '100%',
  },
});
// Customizable Area End
// Customizable Area End