Untitled
unknown
plain_text
a year ago
53 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>
<View style={{position:'absolute', bottom:0}} >
<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>
<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>
<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 style={{flexDirection:'row', justifyContent:'space-between', marginLeft:Scale(21), marginRight:Scale(21)}} >
<Text style={{color:'black' , fontFamily:FONTS.RobotoCondensedRegular }} >Spam</Text>
<Icon name="arrow-forward-sharp" type="ionicon" />
</View>
<View style={{flexDirection:'row', justifyContent:'space-between', marginLeft:Scale(21), marginRight:Scale(21)}} >
<Text style={{color:'black' , fontFamily:FONTS.RobotoCondensedRegular }} >Bullying or Harassment</Text>
<Icon name="arrow-forward-sharp" type="ionicon" />
</View>
<View style={{flexDirection:'row', justifyContent:'space-between', marginLeft:Scale(21), marginRight:Scale(21)}} >
<Text style={{color:'black' , fontFamily:FONTS.RobotoCondensedRegular }} >Hate Speech</Text>
<Icon name="arrow-forward-sharp" type="ionicon" />
</View>
<View style={{flexDirection:'row', justifyContent:'space-between', marginLeft:Scale(21), marginRight:Scale(21)}} >
<Text style={{color:'black' , fontFamily:FONTS.RobotoCondensedRegular }} >Illegal promotion or Scam</Text>
<Icon name="arrow-forward-sharp" type="ionicon" />
</View>
<View style={{flexDirection:'row', justifyContent:'space-between', marginLeft:Scale(21), marginRight:Scale(21)}} >
<Text style={{color:'black' , fontFamily:FONTS.RobotoCondensedRegular }} >Violence or dangerous organization</Text>
<Icon name="arrow-forward-sharp" type="ionicon" />
</View>
</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.help}
onRequestClose={() => this.setState({ help: false })}
onDismiss={() => this.setState({ help: 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>
</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),
borderWidth:2,
borderColor:'#fff'
},
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