react-native-elements#Card JavaScript Examples
The following examples show how to use
react-native-elements#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: Leave.js From id.co.moonlay-eworkplace-mobile with MIT License | 6 votes |
|
render() {
return (
<View style={styles.container}>
<View style={{flex:1, marginLeft:25}}>
<Text style={styles.text2}>
Leave
</Text>
</View>
<View style={{flex:15, flexDirection:'row',alignSelf:'center'}}>
<Card containerStyle={styles.card}>
<TouchableOpacity style={styles.Button} onPress={this.moveToDayOff}>
<Coffee width={70} height={70} />
<Text style={styles.text}>Taking Day Off</Text>
</TouchableOpacity>
</Card>
<Card containerStyle={styles.card}>
<TouchableOpacity style={styles.Button} onPress={this.moveToSick}>
<Aid width={70} height={70}/>
<Text style={styles.text}>Sick Leave</Text>
</TouchableOpacity>
</Card>
</View>
</View>
)
}
Example #2
| Source File: ClockInHistory.js From id.co.moonlay-eworkplace-mobile with MIT License | 5 votes |
|
render() {
return (
<SafeAreaView style={{flex:1}}>
<ScrollView
alwaysBounceVertical={true}
refreshControl={
<RefreshControl refreshing={this.state.refreshing} onRefresh={this.loadData} />
}>
<View style={{display: this.state.history.length !== 0 ? 'flex':'none'}}>
<Text style={styles.TextTittle}>{this.state.monthYear}</Text>
<Card containerStyle={{marginBottom:10}}>
{
this.state.history.map((u, i) => {
const clockinTime = moment(u.CheckIn).add(7, 'hours').format('YYYY-MM-DD hh:mm:ss A');
const clockoutTime = moment(u.CheckOut).add(7, 'hours').format('YYYY-MM-DD hh:mm:ss A');
const clockin = clockinTime.substr(11,5)+' '+clockinTime.substr(20,15)
var clockout = '';
if(clockoutTime.substr(11,5) === '07:00' && clockoutTime.substr(20,15) === 'AM'){
clockout = 'Now'
}
else{
clockout = clockoutTime.substr(11,5)+' '+clockoutTime.substr(20,15)
}
return (
<View key={i} style={styles.history}>
<View style={{flex:1, marginLeft:10, justifyContent:'center'}}>
<Text style={styles.Text}>{u.CheckIn.substr(8,2)+' / '+u.CheckIn.substr(5,2) +' / '+u.CheckIn.substr(0,4)}</Text>
</View>
<View style={{flex:1, alignItems:'flex-end', marginRight:10, justifyContent:'center'}}>
<Text style={styles.Text}>{clockin+'-'+clockout}</Text>
</View>
</View>
);
})
}
</Card>
</View>
<View style={{display: this.state.history.length === 0 ? 'flex':'none', alignItems:'center', marginTop:250}}>
<FontAwesome5 name='exclamation-triangle' size={80} color='#1A446D' style={{opacity:0.7}}/>
<Text style={[styles.TextStatus]}>No History</Text>
</View>
</ScrollView>
</SafeAreaView>
)
}
Example #3
| Source File: card.playground.jsx From playground with MIT License | 5 votes |
|
CardPlayground = () => {
const params = useView({
componentName: "Card",
props: {
children: {
value: `
<Card.Title>CARD WITH DIVIDER</Card.Title>
<Card.Divider/>
<View style={{position:"relative",alignItems:"center"}}>
<Image
style={{width:"100%",height:100}}
resizeMode="contain"
source={{ uri: "https://avatars0.githubusercontent.com/u/32242596?s=460&u=1ea285743fc4b083f95d6ee0be2e7bb8dcfc676e&v=4" }}
/>
<Text >Pranshu Chittora</Text>
</View>
`,
type: PropTypes.ReactNode,
imports: {
"react-native": {
named: ["View", "Image"],
},
},
},
containerStyle: {
value: `{}`,
type: PropTypes.Object,
},
wrapperStyle: {
value: `{}`,
type: PropTypes.Object,
},
},
scope: {
Card,
View,
Image,
Text,
},
imports: {
"react-native-elements": {
named: ["Card"],
},
// "react-native": {
// named: ["View", "Image", "Text"],
// },
},
});
return (
<React.Fragment>
<Playground params={params} />
</React.Fragment>
);
}
Example #4
| Source File: ReceiverDetailsScreen.js From barter-app-stage-10 with MIT License | 5 votes |
|
render(){
return(
<View style={styles.container}>
<View style={{flex:0.1}}>
<Header
leftComponent ={<Icon name='arrow-left' type='feather' color='#696969' onPress={() => this.props.navigation.goBack()}/>}
centerComponent={{ text:"Exchange Items", style: { color: '#90A5A9', fontSize:20,fontWeight:"bold", } }}
backgroundColor = "#eaf8fe"
/>
</View>
<View style={{flex:0.3}}>
<Card
title={"Item Information"}
titleStyle= {{fontSize : 20}}
>
<Card >
<Text style={{fontWeight:'bold'}}>Name : {this.state.itemName}</Text>
</Card>
<Card>
<Text style={{fontWeight:'bold'}}>Reason : {this.state.description}</Text>
</Card>
</Card>
</View>
<View style={{flex:0.3}}>
<Card
title={"receiver Information"}
titleStyle= {{fontSize : 20}}
>
<Card>
<Text style={{fontWeight:'bold'}}>Name: {this.state.receiverName}</Text>
</Card>
<Card>
<Text style={{fontWeight:'bold'}}>Contact: {this.state.receiverContact}</Text>
</Card>
<Card>
<Text style={{fontWeight:'bold'}}>Address: {this.state.receiverAddress}</Text>
</Card>
</Card>
</View>
<View style={styles.buttonContainer}>
{
this.state.receiverId !== this.state.userId
?(
<TouchableOpacity
style={styles.button}
onPress={()=>{
this.updateBarterStatus()
this.addNotification()
this.props.navigation.navigate('MyBarters')
}}>
<Text>I want to Exchange</Text>
</TouchableOpacity>
)
: null
}
</View>
</View>
)
}
Example #5
| Source File: ReceiverDetailsScreen.js From barter-app-stage-12 with MIT License | 5 votes |
|
render(){
return(
<View style={styles.container}>
<View style={{flex:0.1}}>
<Header
leftComponent ={<Icon name='arrow-left' type='feather' color='#ffff' onPress={() => this.props.navigation.goBack()}/>}
centerComponent={{ text:"Exchange Items", style: { color:'#ffff', fontSize:20,fontWeight:"bold", } }}
backgroundColor = "#32867d"
/>
</View>
<View style={{flex:0.3,marginTop:RFValue(20)}}>
<Card
title={"Item Information"}
titleStyle= {{fontSize : 20}}
>
<Text style={{fontWeight:'bold'}}>Name : {this.state.itemName}</Text>
<Text style={{fontWeight:'bold'}}>Reason : {this.state.description}</Text>
</Card>
</View>
<View style={{flex:0.3}}>
<Card
title={"Receiver Information"}
titleStyle= {{fontSize : 20}}
>
<Card>
<Text style={{fontWeight:'bold'}}>Name: {this.state.receiverName}</Text>
<Text style={{fontWeight:'bold'}}>Contact: {this.state.receiverContact}</Text>
<Text style={{fontWeight:'bold'}}>Address: {this.state.receiverAddress}</Text>
</Card>
</Card>
</View>
<View style={styles.buttonContainer}>
{
this.state.receiverId !== this.state.userId
?(
<TouchableOpacity
style={styles.button}
onPress={()=>{
this.updateBarterStatus()
this.addNotification()
this.props.navigation.navigate('MyBarters')
}}>
<Text style={{color:'#ffff'}}>I want to Exchange</Text>
</TouchableOpacity>
)
: null
}
</View>
</View>
)
}
Example #6
| Source File: ReceiverDetailsScreen.js From barter-app-stage-6 with MIT License | 5 votes |
|
render(){
return(
<View style={styles.container}>
<View style={{flex:0.1}}>
<Header
leftComponent ={<Icon name='arrow-left' type='feather' color='#696969' onPress={() => this.props.navigation.goBack()}/>}
centerComponent={{ text:"Exchange Items", style: { color: '#90A5A9', fontSize:20,fontWeight:"bold", } }}
backgroundColor = "#eaf8fe"
/>
</View>
<View style={{flex:0.3}}>
<Card
title={"Item Information"}
titleStyle= {{fontSize : 20}}
>
<Card >
<Text style={{fontWeight:'bold'}}>Name : {this.state.itemName}</Text>
</Card>
<Card>
<Text style={{fontWeight:'bold'}}>Reason : {this.state.description}</Text>
</Card>
</Card>
</View>
<View style={{flex:0.3}}>
<Card
title={"Reciever Information"}
titleStyle= {{fontSize : 20}}
>
<Card>
<Text style={{fontWeight:'bold'}}>Name: {this.state.recieverName}</Text>
</Card>
<Card>
<Text style={{fontWeight:'bold'}}>Contact: {this.state.recieverContact}</Text>
</Card>
<Card>
<Text style={{fontWeight:'bold'}}>Address: {this.state.recieverAddress}</Text>
</Card>
</Card>
</View>
<View style={styles.buttonContainer}>
{
this.state.recieverId !== this.state.userId
?(
<TouchableOpacity
style={styles.button}
onPress={()=>{
this.updateBarterStatus()
this.props.navigation.navigate('MyBarters')
}}>
<Text>I want to Exchange</Text>
</TouchableOpacity>
)
: null
}
</View>
</View>
)
}
Example #7
| Source File: RecieverDetailsScreen.js From book-santa-stage-10 with MIT License | 5 votes |
|
render(){
return(
<View style={styles.container}>
<View style={{flex:0.1}}>
<Header
leftComponent ={<Icon name='arrow-left' type='feather' color='#696969' onPress={() => this.props.navigation.goBack()}/>}
centerComponent={{ text:"Donate Books", style: { color: '#90A5A9', fontSize:20,fontWeight:"bold", } }}
backgroundColor = "#eaf8fe"
/>
</View>
<View style={{flex:0.3}}>
<Card
title={"Book Information"}
titleStyle= {{fontSize : 20}}
>
<Card >
<Text style={{fontWeight:'bold'}}>Name : {this.state.bookName}</Text>
</Card>
<Card>
<Text style={{fontWeight:'bold'}}>Reason : {this.state.reason_for_requesting}</Text>
</Card>
</Card>
</View>
<View style={{flex:0.3}}>
<Card
title={"Reciever Information"}
titleStyle= {{fontSize : 20}}
>
<Card>
<Text style={{fontWeight:'bold'}}>Name: {this.state.recieverName}</Text>
</Card>
<Card>
<Text style={{fontWeight:'bold'}}>Contact: {this.state.recieverContact}</Text>
</Card>
<Card>
<Text style={{fontWeight:'bold'}}>Address: {this.state.recieverAddress}</Text>
</Card>
</Card>
</View>
<View style={styles.buttonContainer}>
{
this.state.recieverId !== this.state.userId
?(
<TouchableOpacity
style={styles.button}
onPress={()=>{
this.updateBookStatus()
this.addNotification()
this.props.navigation.navigate('MyDonations')
}}>
<Text>I want to Donate</Text>
</TouchableOpacity>
)
: null
}
</View>
</View>
)
}
Example #8
| Source File: HomeHeadDivision.js From id.co.moonlay-eworkplace-mobile with MIT License | 4 votes |
|
render() {
const loadings = this.props.loading
return(
<SafeAreaView style={{backgroundColor:'#F9FCFF'}}>
<ScrollView
alwaysBounceVertical={true}
refreshControl={
<RefreshControl refreshing={this.state.refreshing}
onRefresh={this.onRefresh} />
}>
<View style={{marginLeft:'5%'}}>
<Text style={styles.textUsername}>Hi, {this.state.firstname}!</Text>
<View style={styles.view1}>
<View style={{width:20, height:'100%', alignItems:'center'}}>
<FontAwesome5 name='map-marker-alt' size={16} color='#E74C3C' style={{marginTop:3}}/>
</View>
<View style={{width:'100%', height:20, justifyContent:'center'}}>
<Text style={styles.textLocation}>{this.state.Location}</Text>
</View>
</View>
</View>
<View style={{ flex:1,}}>
<Card containerStyle={styles.card4}>
<Text style={styles.textHour}>
{this.state.hour}
</Text>
<Text style={styles.textDay}>
{this.state.day}, {this.state.monthYear}
</Text>
<View>
<TouchableOpacity style={[this.props.clockin_status === false ? styles.buttonClockIn : styles.buttonClockOut]} onPress={this.ButtonCheck}>
<Text style={styles.textClockin}>{this.state.textButton}</Text>
</TouchableOpacity>
<Text style={[styles.textStatus]}>{this.props.status_Checkin}</Text>
</View>
</Card>
</View>
<View style={{flexDirection:'row', flex:0.5, marginTop:36}}>
<View style={{width:'50%', flex:1}}>
<Card containerStyle={styles.card4}>
<TouchableOpacity style={{flexDirection:'row', padding:0}} onPress={this.movetoWFH}>
<WFH width={35} height={35}/>
<Text style={styles.text1}>Work From {'\n'}Home</Text>
</TouchableOpacity>
</Card>
</View>
<View style={{width:'50%', flex:1}}>
<Card containerStyle={styles.card4}>
<TouchableOpacity style={{flexDirection:'row', paddingBottom:3}} onPress={this.movetoWAC}>
<Buildings width={35} height={35}/>
<Text style={styles.text1}>Work At {'\n'}Client Office</Text>
</TouchableOpacity>
</Card>
</View>
</View>
<View style={{ flex:3, paddingBottom:'5%'}}>
<Text style={styles.textDashboard}>Dashboard</Text>
<Card containerStyle={styles.cardApprove}>
<TouchableOpacity style={styles.baseTouchAble} onPress={this.movetoApprovalPage}>
<Text style={styles.text2}>Approval</Text>
<Text style={styles.text3}>{this.state.textApproved}</Text>
<View style={styles.view2InCard1}>
<View style={{flex:3, flexDirection:'row'}}>
</View>
<View style={{flex:3}}>
<Text style={styles.textViewDetails}>View Details</Text>
</View>
</View>
</TouchableOpacity>
</Card>
<Card containerStyle={styles.card1}>
<TouchableOpacity style={styles.baseTouchAble} onPress={this.movetoMeetingsPage}>
<Text style={styles.text2}>Meeting</Text>
<Text style={styles.text3}>Scrum Meetings</Text>
<View style={styles.viewInCard1}>
<FontAwesome5 name='map-marker-alt' size={16} color='#505050'/>
<Text style={styles.text4}>Meeting Room A, Moonlay Office</Text>
</View>
<Image style={{width: '100%'}} source={require('../../image/line.png')}/>
<View style={styles.view2InCard1}>
<View style={{flex:3, flexDirection:'row'}}>
<FontAwesome5 name='clock' size={16} color='#505050' style={{marginTop:1}}/>
<Text style={styles.text5}>02.00 PM</Text>
</View>
<View style={{flex:3}}>
<Text style={styles.textViewDetails}>View Details</Text>
</View>
</View>
</TouchableOpacity>
</Card>
<Card containerStyle={styles.card2}>
<TouchableOpacity style={styles.baseTouchAble}>
<Text style={styles.text2}>Ongoing Task</Text>
<View style={styles.viewInCard2}>
<FontAwesome5 name='circle' size={8} color='#505050' solid/>
<Text style={styles.text6}>Task 01 - 25 Feb 2020</Text>
</View>
<View style={styles.viewInCard2}>
<FontAwesome5 name='circle' size={8} color='#505050' solid/>
<Text style={styles.text6}>Task 01 - 25 Feb 2020</Text>
</View>
<View style={styles.viewInCard2}>
<FontAwesome5 name='circle' size={8} color='#505050' solid/>
<Text style={styles.text6}>Task 01 - 25 Feb 2020</Text>
</View>
<View style={{flexDirection:'row'}}>
<View style={{flex:3}}>
<Text style={styles.text6}>...</Text>
</View>
<View style={{flex:3}}>
<Text style={styles.textViewDetails}>View Details</Text>
</View>
</View>
</TouchableOpacity>
</Card>
<Card containerStyle={styles.card3}>
<TouchableOpacity style={styles.baseTouchAble} onPress={this.movetoTaskDonePage}>
<Text style={styles.text2}>Task Done</Text>
<View style={styles.viewInCard2}>
<FontAwesome5 name='circle' size={8} color='#505050' solid/>
<Text style={styles.text6}>Task 01 - 25 Feb 2020</Text>
</View>
<View style={styles.viewInCard2}>
<FontAwesome5 name='circle' size={8} color='#505050' solid/>
<Text style={styles.text6}>Task 01 - 25 Feb 2020</Text>
</View>
<View style={styles.viewInCard2}>
<FontAwesome5 name='circle' size={8} color='#505050' solid/>
<Text style={styles.text6}>Task 01 - 25 Feb 2020</Text>
</View>
<View style={{flexDirection:'row'}}>
<View style={{flex:3}}>
<Text style={styles.text6}>...</Text>
</View>
<View style={{flex:3}}>
<Text style={styles.textViewDetails}>View Details</Text>
</View>
</View>
</TouchableOpacity>
</Card>
</View>
<Loading visible={loadings === true ? true : false}/>
</ScrollView>
</SafeAreaView>
);
}
Example #9
| Source File: LoggedIn.js From id.co.moonlay-eworkplace-mobile with MIT License | 4 votes |
|
render() {
const loadings = this.props.loading
return(
<SafeAreaView style={{backgroundColor:'#F9FCFF'}}>
<ScrollView
alwaysBounceVertical={true}
refreshControl={
<RefreshControl refreshing={this.state.refreshing}
onRefresh={this.onRefresh} />
}>
<View style={{marginLeft:'5%'}}>
<Text style={styles.textUsername}>Hi, {this.state.firstname}!</Text>
<View style={styles.view1}>
<View style={{width:20, height:'100%', alignItems:'center'}}>
<FontAwesome5 name='map-marker-alt' size={16} color='#E74C3C' style={{marginTop:3}}/>
</View>
<View style={{width:'100%', height:20, justifyContent:'center'}}>
<Text style={styles.textLocation}>{this.state.Location}</Text>
</View>
</View>
</View>
<View style={{ flex:1,}}>
<Card containerStyle={styles.card4}>
<Text style={styles.textHour}>
{this.state.hour}
</Text>
<Text style={styles.textDay}>
{this.state.day}, {this.state.monthYear}
</Text>
<View>
<TouchableOpacity style={[this.props.clockin_status === false ? styles.buttonClockIn : styles.buttonClockOut]} onPress={this.ButtonCheck}>
<Text style={styles.textClockin}>{this.state.textButton}</Text>
</TouchableOpacity>
<Text style={[styles.textStatus]}>{this.props.status_Checkin}</Text>
</View>
</Card>
</View>
<View style={{flexDirection:'row', flex:0.5, marginTop:36}}>
<View style={{width:'50%', flex:1}}>
<Card containerStyle={styles.card4}>
<TouchableOpacity style={{flexDirection:'row', padding:0}} onPress={this.movetoWFH}>
<WFH width={35} height={35}/>
<Text style={styles.text1}>Work From {'\n'}Home</Text>
</TouchableOpacity>
</Card>
</View>
<View style={{width:'50%', flex:1}}>
<Card containerStyle={styles.card4}>
<TouchableOpacity style={{flexDirection:'row', paddingBottom:3}} onPress={this.movetoWAC}>
<Buildings width={35} height={35}/>
<Text style={styles.text1}>Work At {'\n'}Client Office</Text>
</TouchableOpacity>
</Card>
</View>
</View>
<View style={{ flex:3, paddingBottom:'5%'}}>
<Text style={styles.textDashboard}>Dashboard</Text>
<Card containerStyle={styles.card1}>
<TouchableOpacity style={styles.baseTouchAble} onPress={this.movetoMeetingsPage}>
<Text style={styles.text2}>Meeting</Text>
<Text style={styles.text3}>Scrum Meetings</Text>
<View style={styles.viewInCard1}>
<FontAwesome5 name='map-marker-alt' size={16} color='#505050'/>
<Text style={styles.text4}>Meeting Room A, Moonlay Office</Text>
</View>
<Image style={{width: '100%'}} source={require('../../image/line.png')}/>
<View style={styles.view2InCard1}>
<View style={{flex:3, flexDirection:'row'}}>
<FontAwesome5 name='clock' size={16} color='#505050' style={{marginTop:1}}/>
<Text style={styles.text5}>02.00 PM</Text>
</View>
<View style={{flex:3}}>
<Text style={styles.textViewDetails}>View Details</Text>
</View>
</View>
</TouchableOpacity>
</Card>
<Card containerStyle={styles.card2}>
<TouchableOpacity style={styles.baseTouchAble}>
<Text style={styles.text2}>Ongoing Task</Text>
<View style={styles.viewInCard2}>
<FontAwesome5 name='circle' size={8} color='#505050' solid/>
<Text style={styles.text6}>Task 01 - 25 Feb 2020</Text>
</View>
<View style={styles.viewInCard2}>
<FontAwesome5 name='circle' size={8} color='#505050' solid/>
<Text style={styles.text6}>Task 01 - 25 Feb 2020</Text>
</View>
<View style={styles.viewInCard2}>
<FontAwesome5 name='circle' size={8} color='#505050' solid/>
<Text style={styles.text6}>Task 01 - 25 Feb 2020</Text>
</View>
<View style={{flexDirection:'row'}}>
<View style={{flex:3}}>
<Text style={styles.text6}>...</Text>
</View>
<View style={{flex:3}}>
<Text style={styles.textViewDetails}>View Details</Text>
</View>
</View>
</TouchableOpacity>
</Card>
<Card containerStyle={styles.card3}>
<TouchableOpacity style={styles.baseTouchAble} onPress={this.movetoTaskDonePage}>
<Text style={styles.text2}>Task Done</Text>
<View style={styles.viewInCard2}>
<FontAwesome5 name='circle' size={8} color='#505050' solid/>
<Text style={styles.text6}>Task 01 - 25 Feb 2020</Text>
</View>
<View style={styles.viewInCard2}>
<FontAwesome5 name='circle' size={8} color='#505050' solid/>
<Text style={styles.text6}>Task 01 - 25 Feb 2020</Text>
</View>
<View style={styles.viewInCard2}>
<FontAwesome5 name='circle' size={8} color='#505050' solid/>
<Text style={styles.text6}>Task 01 - 25 Feb 2020</Text>
</View>
<View style={{flexDirection:'row'}}>
<View style={{flex:3}}>
<Text style={styles.text6}>...</Text>
</View>
<View style={{flex:3}}>
<Text style={styles.textViewDetails}>View Details</Text>
</View>
</View>
</TouchableOpacity>
</Card>
</View>
<Loading visible={loadings === true ? true : false}/>
</ScrollView>
</SafeAreaView>
);
}
Example #10
| Source File: Profile.js From id.co.moonlay-eworkplace-mobile with MIT License | 4 votes |
|
render() {
return(
<SafeAreaView style={styles.container}>
<ScrollView
alwaysBounceVertical={true}
refreshControl={
<RefreshControl refreshing={this.state.refreshing}
onRefresh={this.loadData} />
}>
<View style={styles.view1}>
<Card containerStyle={styles.card}>
<View style={{flexDirection:'row'}}>
<View style={{flex:3, paddingLeft:30}}>
<View style={styles.viewPhoto}>
<View style={{display:'flex'}}>
<View>
<Person width={70} height={70}/>
</View>
</View>
</View>
<Text style={styles.text2}>{this.state.name}</Text>
<Text style={styles.text3}>{this.state.jobTitle}</Text>
</View>
<View>
<TouchableOpacity style={{alignSelf:'flex-end', width:40, height:30, alignItems:'flex-end'}} onPress={this.ChoosePhotoProfile}>
<ProfileEdit width={25} height={25}/>
</TouchableOpacity>
</View>
</View>
</Card>
</View>
<View style={{ flexDirection:'row'}}>
<Card containerStyle={styles.dcard}>
<Text style={styles.text4}>Day Off</Text>
<View style={{flexDirection:'row'}}>
<Text style={styles.text5}>-</Text>
<Text style={styles.text6}>Days {'\n'}Remaining</Text>
</View>
</Card>
<Card containerStyle={styles.dcard}>
<Text style={styles.text4}>Overtime</Text>
<View style={{flexDirection:'row'}}>
<Text style={styles.text5}>--</Text>
<Text style={styles.text7}>Hours</Text>
</View>
</Card>
<Card containerStyle={styles.dcard}>
<TouchableOpacity onPress={this.movetoOverworkForm}>
<Text style={styles.text4}>Overtime</Text>
<Text style={styles.text4}>Form</Text>
<FontAwesome5 name='file-alt' size={20} color='#505050' style={{alignSelf:'flex-end', marginTop:'15%'}}/>
</TouchableOpacity>
</Card>
</View>
<View style={{ width:'100%', alignSelf:'center'}}>
<Text style={styles.text8}>History</Text>
<Text style={styles.textMonth}>{this.state.monthYear}</Text>
</View>
<View style={styles.cardHistory} >
{this.state.history.map((u, i) => {
const clockinTime = moment(u.CheckIn).add(7, 'hours').format('YYYY-MM-DD hh:mm:ss A');
const clockoutTime = moment(u.CheckOut).add(7, 'hours').format('YYYY-MM-DD hh:mm:ss A');
const clockin = clockinTime.substr(11,5)+' '+clockinTime.substr(20,15)
var clockout = '';
if(clockoutTime.substr(11,5) === '07:00' && clockoutTime.substr(20,15) === 'AM'){
clockout = 'Now'
}
else{
clockout = clockoutTime.substr(11,5)+' '+clockoutTime.substr(20,15)
}
return (
<View key={i} style={styles.history}>
<View style={{flex:1, marginLeft:10, justifyContent:'center'}}>
<Text style={styles.Text}>{u.CheckIn.substr(8,2)+' / '+u.CheckIn.substr(5,2) +' / '+u.CheckIn.substr(0,4)}</Text>
</View>
<View style={{flex:1, alignItems:'flex-end', marginRight:10, justifyContent:'center'}}>
<Text style={styles.Text}>{clockin+'-'+clockout}</Text>
</View>
</View>
);
})
}
<Text style={[styles.textStatus,{display: this.state.history.length === 0 ? 'flex':'none'}]}>No History</Text>
</View>
<TouchableOpacity style={{width:'40%', alignSelf:'center'}} onPress={this.movetoClockinHistory}>
<Text style={styles.textVD}>View More History</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.Button} onPress={this.LogOut}>
<Text style={styles.textLogOut}>Log Out</Text>
</TouchableOpacity>
<Loading visible={this.props.loading === true ? true : false}/>
</ScrollView>
</SafeAreaView>
);
}
Example #11
| Source File: WorkInRemote.js From id.co.moonlay-eworkplace-mobile with MIT License | 4 votes |
|
render() {
return (
<View>
<View style={{height:'22%'}}>
<Card containerStyle={{height:'100%'}}>
<View style={{flexDirection : 'row'}}>
<View style={{flex:4}}>
<Text style={{marginBottom: 10, fontWeight: 'bold', fontSize:20}}>
Work From Home
</Text>
<Text style={{marginBottom: 10}}>
Select to complete your attendance
</Text>
</View>
<View style={{flex:1}}>
<Button
icon={<Icon name='arrow-forward' color='#7C7C7C' type='font-awesome5' size={40} />}
type='clear'
buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0,}}
onPress={this.moveToWorkHome}
/>
</View>
</View>
</Card>
</View>
<View style={{height:'22%', paddingTop:10}}>
<Card containerStyle={{height:'100%'}}>
<View style={{flexDirection : 'row'}}>
<View style={{flex:4}}>
<Text style={{marginBottom: 10, fontWeight: 'bold', fontSize:20}}>
Work at Client's Office
</Text>
<Text style={{marginBottom: 10}}>
Select to complete your attendance
</Text>
</View>
<View style={{flex:1}}>
<Button
icon={<Icon name='arrow-forward' color='#7C7C7C' type='font-awesome5' size={40} />}
type='clear'
buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0,}}
onPress={this.moveToWorkClient}
/>
</View>
</View>
</Card>
</View>
<View style={{height:'22%', paddingTop:10}}>
<Card containerStyle={{height:'100%'}}>
<View style={{flexDirection : 'row'}}>
<View style={{flex:4}}>
<Text style={{marginBottom: 10, fontWeight: 'bold', fontSize:20}}>
Day Off
</Text>
<Text style={{marginBottom: 10}}>
Select to take day off and fill the form
</Text>
</View>
<View style={{flex:1}}>
<Button
icon={<Icon name='arrow-forward' color='#7C7C7C' type='font-awesome5' size={40} />}
type='clear'
buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0,}}
onPress={this.moveToDayOff}
/>
</View>
</View>
</Card>
</View>
<View style={{height:'22%', paddingTop:10}}>
<Card containerStyle={{height:'100%'}}>
<View style={{flexDirection : 'row'}}>
<View style={{flex:4}}>
<Text style={{marginBottom: 10, fontWeight: 'bold', fontSize:20}}>
Sick
</Text>
<Text style={{marginBottom: 10}}>
Select if you're sick to be able submit your attendance
</Text>
</View>
<View style={{flex:1}}>
<Button
icon={<Icon name='arrow-forward' color='#7C7C7C' type='font-awesome5' size={40} />}
type='clear'
buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0,}}
onPress={this.moveToSick}
/>
</View>
</View>
</Card>
</View>
</View>
)
}
