native-base#Card JavaScript Examples
The following examples show how to use
native-base#Card.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: ChatRoomLeftItem.js From WhatsApp-Clone with MIT License | 6 votes |
|
ChatRoomLeftItem = ({item, navigation}) => {
return (
<View style={styles.parentView}>
{/* <Thumbnail style={styles.profileImage} source={PROFILE} /> */}
<Card transparent style={styles.cardView}>
<Text style={[DEFAULT_STYLES.poppinsMedium, styles.userMessage]}>
{item.chatMessage}
</Text>
<Text style={styles.userTime}>{getTimeInFormat(item.chatTime)}</Text>
</Card>
</View>
);
}
Example #2
| Source File: ChatRoomRightItem.js From WhatsApp-Clone with MIT License | 6 votes |
|
ChatRoomRightItem = ({item, navigation}) => {
return (
<View style={styles.parentView}>
<Card transparent style={styles.cardView}>
<Text style={[DEFAULT_STYLES.poppinsMedium, styles.userMessage]}>
{item.chatMessage}
</Text>
<Text style={styles.userTime}>{getTimeInFormat(item.chatTime)}</Text>
</Card>
</View>
);
}
Example #3
| Source File: Transaction.js From web3-react-native with MIT License | 5 votes |
|
Transaction = ({ transaction, onRequestViewTransaction, ...extraProps }) => {
return (
<Card
>
<CardItem
header
bordered
>
<Text
children="Some Transaction Name"
/>
</CardItem>
<CardItem
bordered
>
<Icon active name="pricetag" />
<Text
style={styles.details}
children={transaction.transactionHash}
/>
</CardItem>
<CardItem
>
<Body
style={styles.buttons}
>
<View
style={styles.buttonContainer}
>
<Button
onPress={onRequestViewTransaction}
success
>
<Icon name="eye" />
<Text
children="View Transaction"
/>
</Button>
</View>
</Body>
</CardItem>
</Card>
);
}
Example #4
| Source File: Wallet.js From web3-react-native with MIT License | 5 votes |
|
Wallet = ({ wallet, onRequestAddFunds, onRequestMakeTransaction, ...extraProps }) => {
return (
<Card
>
<CardItem
header
bordered
>
<Text
children="Some Wallet Name"
/>
</CardItem>
<CardItem
bordered
>
<Icon active name="wallet" />
<Text
style={styles.details}
children={wallet.address}
/>
</CardItem>
<CardItem
>
<Body
style={styles.buttons}
>
<View
style={styles.buttonContainer}
>
<Button
onPress={onRequestAddFunds}
success
>
<Icon name="water" />
<Text
children="Faucet"
/>
</Button>
</View>
<View
style={styles.buttonContainer}
>
<Button
onPress={onRequestMakeTransaction}
primary
>
<Icon name="cash" />
<Text
children="Send"
/>
</Button>
</View>
</Body>
</CardItem>
</Card>
);
}
Example #5
| Source File: List.js From react-native-expo-starter-kit with MIT License | 5 votes |
|
ArticlesList = ({
error, loading, listFlat, reFetch, meta,
}) => {
if (error) {
return <Error content={error} tryAgain={reFetch} />;
}
if (listFlat.length < 1) {
return <Error content={errorMessages.articlesEmpty} />;
}
return (
<Container style={{ padding: 10 }}>
<FlatList
data={listFlat}
onRefresh={() => reFetch({ forceSync: true })}
refreshing={loading}
renderItem={({ item }) => (
<Card style={{ opacity: item.placeholder ? 0.3 : 1 }}>
<TouchableOpacity
activeOpacity={0.8}
onPress={() => (
!item.placeholder
? Actions.articlesSingle({ id: item.id, title: item.name })
: null
)}
style={{ flex: 1 }}
>
<CardItem cardBody>
{!!item.image && (
<Image
source={{ uri: item.image }}
style={{
height: 100,
width: null,
flex: 1,
overflow: 'hidden',
borderRadius: 5,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
}}
/>
)}
</CardItem>
<CardItem cardBody>
<Body style={{ paddingHorizontal: 15 }}>
<Spacer size={10} />
<Text style={{ fontWeight: '800' }}>{item.name}</Text>
<Spacer size={15} />
{!!item.excerpt && <Text>{item.excerpt}</Text>}
<Spacer size={5} />
</Body>
</CardItem>
</TouchableOpacity>
</Card>
)}
keyExtractor={(item) => `${item.id}-${item.name}`}
ListFooterComponent={(meta && meta.page && meta.lastPage && meta.page < meta.lastPage)
? () => (
<React.Fragment>
<Spacer size={20} />
<Button
block
bordered
onPress={() => reFetch({ incrementPage: true })}
>
<Text>Load More</Text>
</Button>
</React.Fragment>
) : null}
/>
<Spacer size={20} />
</Container>
);
}
Example #6
| Source File: Single.js From react-native-expo-starter-kit with MIT License | 5 votes |
|
ArticlesSingle = ({
error, loading, article, reFetch,
}) => {
if (error) {
return <Error content={error} tryAgain={reFetch} />;
}
if (loading) {
return <Loading content={loading} />;
}
if (Object.keys(article).length < 1) {
return <Error content={errorMessages.articles404} />;
}
return (
<Container>
<Content padder>
{!!article.image && (
<Image
source={{ uri: article.image }}
style={{
height: 200, width: null, flex: 1, resizeMode: 'contain',
}}
/>
)}
<Spacer size={25} />
<H3>{article.name}</H3>
<Spacer size={15} />
{!!article.content && (
<Card>
<CardItem header bordered>
<Text>Content</Text>
</CardItem>
<CardItem>
<Body>
<Text>{article.content}</Text>
</Body>
</CardItem>
</Card>
)}
<Spacer size={20} />
</Content>
</Container>
);
}
Example #7
| Source File: ForgotPassword.js From expo-ticket-app with MIT License | 5 votes |
|
render () {
const { loading, error, success } = this.props;
const { email } = this.state;
return (
<KeyboardAvoidingView
style={{ backgroundColor: commonColor.backgroundColor, flex: 1 }}
behavior={(Platform.OS === 'ios') ? 'padding' : null}
enabled
keyboardVerticalOffset={Platform.select({ ios: 80, android: 500 })}>
<ScrollView contentContainerStyle={{ height: 400 }}>
<StatusBar style="light"/>
<Container style={{ backgroundColor: commonColor.backgroundColor }}>
<Content padder>
<Card style={{ backgroundColor: commonColor.backgroundColor }}>
{error && <View style={{ margin: 10 }}><Messages message={error}/></View>}
{success &&
<View style={{ margin: 10 }}><Messages type="success" message={success}/></View>}
<Form>
<Item floatingLabel style={{ margin: 15 }}>
<Label style={{ color: '#fff', fontFamily: 'Montserrat' }}>
{i18n.t('login.forgotLabel')}
</Label>
<Input
style={{ color: '#fff', fontFamily: 'Montserrat' }}
autoCapitalize="none"
value={email}
keyboardType="email-address"
disabled={loading}
onChangeText={v => this.handleChange('email', v)}
/>
</Item>
<Spacer size={20}/>
<ButtonH2t text={'login.forgotBtn'} loading={loading} onPress={this.handleSubmit}/>
</Form>
</Card>
</Content>
</Container>
</ScrollView>
</KeyboardAvoidingView>
);
}
Example #8
| Source File: Welcome.js From expo-ticket-app with MIT License | 5 votes |
|
render() {
const { loading } = this.props;
return (<Container style={{ backgroundColor: commonColor.backgroundColor }}>
<StatusBar style="light"/>
<Content padder style={{ flex: 1 }}>
<Spacer size={60}/>
<Text style={{
flex: 1,
fontSize: 55,
fontWeight: '400',
fontFamily: 'Montserrat_Bold',
color: 'white',
textAlign: 'center',
}}>
{'Expo\nTicket App'}
</Text>
<LottieView
loop={true}
autoPlay
speed={1.5}
style={{ width: '100%' }}
source={require('../../../images/home')}
/>
{!loading && <View>
<Card style={{ backgroundColor: commonColor.brandStyle }}>
<ListItem onPress={Actions.login} icon first>
<Left>
<Icon name="log-in" style={{ color: 'white' }}/>
</Left>
<Body style={{ borderBottomWidth: 0 }}>
<TextI18n style={{
color: 'white',
fontSize: 20
}}>
login.connect
</TextI18n>
</Body>
</ListItem>
<ListItem onPress={Actions.signUp} icon>
<Left>
<Icon name="add-circle" style={{ color: 'white' }}/>
</Left>
<Body style={{ borderBottomWidth: 0 }}>
<TextI18n style={{
color: 'white',
fontSize: 20
}}>
login.signUp
</TextI18n>
</Body>
</ListItem>
</Card>
<TextI18n
onPress={Actions.tabbar}
style={{
flex: 1,
fontSize: 13,
fontWeight: '400',
fontFamily: 'Montserrat',
paddingTop: 10,
color: 'white',
textAlign: 'center',
textDecorationLine: 'underline',
}}>
login.withoutAccount
</TextI18n>
</View>}
{loading && <Loading/>}
</Content>
</Container>);
}
Example #9
| Source File: ChatListItem.js From WhatsApp-Clone with MIT License | 5 votes |
|
ChatListItem = ({item, navigation, userId}) => {
const [userType, setUserType] = useState('');
let data = item.chat[0];
useEffect(() => {
setUserName();
}, []);
async function setUserName() {
let userType = await getUserType(item);
setUserType(userType);
}
return (
<TouchableOpacity
onPress={() => {
navigation &&
navigation.navigate(NAV_TYPES.CHAT_MESSAGE_SCREEN, {
item: item,
isNewChat: false,
});
}}>
<Card transparent style={{elevation: 0, marginRight: -5}}>
<CardItem>
<View style={{marginLeft: -5}}>
<Thumbnail
source={
data.chatImage === ''
? PROFILE
: {isStatic: true, uri: data.chatImage}
}
/>
</View>
<Body
style={{
flexDirection: 'column',
marginLeft: 15,
}}>
<Text
numberOfLines={1}
style={[DEFAULT_STYLES.poppinsSemiBold, styles.userName]}>
{userType == constants.FRIEND ? data.userName : data.chatName}
</Text>
<Text
numberOfLines={2}
style={[DEFAULT_STYLES.poppinsLight, styles.userMessage]}>
{data.chatMessage}
</Text>
</Body>
<View>
<Text style={[DEFAULT_STYLES.poppinsSemiBold, styles.userTime]}>
{getTimeInFormat(data.chatTime)}
</Text>
{item.chatUnreadCount != 0 && (
<View style={styles.textMsgCountView}>
<Text
style={styles.textMsgCount}>
{item.chatUnreadCount}
</Text>
</View>
)}
{item.chatUnreadCount === 0 && (
<Icon
style={styles.msgIcon}
name={data.chatUnreadCount}
type={data.chatUnreadCount}
/>
)}
</View>
</CardItem>
</Card>
</TouchableOpacity>
);
}
Example #10
| Source File: EventView.js From expo-ticket-app with MIT License | 4 votes |
|
EventView = ({ events, eventId, loading, buyTicket, onCardChange, buyDisabled, member }) => {
let event = null;
if (eventId && events) {
event = events[eventId];
}
if (!event) return <Error content={'errors.events404'}/>;
const [isModalVisibleCard, setModalVisibleCard] = useState(false);
return (
<KeyboardAvoidingView
style={{ backgroundColor: commonColor.backgroundColor, flex: 1 }}
behavior={(Platform.OS === 'ios') ? 'padding' : null}
enabled
keyboardVerticalOffset={Platform.select({ ios: 80, android: 500 })}>
<Container style={{ backgroundColor: commonColor.backgroundColor }}>
<StatusBar style="light"/>
<Content padder>
<Spacer size={15}/>
<Card style={{ borderRadius: 10, backgroundColor: commonColor.backgroundColorLighter }}>
<Image
source={{ uri: event.image ? event.image : '' }}
style={{
height: 200,
width: '100%',
resizeMode: 'stretch',
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
}}/>
<CardItem style={{
borderBottomRightRadius: 10,
borderBottomLeftRadius: 10,
backgroundColor: commonColor.backgroundColorLighter,
}}>
<Body>
<TextH2t style={{
fontSize: 30,
fontFamily: 'Montserrat_Bold',
alignSelf: 'center',
}}>{event.title}</TextH2t>
<TextH2t style={{
fontSize: 20,
fontFamily: 'Montserrat',
alignSelf: 'center',
}}>{event.date}</TextH2t>
<TextH2t style={{
fontSize: 20,
fontFamily: 'Montserrat',
alignSelf: 'center',
}}>{event.hour}</TextH2t>
</Body>
</CardItem>
</Card>
<Spacer size={15}/>
{event.tickets !== undefined && event.tickets > 0 && member.email &&
<ButtonH2t
onPress={() => setModalVisibleCard(true)}
icon
loading={loading}
text="events.buyTicket"
/>
}
<Spacer size={15}/>
<Card style={{ backgroundColor: commonColor.backgroundColorLighter, borderRadius: 10 }}>
<CardItem style={{
backgroundColor: commonColor.backgroundColorLighter,
borderRadius: 10,
flexDirection: 'row',
}}>
<Icon type="FontAwesome" name="ticket"
style={{ fontSize: 17, color: '#b3b5bb', paddingRight: 5 }}/>
<TextH2t style={{ color: '#b3b5bb' }}>
{event.tickets > 0 ? `${event.tickets} ${i18n.t('events.available')}` : i18n.t('events.full')}
</TextH2t>
</CardItem>
<CardItem style={{ backgroundColor: commonColor.backgroundColorLighter, borderRadius: 10 }}>
<TextH2t>{event.description}</TextH2t>
</CardItem>
</Card>
<Spacer size={15}/>
<Card>
{event.locations && <CardItem style={{ backgroundColor: commonColor.backgroundColorLighter }}>
<Icon type="MaterialCommunityIcons" name="google-maps"
style={{ color: 'white', fontSize: 26 }}/>
<TextH2t style={{ textDecorationLine: 'underline' }}
onPress={() => Linking.openURL('https://www.google.com/maps/place/' + event.locations)}>Link</TextH2t>
</CardItem>}
</Card>
<Spacer size={20}/>
</Content>
<Modal
isVisible={isModalVisibleCard}
backdropOpacity={0.7}
onBackdropPress={() => setModalVisibleCard(false)}
onSwipeComplete={() => setModalVisibleCard(false)}
swipeDirection={['down']}
style={{ margin: 0 }}
propagateSwipe
>
<Spacer size={10}/>
<View style={{
width: 50,
height: 5,
backgroundColor: '#fff',
borderRadius: 20,
alignSelf: 'center',
margin: 10,
}}/>
<ScrollView contentContainerStyle={{
backgroundColor: commonColor.backgroundColorLighter,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
borderWidth: 10,
borderColor: commonColor.backgroundColorLighter,
flexGrow: 2,
}}>
<Card style={{ backgroundColor: commonColor.backgroundColorLighter }}>
<CardItem style={{
backgroundColor: commonColor.backgroundColorLighter,
flexDirection: 'row',
justifyContent: 'space-between',
marginBottom: 20,
}}>
<TextH2t style={{ fontSize: 18 }}>{event.title} X 1</TextH2t>
<TextH2t style={{ fontSize: 18 }}>{event.price} $</TextH2t>
</CardItem>
<LiteCreditCardInput
inputStyle={{ fontFamily: 'Montserrat', color: 'white', fontSize: 20 }}
labelStyle={{ fontFamily: 'Montserrat_Bold', color: 'white', fontSize: 15 }}
validColor={'#fff'}
onChange={(form) => onCardChange(form)}
requiresCVC={true}
/>
<CardItem style={{
backgroundColor: commonColor.backgroundColorLighter,
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 30,
}}>
<TextH2t style={{ fontSize: 11 }}>
By confirming your order you accept H2T Terms of Use.
</TextH2t>
</CardItem>
{event.tickets !== undefined && event.tickets > 0 && member.email &&
<ButtonH2t
onPress={async () => {
await buyTicket(event.id);
setModalVisibleCard(false);
}}
disabled={buyDisabled}
loading={loading} text="events.pay"
style={{ flex: 0 }}
/>
}
<Spacer size={20}/>
</Card>
</ScrollView>
</Modal>
</Container>
</KeyboardAvoidingView>
);
}
Example #11
| Source File: Login.js From expo-ticket-app with MIT License | 4 votes |
|
render () {
const { loading, error, success } = this.props;
const { email } = this.state;
return (
<KeyboardAvoidingView
style={{ backgroundColor: commonColor.backgroundColor, flex: 1 }}
behavior={(Platform.OS === 'ios') ? 'padding' : null}
enabled
keyboardVerticalOffset={Platform.select({ ios: 80, android: 500 })}>
<StatusBar style="light"/>
<ScrollView>
<Container style={{ backgroundColor: commonColor.backgroundColor }}>
<Content padder>
<Spacer size={60}/>
<Text style={{
flex: 1,
fontSize: 75,
fontWeight: '400',
fontFamily: 'Montserrat_Bold',
color: 'white',
textAlign: 'center',
}}>
{'H2T.'}
</Text>
<Spacer size={60}/>
<Card style={{ backgroundColor: commonColor.backgroundColor }}>
{error && <View style={{ margin: 10 }}><Messages message={error}/></View>}
{success &&
<View style={{ margin: 10 }}><Messages type="success" message={success}/></View>}
<Form>
<Item floatingLabel style={{ margin: 15 }}>
<Label style={{
color: '#fff',
fontFamily: 'Montserrat',
}}>{i18n.t('login.fields.email')}</Label>
<Input
style={{ color: '#fff', fontFamily: 'Montserrat' }}
autoCapitalize="none"
value={email}
keyboardType="email-address"
disabled={loading}
returnKeyType={'next'}
onChangeText={v => this.handleChange('email', v)}
onSubmitEditing={() => { this.focusTheField('field2'); }}
blurOnSubmit={false}
/>
</Item>
<Item floatingLabel style={{ margin: 15 }}>
<Label style={{
color: '#fff',
fontFamily: 'Montserrat',
}}>{i18n.t('login.fields.password')}</Label>
<Input
getRef={input => { this.inputs['field2'] = input; }}
style={{ color: '#fff', fontFamily: 'Montserrat' }}
secureTextEntry
disabled={loading}
returnKeyType={'go'}
onChangeText={v => this.handleChange('password', v)}
onSubmitEditing={this.handleSubmit}
/>
</Item>
<Spacer size={20}/>
<ButtonH2t text={'login.connect'} loading={loading} onPress={this.handleSubmit}/>
</Form>
<ListItem onPress={Actions.forgotPassword} icon>
<Left>
<Icon style={{ color: 'white' }} name="help-buoy"/>
</Left>
<Body style={{ borderBottomWidth: 0 }}>
<TextI18n style={{ color: 'white' }}>
login.forgotPassword
</TextI18n>
</Body>
</ListItem>
</Card>
</Content>
</Container>
</ScrollView>
</KeyboardAvoidingView>
);
}
Example #12
| Source File: SignUp.js From expo-ticket-app with MIT License | 4 votes |
|
render () {
const { loading, error, success } = this.props;
return (
<KeyboardAvoidingView
style={{ backgroundColor: commonColor.backgroundColor, flex: 1 }}
behavior={(Platform.OS === 'ios') ? 'padding' : null}
enabled
keyboardVerticalOffset={Platform.select({ ios: 80, android: 500 })}>
<StatusBar style="light"/>
<ScrollView>
<Container style={{ backgroundColor: commonColor.backgroundColor }}>
<Content padder>
<Card style={{ marginTop: 10, backgroundColor: commonColor.backgroundColor }}>
<View padder>
{error && <View style={{ margin: 10 }}><Messages message={error}/></View>}
{success &&
<View style={{ margin: 10 }}><Messages type="success" message={success}/></View>}
<Form>
<Item floatingLabel style={{ margin: 15 }}>
<Label style={{ color: '#fff', fontFamily: 'Montserrat' }}>
{i18n.t('login.fields.firstName')}
</Label>
<Input
disabled={loading}
style={{ color: '#fff', fontFamily: 'Montserrat' }}
onChangeText={v => this.handleChange('firstName', v)}
/>
</Item>
<Item floatingLabel style={{ margin: 15 }}>
<Label style={{ color: '#fff', fontFamily: 'Montserrat' }}>
{i18n.t('login.fields.lastName')}
</Label>
<Input
disabled={loading}
style={{ color: '#fff', fontFamily: 'Montserrat' }}
onChangeText={v => this.handleChange('lastName', v)}
/>
</Item>
<Item floatingLabel style={{ margin: 15 }}>
<Label style={{ color: '#fff', fontFamily: 'Montserrat' }}>
{i18n.t('login.fields.email')}
</Label>
<Input
disabled={loading}
style={{ color: '#fff', fontFamily: 'Montserrat' }}
autoCapitalize="none"
keyboardType="email-address"
onChangeText={v => this.handleChange('email', v)}
/>
</Item>
<Item floatingLabel style={{ margin: 15 }}>
<Label style={{ color: '#fff', fontFamily: 'Montserrat' }}>
{i18n.t('login.fields.password')}
</Label>
<Input
disabled={loading}
style={{ color: '#fff', fontFamily: 'Montserrat' }}
secureTextEntry
onChangeText={v => this.handleChange('password', v)}
/>
</Item>
<Item floatingLabel style={{ margin: 15 }}>
<Label style={{ color: '#fff', fontFamily: 'Montserrat' }}>
{i18n.t('login.fields.confirmPassword')}
</Label>
<Input
disabled={loading}
style={{ color: '#fff', fontFamily: 'Montserrat' }}
secureTextEntry
selectionColor={'white'}
onChangeText={v => this.handleChange('password2', v)}
/>
</Item>
<Spacer size={40}/>
<ButtonH2t text={'login.signUp'} loading={loading} onPress={this.handleSubmit}/>
</Form>
</View>
</Card>
</Content>
</Container>
</ScrollView>
</KeyboardAvoidingView>
);
}
Example #13
| Source File: ContactsItem.js From WhatsApp-Clone with MIT License | 4 votes |
|
ContactsItem = ({item, navigation, userChatList}) => {
async function checkExistingRoom() {
let isMatch = false;
if (userChatList && userChatList.length > 0) {
for (let index = 0; index < userChatList.length; index++) {
const element = userChatList[index];
if (
element.userId === item.userId ||
element.userId === item.chatId ||
element.chatId === item.userId ||
element.chatId === item.chatId
) {
navigateChatRoom(element);
isMatch = true;
break;
}
}
if (!isMatch) {
let chatModel = await getContactsChatModel(item);
navigateChatRoom(chatModel);
}
isMatch = false;
} else {
let chatModel = await getContactsChatModel(item);
navigateChatRoom(chatModel);
}
}
function navigateChatRoom(chatModel) {
navigation &&
navigation.navigate(NAV_TYPES.CHAT_MESSAGE_SCREEN, {
item: chatModel,
isNewChat: true,
});
}
return (
<TouchableOpacity
onPress={async () => {
checkExistingRoom();
}}>
<Card transparent style={{elevation: 0, marginRight: -5, height: 80}}>
<CardItem>
<View style={styles.cardStyle}>
{!item.thumbnailPath && <Thumbnail source={USER} />}
{/* {item.thumbnailPath != '' && (
<Thumbnail source={{isStatic: true, uri: item.thumbnailPath}} />
)} */}
</View>
<Body
style={{
flexDirection: 'column',
marginLeft: 15,
}}>
<Text
numberOfLines={1}
style={[DEFAULT_STYLES.poppinsSemiBold, styles.userName]}>
{item.userName}
</Text>
<Text
numberOfLines={2}
style={[DEFAULT_STYLES.poppinsLight, styles.userMessage]}>
{item.phoneNumber}
</Text>
</Body>
<View>
<Text style={[DEFAULT_STYLES.poppinsSemiBold, styles.userTime]}>
{item.time}
</Text>
<Text style={[DEFAULT_STYLES.poppinsSemiBold, styles.textMsgCount]}>
{item.numberType.toUpperCase()}
</Text>
{item.msgIcon != '' && (
<Text
style={styles.msgIcon}
name={item.msgIcon}
type={item.msgIconType}
/>
)}
</View>
</CardItem>
</Card>
</TouchableOpacity>
);
}
Example #14
| Source File: MyStatusView.js From WhatsApp-Clone with MIT License | 4 votes |
|
MyStatusView = ({navigation, statusData, isUser, isBorder}) => {
const statusImage =
statusData && statusData.status && statusData.status.length > 0
? statusData.status[statusData.status.length - 1].image + ''
: '';
// console.log('Status Item : ', statusData);
return (
<TouchableOpacity
onPress={() => {
statusImage && statusImage != ''
? navigation.navigate(NAV_TYPES.STATUS_VIEW, {
statusData: JSON.stringify(statusData),
isUser: isUser,
})
: navigation.navigate(NAV_TYPES.CAMERA_VIEW, {});
}}>
<Card transparent style={{elevation: 0, marginRight: -5}}>
<CardItem>
<View style={{marginLeft: -5}}>
<View
style={
isBorder
? styles.circleView
: isUser
? styles.circleNoView
: styles.circleSeenView
}>
<Thumbnail
style={
isBorder
? {width: 50, height: 50}
: isUser
? {width: 60, height: 60, borderRadius: 100}
: {width: 50, height: 50}
}
source={statusImage ? {uri: statusImage} : PROFILE2}
/>
</View>
{isUser && (!statusImage || statusImage === '') && (
<Icon
type="MaterialCommunityIcons"
name="plus-circle"
color={GREEN}
style={{
color: LIGHT_GREEN,
position: 'absolute',
bottom: -5,
right: -18,
}}
/>
)}
</View>
<Body
style={{
flexDirection: 'column',
width: 800,
marginLeft: 15,
}}>
<Text
numberOfLines={1}
style={[DEFAULT_STYLES.poppinsSemiBold, styles.userName]}>
{isUser ? 'My Status' : statusData.userName}
</Text>
<TimeElapsed
style={[DEFAULT_STYLES.poppinsLight, styles.userMessage]}
time={
statusData.lastStatusTime
? statusData.lastStatusTime
: 'Tap to add status update'
}
// interval={1000}
isValid={statusData != ''}
/>
{/* <Text
numberOfLines={2}
style={[DEFAULT_STYLES.poppinsLight, styles.userMessage]}>
{statusData.lastStatusTime
? getDateTimeStatusFormat(statusData.lastStatusTime)
: 'Tap to add status update'}
</Text> */}
</Body>
<View>
{isUser && (
<Icon
style={styles.msgIcon}
name="dots-horizontal"
type="MaterialCommunityIcons"
/>
)}
</View>
</CardItem>
</Card>
</TouchableOpacity>
);
}
