Skip to content

Instantly share code, notes, and snippets.

@frknbasaran

frknbasaran/productDetail.js

Created October 23, 2017 17:22
Show Gist options
  • Save frknbasaran/57b3a0ba2be581a93683b48f7e401466 to your computer and use it in GitHub Desktop.
Save frknbasaran/57b3a0ba2be581a93683b48f7e401466 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
productDetail.js
/* React */
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
Dimensions,
TextInput,
ScrollView,
ListView,
TouchableOpacity,
TouchableHighlight,
Alert
} from 'react-native';
import ProductCommentBox from '../components/Shared/ProductCommentBox';
import CommentSection from '../components/Sections/CommentSection';
/* Action Dispatches - Flux */
import {Actions} from 'react-native-router-flux';
/* Native Base */
import { Container, Content, Form, Item, Input, Header, Left, Right, Button, Body, Title, Tab, Tabs, TabHeading, Badge, Icon, StyleProvider} from 'native-base';
import getTheme from '../../node_modules/native-base/native-base-theme/components';
import platform from '../../node_modules/native-base/native-base-theme/variables/platform';
/* Linear Gradient */
import LinearGradient from 'react-native-linear-gradient';
/* Internal Components */
import SmallProductCard from '../components/Cards/SmallProductCard'
import BigProductCard from '../components/Cards/BigProductCard'
import GenericButton from '../components/Shared/GenericButton';
/* Axios Master */
import AxiosMaster from '../services/AxiosMaster';
/* Tab */
import Tabs2 from 'react-native-tabs';
/* Icons */
import { createIconSetFromFontello } from 'react-native-vector-icons';
import fontelloConfig from '../fonts/config.json';
const Icon2 = createIconSetFromFontello(fontelloConfig);
import Swiper from 'react-native-swiper';
import { SwipeListView, SwipeRow } from 'react-native-swipe-list-view';
const AxiosInstance = new AxiosMaster();
const moment = require('moment');
/* Dimension Calculator */
const swiperwidth = Dimensions.get('window').width;
/* Generic Declerations */
const Tag = "ProductDetail: ";
export default class ProductDetailScene extends Component{
constructor(props){
super(props);
this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state={
ProductData:props.ProductData,
isNew:props.isNew,
ProductDetail:{},
isLiked:false,
basic: true,
isOwner:false,
listViewData: Array(20).fill('').map((_,i)=>`item #${i}`),
page:"lol"
}
}
/* Error Handling */
_onAPIError(){
}
/* Button Callbacks */
_onLikeIconClick(){
if(this.state.isLiked){
this._unlikeProduct();
}
else{
this._likeProduct();
}
}
_onSendMessageClick(){
console.log("%s Send Message Click" , Tag);
if(this.state.ProductDetail){
Actions.MessagingScene({ProductDetail:this.state.ProductDetail});
}
}
_onAddToCartClick(){
console.log("%s Add To Cart Click" , Tag);
AxiosInstance.addToCart(this.state.ProductData.id , (err,response)=>{
if(err){
console.log("%s On Cart Addition" , Tag , err);
Alert.alert("Bu Ürün Zaten Sepete Ekli",null,[{text:"Tamam"}]);
}
else{
console.log("%s Cart Addition Success" , Tag , response);
Alert.alert("Ürününüz Başarı İle Sepete Eklenmiştir",null,[{text:"Tamam"}]);
//Actions.ExploreScene();
}
})
}
_onBackArrowClick(){
Actions.pop({refresh:{test:true}});
}
_onCogClick(){
//TODO
}
/* Auxiliary - Profile */
_getProfileImage(){
if(this.state.ProductDetail.UserData){
return {uri: AxiosMaster.ImagePath + this.state.ProductDetail.UserData.ProfileData.ProfileImage};
}
else{
return require('../img/pp.png');
}
}
_getProductImageURL(){
return AxiosMaster.ProductImagePath + this.state.ProductData.ProductImage;
}
_shouldRenderImage(){
if(this.state.ProductData.ProductImage){
return {uri: this._getProductImageURL()}
}
else{
return require('../img/canon.png');
}
}
_getProfileName(){
if(this.state.ProductDetail.UserData){
if (this.state.ProductDetail.UserData.BuyerData.isCommercial){
return this.state.ProductDetail.UserData.ProfileData.buyer.commercialRegistries.StoreName;
}
else{
return this.state.ProductDetail.UserData.ProfileData.FullName;
}
}
else{
return "TaglistUser";
}
}
_getProvince(){
if(this.state.ProductDetail.UserData){
return this.state.ProductDetail.UserData.ProfileData.Province
}
else{
return "Taglist Province";
}
}
_getStars(){
if(this.state.ProductDetail.UserData){
return this.state.ProductDetail.UserData.ProfileData.Stars
}
else{
return "Taglist Province";
}
}
/* Auxiliary - Product */
_getProductName(){
return this.state.ProductData.Name;
}
_getProductPrice(){
return this.state.ProductData.Price;
}
_getOldProductPrice(){
return this.state.ProductData.Price;
}
_getProductViews(){
if(this.state.ProductDetail.ProductData){
return this.state.ProductDetail.ProductData.Views;
}
else{
return this.state.ProductData.Views;
}
}
_getProductDescription(){
return this.state.ProductData.Description;
}
/* Auxiliary - Category */
_getCategoryName(){
if(this.state.ProductDetail.CategoryData){
return this.state.ProductDetail.CategoryData.Name;
}
else{
return "Taglist Category";
}
}
_getProductDate(){
var Publication = new Date(this.state.ProductData.Publication);
return moment(Publication).format('DD.MM.YYYY');
}
/* API Calls */
_likeProduct(){
var temp = this;
AxiosInstance.likeProduct(this.state.ProductData.id , (err,response)=>{
if(err){
console.log(err);
temp._onAPIError();
}
else{
console.log("% Like Op Complete" , response);
temp.setState({isLiked:true});
}
});
}
_unlikeProduct(){
var temp = this;
AxiosInstance.unlikeProduct(this.state.ProductData.id , (err,response)=>{
if(err){
console.log(err);
temp._onAPIError();
}
else{
console.log("% unlike Op Complete" , response);
temp.setState({isLiked:false});
}
});
}
_setIsOwner(){
if(this.state.ProductDetail.UserData.BuyerData.id == AxiosMaster.userData.userId){
this.setState({isOwner:true});
console.log("%s Owner Status TRUE" , Tag , this.state.isOwner);
}
else{
this.setState({isOwner:false});
console.log("%s Owner Status FALSE" , Tag , this.state.isOwner);
}
}
/* API Calls */
_getProductDetail(){
var temp = this;
AxiosInstance.getProductDetail(this.state.ProductData.id , (err,ProductDetail)=>{
console.log(ProductDetail);
if(err || !ProductDetail){
temp._onAPIError();
}
else{
console.log(ProductDetail);
console.log("%s Received Product Detail" , Tag , ProductDetail);
temp.setState({ProductDetail:ProductDetail,isLiked:ProductDetail.isLiked},()=>{
temp._setIsOwner();
});
}
});
}
_sendProductComment(Comment){
var temp = this;
AxiosInstance.sendProductComment(this.state.ProductData.id,Comment,(err,Response)=>{
if(err){
console.log("%s Comment Send Operation Failure" , Tag , err);
temp._onAPIError();
}
else{
console.log("%s Successfuly Sent Comment" , Tag , Response);
temp._getProductDetail();
}
});
}
_editProductComment(commentId, message) {
var temp = this;
AxiosInstance.editProductComment(commentId, message, (err, Response) => {
if (err) {
console.log("%s Comment Edit Operation Failure", Tag, err);
temp._onAPIError();
} else {
console.log("%s Successfuly Edit Comment", Tag, Response);
temp._getProductDetail();
}
});
}
_replyProductComment(commentId, message) {
var temp = this;
AxiosInstance.replyToComment(commentId, message, (err, Response) => {
if (err) {
console.log("%s Comment Reply Operation Failure", Tag, err);
temp._onAPIError();
} else {
console.log("%s Successfuly Reply Comment", Tag, Response);
temp._getProductDetail();
}
});
}
_getBasketItems(){
AxiosInstance.getCartItems((err,CartItems)=>{
if(err){
console.log("%s Error On Cart Retrieval", Tag);
}
else{
console.log("%s Successfuly Fetched Cart Data" , Tag , CartItems);
this.setState({cartItems:CartItems});
}
});
}
/* Rendering - Likes */
_shouldRenderLikeIcon(){
if(this.state.isLiked){
if(this.state.isLiked){
return require('../img/heart2.png');
}
else{
return require('../img/heart.png');
}
}
else{
return require('../img/heart.png');
}
}
/* LifeCycle Methods */
componentDidMount(){
if (this.state.isNew) {
Alert.alert('Ürün onay bekliyor','Ürün henüz onaylanmadı.');
}
}
componentWillMount(){
this._getProductDetail();
this._getBasketItems();
}
componentWillReceiveProps(){
this._getProductDetail();
}
onEditClick(commentId,NewEdit){
console.log("%s onEdit Click For " + commentId , Tag , NewEdit);
this._editProductComment(commentId,NewEdit);
}
onReplyClick(commentId,ReplyMessage){
console.log("%s Reply Click For " + commentId , Tag , ReplyMessage);
this._replyProductComment(commentId,ReplyMessage);
}
onReportClick(commentId){
console.log("%s Report Click For " + commentId , Tag);
var temp = this;
AxiosInstance.reportComment(commentId , (err,response)=>{
if(err){
console.log("Failed TO Report Comment");
Alert.alert("Şikayet Et","Şikayetiniz Bize Ulaşırken Hata Oluştu Lütfen Sonra Tekrar Deneyiniz",[{text:"Tamam"}]);
temp._onAPIError();
}
else{
console.log("Successfuly Reported Comment");
Alert.alert("Şikayet Et", "Şikayetiniz Bize Başarıyla Ulaşmıştır.",[{text:"Tamam"}]);
}
})
}
_getCartLength() {
return this.state.cartItems.length;
}
onDealClick(commentId) {
console.log("%s Deal Click For " + commentId, Tag);
}
/* Comment Action Callbacks */
onCommentSend(CommentText){
console.log("%s On Comment Send %s",Tag,CommentText);
this._sendProductComment(CommentText);
}
_shouldrenderSendMessage(){
if(!this.state.isOwner){
return(
<TouchableOpacity onPress={()=>{this._onSendMessageClick()}}>
<View style={{marginRight:12,marginLeft:12, marginTop:10, marginBottom:10, paddingLeft:5, paddingTop:5, paddingBottom:5, paddingRight:5, borderColor:'#FD3957', borderRadius:5, borderWidth:1, opacity:1, alignItems:'center', justifyContent:'center' }}>
<Text style={{color:'#FD3A57', opacity:1, fontFamily:'Avenir', fontSize:14, fontWeight:'500'}}>Mesaj Gönder</Text>
</View>
</TouchableOpacity>
);
}
}
_isOwner(){
if(this.state.isOwner){
return true;
}
else{
return false;
}
}
_shouldRenderCommentBox(){
if(!this._isOwner()){
return (
<ProductCommentBox onSend={this.onCommentSend.bind(this)}/>
);
}
}
_shouldRenderCommentSection(){
if(this.state.ProductDetail){
return(
<CommentSection
CommentData={this.state.ProductDetail.CommentData}
ProductDetail={this.state.ProductDetail}
UserId={AxiosMaster.userData.userId}
isOwner={this.state.isOwner}
EditHandler={this.onEditClick.bind(this)}
ReplyHandler={this.onReplyClick.bind(this)}
ReportHandler={this.onReportClick.bind(this)}
DealHandler={this.onDealClick.bind(this)}
/>
);
}
}
_onProfilePress(){
Actions.ProfileScene({
targetId: this.state.ProductDetail.UserData.BuyerData.id,
targetType: "Buyer"
});
}
_onDiscoverPress(){
Actions.ExploreScene();
}
_onProfileTabPress(){
Actions.MyProfileScene();
}
_onPlusClick(){
Actions.AddProductScene();
}
render(){
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
return(
<StyleProvider style={getTheme(platform)}>
<Container>
<Header>
<Left>
<Button
onPress={() => this._onBackArrowClick()}
transparent>
<Icon name='arrow-back'/>
</Button>
</Left>
<Body>
<Title>Detay</Title>
</Body>
<Right>
<Button
onPress={() => Actions.BasketScene()}
transparent>
<Icon2 style={{fontSize:22}} name='basket-icon'/>
<Text style={styles.count}></Text>
</Button>
<Button transparent>
<Icon2 style={{fontSize:22}} name='more'/>
</Button>
</Right>
</Header>
<Container style={{
flexDirection: 'column'
}}>
<Content style={{marginBottom:50}} contentContainerStyle={{flexWrap:'wrap', flexDirection:'row', alignItems:'flex-start'}}>
<View style={{marginTop:-64, flexDirection:'column'}}>
<Swiper showsButtons={false} height={swiperwidth}>
<View style={styles.slide1}>
<Image
style={styles.image}
source={this._shouldRenderImage()}>
</Image>
</View>
<View style={styles.slide2}>
<Image
style={styles.image}
source={this._shouldRenderImage()}>
</Image>
</View>
<View style={styles.slide3}>
<Image
style={styles.image}
source={this._shouldRenderImage()}>
</Image>
</View>
<View style={styles.slide4}>
<Image
style={styles.image}
source={this._shouldRenderImage()}>
</Image>
</View>
</Swiper>
<TouchableOpacity onPress={()=>this._onProfilePress()}>
<View style={{flexDirection:'row'}}>
<Image style={styles.pp} source={this._getProfileImage()}></Image>
<View style={{flexDirection:'column'}}>
<Text style={styles.persontitle}>{this._getProfileName()}</Text>
<Text style={styles.personlocation}>{this._getProvince()}</Text>
</View>
<Right>
<View style={{flexDirection:'row', paddingRight:15}}>
<Image style={{height:14,width:15}} source={require('../img/profile_star.png')}/>
<Text style={{marginLeft:4, color:'#9B9B9B', fontFamily:'Avenir',fontSize:14}}>{this._getStars()}</Text>
</View>
</Right>
</View>
</TouchableOpacity>
{this._shouldrenderSendMessage()}
<View style={{flexDirection:'column', height:82, borderColor:'#EFEFF4', borderBottomWidth:1, borderTopWidth:1, opacity:1, paddingTop:14}}>
<View style={{flexDirection:'row'}}>
<Text style={{color:'#4A4A4A', opacity:1, fontFamily:'Avenir', fontSize:17, fontWeight:'bold', paddingLeft:10}}>{this._getProductName()}</Text>
<Right><Text style={{color:'#D1D1D1', opacity:1, fontFamily:'Avenir', fontSize:10, fontWeight:'400', paddingRight:10}}>{this._getProductDate()}</Text></Right>
</View>
<Text style={{color:'#D1D1D1', opacity:1, fontFamily:'Avenir', fontSize:10, fontWeight:'400', paddingLeft:10}}>{this._getCategoryName()}</Text>
<View style={{flexDirection:'row', paddingLeft:10}}>
<Text style={styles.price}>{this._getProductPrice() + ' '} <Text style={styles.tl}>₺</Text> { (this._getOldProductPrice() !== this._getProductPrice()) ? <Text style={styles.falsePrice}>{this._getOldProductPrice() + ' '} <Text style={styles.tl}>₺</Text></Text> : null}</Text>
<Right>
<View style={{flexDirection:'row'}}>
<Image source={require('../img/eye.png')} style={styles.eye}/>
<Text style={{color:'#D1D1D1', opacity:1, fontFamily:'Avenir', fontSize:10, fontWeight:'400', paddingRight:10}}>{this._getProductViews()}</Text>
<TouchableOpacity onPress={()=>this._onLikeIconClick()}>
<Image source={this._shouldRenderLikeIcon()} style={styles.heart}/>
</TouchableOpacity>
</View>
</Right>
</View>
</View>
<Tabs locked={true}>
<Tab heading={<TabHeading><Text>Ürün Detayları</Text></TabHeading>}>
<Content style={{flexWrap:'wrap', flexDirection:'column'}}>
<View style={{flexDirection:'column', borderColor:'#FD3957', borderColor:'#EFEFF4', borderBottomWidth:1, opacity:1, paddingTop:14}}>
<Text style={{color:'#4A4A4A', opacity:1, fontFamily:'Avenir', fontSize:17, fontWeight:'bold', paddingLeft:10}}>Açıklama</Text>
<Text style={{color:'#9B9B9B', opacity:1, fontFamily:'Avenir', fontSize:14, fontWeight:'100', paddingLeft:10, paddingBottom:10, paddingRight:10, paddingTop:4}}>{this._getProductDescription()}</Text>
</View>
<View style={{flexDirection:'row', borderColor:'#FD3957', borderColor:'#EFEFF4', borderBottomWidth:1, opacity:1, paddingTop:12, paddingBottom:10}}>
<Text style={{color:'#4A4A4A', opacity:1, fontFamily:'Avenir', fontSize:14, fontWeight:'500', paddingLeft:10}}>Adet</Text>
<Text style={{color:'#9B9B9B', opacity:1, fontFamily:'Avenir', fontSize:14, fontWeight:'100', paddingLeft:10}}>{(this.state.ProductData.Quantity) ? this.state.ProductData.Quantity : 1}</Text>
</View>
<View style={{flexDirection:'column', borderColor:'#FD3957', borderColor:'#EFEFF4', borderBottomWidth:1, opacity:1, paddingTop:14, paddingBottom:10}}>
<Text style={{color:'#4A4A4A', opacity:1, fontFamily:'Avenir', fontSize:17, fontWeight:'bold', paddingLeft:10}}>Özellikler</Text>
<Text style={{color:'#9B9B9B', opacity:1, fontFamily:'Avenir', fontSize:14, fontWeight:'100', paddingLeft:10, paddingRight:10, paddingTop:4}}>Belirtilmemiş</Text>
</View>
<View style={{flexDirection:'row', borderColor:'#FD3957', borderColor:'#EFEFF4', borderBottomWidth:1, opacity:1, paddingTop:12, paddingBottom:10}}>
<Text style={{color:'#4A4A4A', opacity:1, fontFamily:'Avenir', fontSize:14, fontWeight:'500', paddingLeft:10}}>Ödeme Bilgisi</Text>
<Text style={{color:'#9B9B9B', opacity:1, fontFamily:'Avenir', fontSize:14, fontWeight:'100', paddingLeft:10}}>Kredi Kartına +9 Taksit İmkanı</Text>
</View>
<View style={{flexDirection:'row', borderColor:'#FD3957', borderColor:'#EFEFF4', borderBottomWidth:1, opacity:1, paddingTop:12, paddingBottom:10}}>
<Text style={{color:'#4A4A4A', opacity:1, fontFamily:'Avenir', fontSize:14, fontWeight:'500', paddingLeft:10}}>Kargo Bilgisi</Text>
<Text style={{color:'#9B9B9B', opacity:1, fontFamily:'Avenir', fontSize:14, fontWeight:'100', paddingLeft:10}}>Alıcı Öder</Text>
</View>
{(!this.state.isOwner) &&
<GenericButton full clickTrigger={this._onAddToCartClick.bind(this)} text={'SEPETE EKLE'} gradient colors={['#FD3957','#FE6B3F', '#FE982A']} starts ={{x: 0.0, y: 0.5}} ends={{x: 1.0, y: 0.5}} locations={[0,0.5,1.0]}>
</GenericButton>
}
</Content>
</Tab>
<Tab tabStyle={styles.tabStyle} heading={ <TabHeading><Text>Yorumlar</Text></TabHeading>}>
<View style={styles.container}>
{this._shouldRenderCommentBox()}
{this._shouldRenderCommentSection()}
</View>
</Tab>
</Tabs>
</View>
</Content>
<Tabs2 selected={this.state.page} style={{backgroundColor:'white',borderTopColor:'#B2B2B2', borderTopWidth:0.5}} selectedStyle={{color:'red'}} onSelect={el=>this.setState({page:el.props.name})}>
<TouchableOpacity onPress={()=>this._onDiscoverPress()}>
<View name="first" style={{flexDirection:'column',justifyContent:'center',alignItems:'center'}} selectedIconStyle={{borderTopWidth:2,borderTopColor:'red'}}><Icon2 name="explore-icon" size={18} color="#D1D1D1" />
<Text style={{fontSize:10, color:'#D1D1D1'}}>Keşfet</Text>
</View>
</TouchableOpacity>
<View name="second" style={{flexDirection:'column',justifyContent:'center',alignItems:'center'}} selectedIconStyle={{borderTopWidth:2,borderTopColor:'red'}}><Icon2 name="live-icon" size={18} color="#D1D1D1"/>
<Text style={{fontSize:10, color:'#D1D1D1'}}>Canlı Yayın</Text>
</View>
<TouchableOpacity onPress={() => this._onPlusClick()} name="third" style={{height:52, width:52, borderRadius:26, backgroundColor:'#171441',top:-8, position:'absolute',justifyContent:'center',alignItems:'center'}}>
<Image style={{height:24,width:24}} source={require('../img/plus.png')}/>
</TouchableOpacity>
<TouchableOpacity onPress={()=>Actions.NotificationsMessagesScene()}>
<View name="third" style={{flexDirection:'column',justifyContent:'center',alignItems:'center'}} selectedIconStyle={{borderTopWidth:2,borderTopColor:'red'}}>
<Icon2 name="notification-icon" size={18} color="#D1D1D1"/>
<Text style={{fontSize:10, color:'#D1D1D1'}}>Bildirimler</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={()=> this._onProfileTabPress()}>
<View name="fourth" style={{flexDirection:'column',justifyContent:'center',alignItems:'center'}} selectedIconStyle={{borderTopWidth:2,borderTopColor:'red', color:'black'}}>
<Icon2 name="profile-icon" size={18} color="#D1D1D1"/>
<Text style={{fontSize:10, color:'#D1D1D1'}} selectedIconStyle={{color:'red'}}>Profilim</Text>
</View>
</TouchableOpacity>
</Tabs2>
</Container>
</Container>
</StyleProvider>
);
}
}
const styles = StyleSheet.create({
tabBarStyle:{
height:35,
backgroundColor:'#ffffff',
marginTop:10
},
tabStyle:{
height:35,
backgroundColor:'#ffffff'
},
slide1: {
alignSelf: 'stretch',
},
image: {
height:swiperwidth,
width:swiperwidth
},
pp: {
height:40,
width:40,
marginLeft:10,
marginTop:10,
marginRight:10,
marginBottom:10,
borderRadius:20
},
persontitle:{
color:'#4A4A4A',
fontSize:15,
fontFamily:'Avenir',
fontWeight:'500',
paddingTop:13
},
personlocation:{
color:'#9B9B9B',
fontSize:13,
fontFamily:'Avenir',
fontWeight:'100',
paddingTop:0
},
price: {
fontFamily: 'Avenir',
color: '#FD3A57',
fontSize:16,
fontWeight: 'bold'
},
falsePrice: {
marginLeft:20,
fontFamily: 'Avenir',
color: '#9B9B9B',
fontSize:16,
fontWeight: 'bold',
textDecorationLine: 'line-through'
},
tl:{
fontWeight: 'normal'
},
eye:{
width:16,
height:10,
marginTop:2,
marginRight:2
},
heart:{
width:18,
height:16,
marginRight:10
},
chevron:{
width:8,
height:13,
marginRight:10,
},
buyerRowFront: {
backgroundColor: '#ffffff',
flex:1,
borderBottomColor: '#CECED2',
borderBottomWidth: 1,
justifyContent: 'center',
height: 64,
},
buyerRowBack: {
alignItems: 'center',
padding: 15,
backgroundColor: '#F8F8F8',
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
paddingLeft: 15,
},
sellerRowFront: {
flex:1,
backgroundColor: '#ffffff',
borderBottomColor: '#CECED2',
borderBottomWidth: 1,
justifyContent: 'center',
height: 49,
},
sellerRowBack: {
padding: 15,
alignItems: 'center',
backgroundColor: '#F8F8F8',
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
paddingLeft: 15,
},
backTextWhite: {
color: '#FFF',
fontFamily:'Avenir',
fontSize:10,
fontWeight:'500'
},
backRightBtn: {
alignItems: 'center',
bottom: 0,
justifyContent: 'center',
position: 'absolute',
top: 0,
width: 75
},
backRightBtnLeft: {
backgroundColor: '#4A4A4A',
right: 75
},
backRightBtnRight: {
backgroundColor: '#FE982A',
right: 0
},
controls: {
alignItems: 'center',
marginBottom: 30
},
container: {
backgroundColor: 'white',
flex: 1
},
exclam: {
width:23,
height:23,
marginTop:5,
marginBottom:5
},
reply: {
width:23,
height:23,
marginTop:5,
marginBottom:5
},
edit: {
width:26,
height:26,
marginTop:5,
marginBottom:5
},
buyerpp:{
width:35,
height:35,
marginLeft:10
},
sellerpp:{
width:20,
height:20,
marginLeft:54
},
name: {
fontFamily:'Avenir',
fontSize:14,
fontWeight:'400',
color:'#D1D1D1'
},
speech: {
fontFamily:'Avenir',
fontSize:14,
fontWeight:'100',
color:'#4A4A4A'
},
time: {
fontFamily:'Avenir',
fontSize:11,
fontWeight:'100',
color:'#D1D1D1',
marginRight:10
},
count: {
position:'absolute',
backgroundColor:'red',
color:'white',
fontWeight:'400',
paddingLeft:3,
paddingRight:3,
marginLeft:35,
fontSize:10,
top:10,
borderRadius:100
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment