native-base#CardItem JavaScript Examples
The following examples show how to use
native-base#CardItem.
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: RecentStatusItem.js From WhatsApp-Clone with MIT License | 6 votes |
|
RecentStatusItem = ({item, hideBorder}) => {
return (
<View transparent style={{elevation: 0, marginRight: -5}}>
<CardItem>
<View style={{marginLeft: -5}}>
<StoryImage hideBorder={hideBorder} source={item.image} />
</View>
<Body
style={{
flexDirection: 'column',
width: 800,
marginLeft: 15,
}}>
<Text
numberOfLines={1}
style={[DEFAULT_STYLES.poppinsSemiBold, styles.userName]}>
{item.userName}
</Text>
<Text
numberOfLines={2}
style={[DEFAULT_STYLES.poppinsLight, styles.userMessage]}>
{item.time}
</Text>
</Body>
<View>
{/* <Text style={(DEFAULT_STYLES.poppinsSemiBold, styles.userTime)}>
{item.time}
</Text> */}
{/* <Icon
style={styles.msgIcon}
name='dots-horizontal'
type='MaterialCommunityIcons'
/> */}
</View>
</CardItem>
</View>
);
}
Example #2
| Source File: EmployeeListItem.js From inventory-management-rn with MIT License | 6 votes |
|
// this.props.onEditPressed(this.props.item.id))}
render() {
const {first_name, last_name, gender, age, email, id} = this.props.item;
return (
<View style={listItemStyles.container}>
<CardItem>
<TouchableOpacity
onPress={() => this.props.onMenuPressed(this.props.item)}>
<Icon
name="trash"
color="grey"
size={22}
style={listItemStyles.icon}
// fill='black'
/>
</TouchableOpacity>
<Text style={listItemStyles.name}>
{first_name} {last_name}
</Text>
<Text style={listItemStyles.gender}>
{gender === 'M' ? 'Male' : gender === 'F' ? 'Female' : 'Other'}
</Text>
<Text style={listItemStyles.email}>{email}</Text>
<Text style={listItemStyles.age}>{age}</Text>
</CardItem>
</View>
);
}
Example #3
| Source File: ExpiryListItem.js From inventory-management-rn with MIT License | 6 votes |
|
render() {
return (
<View style={styles.container}>
<CardItem
style={{
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
alignContent: 'center',
textAlign: 'center',
}}>
<Text style={styles.productHeader}>
{this.props.item.name}
</Text>
<Text style={styles.itemsHeader}>
{this.props.item.quantity}
</Text>
<Text style={styles.daysHeader}>
{this.props.item.daysLeft}
</Text>
</CardItem>
</View>
);
}
Example #4
| Source File: HistoryListItem.js From inventory-management-rn with MIT License | 6 votes |
|
render() {
return (
<View style={listItemStyles.container}>
<CardItem
style={{
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
alignContent: 'center',
textAlign: 'center',
}}>
<Text style={listItemStyles.type}>
{this.props.item.in_or_out == 'In' ? 'Buy' : 'Sell'}
</Text>
<Text style={listItemStyles.product}>{this.props.item.name}</Text>
<Text style={listItemStyles.items}>{this.props.item.quantity}</Text>
<Text style={listItemStyles.price}>{this.props.item.rate}</Text>
<Icon name="download" size={30} color="black" style={{ flex: 0.1 }} onPress={() => { this.downloadFile(this.props.item.id) }} />
</CardItem>
</View>
);
}
Example #5
| Source File: InventoryListItem.js From inventory-management-rn with MIT License | 6 votes |
|
render() {
return (
<View style={listItemStyles.container}>
<CardItem>
<TouchableOpacity
onPress={() => this.props.onMenuPressed(this.props.item)}>
<Icon
name="menu"
color="grey"
size={25}
style={listItemStyles.icon}
/>
</TouchableOpacity>
<View style={{flexDirection: 'row', justifyContent: 'space-evenly'}}>
<Text style={listItemStyles.name}>{this.props.item.name}</Text>
<Text style={listItemStyles.items}>{this.props.item.quantity}</Text>
<Text style={listItemStyles.price}>
{Math.round(this.props.item.avg_cost_price)}
</Text>
</View>
{/* <View style={listItemStyles.rightButtons}>
<TouchableOpacity onPress={() => (this.props.onEditPressed(this.props.item.id))}>
<Text style={listItemStyles.rightButtonText}>
Edit |
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => (this.props.onDeletePressed(this.props.item.id))}>
<Text style={listItemStyles.rightButtonText}>
{' '}Delete
</Text>
</TouchableOpacity>
</View> */}
</CardItem>
</View>
);
}
Example #6
| 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 #7
| Source File: ContactsHeaderView.js From WhatsApp-Clone with MIT License | 5 votes |
|
ContactsHeaderView = ({item, navigation}) => {
return (
<View style={{elevation: 0}}>
<CardItem style={styles.parentView}>
<View style={{flexDirection: 'row'}}>
<Icon
name="arrow-left"
type="MaterialCommunityIcons"
style={styles.backIcon}
onPress={() => navigation.goBack()}
/>
<Body
style={{
flexDirection: 'column',
marginLeft: 7,
}}>
<Text
numberOfLines={1}
style={[DEFAULT_STYLES.poppinsSemiBold, styles.userName]}>
Select contact
</Text>
<Text
numberOfLines={2}
style={[DEFAULT_STYLES.poppinsLight, styles.userMessage]}>
{item} contacts
</Text>
</Body>
<View style={{flexDirection: 'row', justifyContent: 'space-evenly'}}>
<Icon
name="dots-vertical"
type="MaterialCommunityIcons"
style={styles.menuIcons}
/>
</View>
</View>
</CardItem>
</View>
);
}
Example #8
| 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 #9
| Source File: CallsViewItem.js From WhatsApp-Clone with MIT License | 5 votes |
|
CallsViewItem = ({item, hideBorder = true}) => {
return (
<View transparent style={{elevation: 0, marginRight: -5}}>
<CardItem>
<View style={{marginLeft: -5}}>
<Thumbnail source={item.profile} />
{/* <StoryImage hideBorder={hideBorder} source={item.profile} /> */}
</View>
<Body
style={{
flexDirection: 'column',
width: 800,
marginLeft: 15,
}}>
<Text
numberOfLines={1}
style={[DEFAULT_STYLES.poppinsSemiBold, styles.userName]}>
{item.name}
</Text>
<View style={{flexDirection: 'row'}}>
<Icon
style={{
fontSize: 20,
marginTop: 3,
color: item.isMissed ? RED : LIGHT_GREEN,
marginRight: 5,
}}
type="MaterialCommunityIcons"
name={item.msgIcon}
/>
<Text
numberOfLines={2}
style={[DEFAULT_STYLES.poppinsLight, styles.userMessage]}>
{item.time}
</Text>
</View>
</Body>
<View>
{/* <Text style={(DEFAULT_STYLES.poppinsSemiBold, styles.userTime)}>
{item.time}
</Text> */}
<Icon
style={styles.msgIcon}
name={item.callTypeIcon}
type="MaterialIcons"
/>
</View>
</CardItem>
</View>
);
}
Example #10
| 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 #11
| 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 #12
| 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 #13
| Source File: InventoryListScreen.js From inventory-management-rn with MIT License | 4 votes |
|
InventoryListScreen = ({navigation}) => {
const [inventoryList, setInventoryList] = useState([]);
const [modalVisible, setModalVisible] = useState(false);
const [updateSellPrice, setUpdateSellPrice] = useState('');
const [updateName, setUpdateName] = useState('');
const [upperLimit, setUpperLimit] = useState('');
const [lowerLimit, setLowerLimit] = useState('');
const [updateProd, setUpdateProd] = useState({});
const [limit, setLimit] = useState(8);
const [offset, setOffset] = useState(0);
const [end, setEnd] = useState(0);
const [isLoading, setIsLoading] = useState(true);
const [isSearch, setIsSearch] = useState(false);
useEffect(() => {
getInventoryList(0);
}, []);
const getInventoryList = async offs => {
console.log(offs);
setIsLoading(false);
const auth_key = await AsyncStorage.getItem('auth_key');
fetch(
`http://chouhanaryan.pythonanywhere.com/api/productlist/?limit=${limit}&offset=${offs}`,
{
method: 'GET',
headers: {
Authorization: `Token ${auth_key}`,
},
},
)
.then(res => res.json())
.then(data => {
setEnd(data.count);
console.log(data.previous, 'prev');
if (data.previous != null) {
const tempInventoryList = [...inventoryList, ...data.results];
if (data.results.length !== 0) {
setInventoryList(tempInventoryList);
}
} else {
if (data.results.length !== 0) {
setInventoryList(data.results);
}
}
})
.catch(err => console.log(err));
};
const deleteInventoryItem = async inventoryItem => {
const auth_key = await AsyncStorage.getItem('auth_key');
await fetch(
`http://chouhanaryan.pythonanywhere.com/api/productlist/${
inventoryItem.id
}/`,
{
method: 'DELETE',
headers: {Authorization: `Token ${auth_key}`},
},
)
.then(() => {
setOffset(0);
getInventoryList(0);
console.log('deleted successfully!');
})
.catch(e => {
console.log(e);
});
};
const performSearch = async search => {
console.log(search);
if (isSearch) {
const auth_key = await AsyncStorage.getItem('auth_key');
fetch(
'http://chouhanaryan.pythonanywhere.com/api/prodsearch/?search=' +
search,
{
method: 'GET',
headers: {
Authorization: `Token ${auth_key}`,
},
},
)
.then(response => response.json())
.then(response => {
console.log(response, 'w');
console.log(inventoryList, 'h');
setInventoryList(response);
})
.catch(error => {
console.log(error);
});
}
};
const updateProductPost = async () => {
let formData = new FormData();
const looseVal = updateProd.loose === true ? 'True' : 'False';
formData.append('loose', looseVal);
formData.append('upper', upperLimit);
formData.append('lower', lowerLimit);
formData.append('name', updateName);
formData.append('latest_selling_price', updateSellPrice);
const auth_key = await AsyncStorage.getItem('auth_key');
console.log(formData,"form");
fetch(
`http://chouhanaryan.pythonanywhere.com/api/update/${updateProd.id}/`,
{
method: 'POST',
headers: {
Authorization: `Token ${auth_key}`,
},
body: formData,
},
)
.then(res => res.json())
.then(data => {
console.log(data);
setOffset(0);
getInventoryList(0);
Alert.alert('Success!', 'Product Updated');
})
.catch(err => console.log(err));
setUpdateName('');
setUpdateSellPrice(null);
};
const handleReach = () => {
if (!isSearch) {
false;
const newOff = offset + limit;
if (newOff < end) {
setIsLoading(true);
setOffset(newOff);
console.log(newOff, limit, end);
getInventoryList(newOff);
}
}
};
const onMenuPressed = inventoryItem => {
console.log(inventoryItem,"Item");
Alert.alert(
`${inventoryItem.name} (Qty: ${inventoryItem.quantity})`,
`Rs. ${inventoryItem.avg_cost_price}`,
[
{
text: 'Update',
onPress: () => {
setUpdateProd(inventoryItem);
setUpdateName(inventoryItem.name);
if (inventoryItem.latest_selling_price) {
setUpdateSellPrice(inventoryItem.latest_selling_price.toString());
} else {
setUpdateSellPrice('Not assigned');
}
console.log(inventoryItem.latest_selling_price);
setUpperLimit(inventoryItem.upper_limit.toString());
setLowerLimit(inventoryItem.lower_limit.toString());
setModalVisible(true);
},
},
{
text: 'Delete',
onPress: () => {
deleteInventoryItem(inventoryItem);
},
},
{
text: 'Cancel',
// onPress: () => console.log('Cancel Pressed'),
style: 'cancel',
},
],
);
};
var radio_props = [
{label: 'Loose', value: updateProd.loose},
{label: 'Packed', value: !updateProd.loose},
];
return (
<Container style={{backgroundColor: '#F3F9FB'}}>
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert('No changes made');
setModalVisible(!modalVisible);
}}>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<Text style={styles.product_titles}>Update Product</Text>
<View style={{alignItems: 'flex-start', marginVertical: 20}}>
<Item floatingLabel style={styles.inputBox}>
<Label style={styles.label}>Product Name</Label>
<Input
style={styles.inputArea}
onChangeText={value => {
setUpdateName(value);
}}
value={updateName}
/>
</Item>
<Item floatingLabel style={styles.inputBox}>
<Label style={styles.label}>Selling Price</Label>
<Input
style={styles.inputArea}
value={updateSellPrice}
onChangeText={value => {
console.log(typeof(value))
setUpdateSellPrice(value);
}}
keyboardType="numeric"
/>
</Item>
</View>
<View style={{paddingLeft: 10}}>
<Text
style={{
marginTop: 10,
marginBottom: 3,
fontSize: 17,
fontWeight: '800',
}}>
Recommended Limit
</Text>
<NumericInput
value={parseInt(upperLimit)}
onChange={value => {
setUpperLimit(value.toString());
}}
totalWidth={150}
totalHeight={35}
minValue={0}
maxValue={99999}
onLimitReached={(isMAx, msg) => console.log(msg)}
step={1}
iconStyle={{fontSize: 15, color: '#434A5E'}}
inputStyle={{fontSize: 18, color: '#434A5E'}}
valueType="real"
borderColor="#C7CBD6"
rightButtonBackgroundColor="#C7CBD6"
leftButtonBackgroundColor="#C7CBD6"
/>
<Text
style={{
marginTop: 20,
marginBottom: 3,
fontSize: 17,
fontWeight: '800',
}}>
Critical Limit
</Text>
<NumericInput
value={parseInt(lowerLimit)}
onChange={value => {
console.log(typeof(value))
setLowerLimit(value.toString());
}}
totalWidth={150}
totalHeight={35}
minValue={0}
maxValue={99999}
onLimitReached={(isMAx, msg) => console.log(msg)}
step={1}
iconStyle={{fontSize: 15, color: '#434A5E'}}
inputStyle={{fontSize: 18, color: '#434A5E'}}
valueType="real"
borderColor="#C7CBD6"
rightButtonBackgroundColor="#C7CBD6"
leftButtonBackgroundColor="#C7CBD6"
/>
</View>
<Text
style={{
marginTop: 30,
fontSize: 17,
fontWeight: '800',
paddingLeft: 10,
}}>
Type
</Text>
<RadioForm
radio_props={radio_props}
labelHorizontal={true}
formHorizontal={true}
buttonColor={'#434A5E'}
labelColor={'#434A5E'}
initial={(updateProd.loose===true)?0:1}
labelStyle={{marginRight: 20}}
style={{paddingLeft: 10, marginTop: 8}}
onPress={value => {
updateProd.loose = value;
setUpdateProd(updateProd);
}}
/>
<TouchableOpacity
style={styles.addEmployeeButton}
// onPress={() => navigation.navigate('AddEmployee')}
onPress={() => {
updateProductPost();
setModalVisible(!modalVisible);
}}>
<Text style={styles.addEmployeeButtonText}>Update</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
<Content>
{/* the entire outerpart */}
<Body style={styles.listContainer}>
{/* the header of table */}
<TextInput
underlineColorAndroid="transparent"
style={styles.inputStyle}
placeholder=" Search Product"
placeholderTextColor="gray"
multiline={false}
onEndEditing={e => {
console.log(e.nativeEvent.text);
if (e.nativeEvent.text === '') {
setOffset(0);
console.log('bb');
getInventoryList(0);
}
}}
onChangeText={search => {
if (search === '') {
setIsSearch(false);
setOffset(0);
console.log('h');
setIsLoading(true);
setInventoryList([]);
getInventoryList(0);
} else {
setIsSearch(true);
setInventoryList([]);
setTimeout(() => {
performSearch(search);
}, 1500);
}
}}
/>
<View style={styles.tableHeader}>
<CardItem
style={{
backgroundColor: 'rgba(255,255,255,0)',
flexDirection: 'row',
justifyContent: 'space-evenly',
paddingLeft: 40,
}}>
<Text style={styles.productNameHeader}>Product</Text>
<Text style={styles.itemsHeader}>Items</Text>
<Text style={styles.priceHeader}>Price</Text>
</CardItem>
</View>
<FlatList
style={styles.flatlist}
data={inventoryList}
extraData={inventoryList}
renderItem={({item}) => (
<InventoryListItem
onMenuPressed={data => onMenuPressed(data)}
item={item}
/>
)}
keyExtractor={item => item.id}
onEndReached={!isSearch && handleReach}
onEndReachedThreshold={!isSearch && 0.2}
ListFooterComponent={() => {
if (isLoading) {
return <ActivityIndicator size="large" color="#828282" />;
}
return null;
}}
/>
</Body>
</Content>
</Container>
);
}
Example #14
| 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 #15
| Source File: ExpiryScreen.js From inventory-management-rn with MIT License | 4 votes |
|
ExpiryScreen = ({navigation}) => {
const [expiryList, setExpiryList] = useState([]);
// true when waiting for an response from API
const [isLoading, setIsLoading] = useState(false);
const [count, setCount] = useState(0);
const apiFetch = async () => {
try {
const auth_key = await AsyncStorage.getItem('auth_key');
console.log(auth_key);
fetch('http://chouhanaryan.pythonanywhere.com/api/explist/', {
method: 'GET',
headers: {
Authorization: `Token ${auth_key}`,
},
})
.then(res => res.json())
.then(data => {
console.log(data);
setCount(data.count);
const list = data.results.map(val => ({
name: val.Product,
quantity: val['No. of items'],
daysLeft: val['Days left'],
}));
setExpiryList(list);
})
.catch(err => console.log(err));
} catch (e) {
console.log(e);
}
};
useEffect(() => {
console.disableYellowBox = true;
apiFetch();
}, []);
const [refreshing, setRefreshing] = React.useState(false);
const onRefresh = React.useCallback(() => {
setRefreshing(true);
apiFetch();
setRefreshing(false)
}, []);
return (
<Container style={{backgroundColor: '#F3F9FB'}}>
<Text style={{fontWeight: 'bold', fontSize: 20, alignSelf: 'center'}}>
Items expiring in next 3 days.
</Text>
<Content style={{marginTop: -10}}>
{/* the entire outerpart */}
<Body style={styles.listContainer}>
{/* the header of table */}
<View style={styles.tableHeader}>
<CardItem
style={{
backgroundColor: 'rgba(255,255,255,0)',
justifyContent: 'center',
}}>
<Text style={styles.productHeader}>Product</Text>
<Text style={styles.itemsHeader}>Items</Text>
<Text style={styles.daysHeader}>Days Left</Text>
</CardItem>
</View>
{/* the inner list */}
{count>0?( <ScrollView
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
}>
<View>
<FlatList
style={styles.flatlist}
data={expiryList}
// scrollEnabled={true}
renderItem={({item}) => <ExpiryListItem item={item} />}
/>
</View>
</ScrollView>):(null)}
</Body>
</Content>
</Container>
);
}
Example #16
| Source File: EmployeeListScreen.js From inventory-management-rn with MIT License | 4 votes |
|
EmployeeListScreen = ({navigation}) => {
const [employeeList, setEmployeeList] = useState([]);
const [isReady, setReady] = useState(false);
const [currentUserDetails, setCurrentUserDetails] = useState({});
useEffect(() => {
getCurrentUserInfo();
}, []);
useEffect(() => {
getUserList();
}, [employeeList]);
const getCurrentUserInfo = async () => {
const auth_key = await AsyncStorage.getItem('auth_key');
fetch('http://chouhanaryan.pythonanywhere.com/auth/users/me/', {
method: 'GET',
headers: {
Authorization: `Token ${auth_key}`,
},
})
.then(res => res.json())
.then(data => {
// console.log(data)
setCurrentUserDetails(data); //set user details to state
setReady(true);
//if logged in user is a staff, only then he can view the user list
if (data.is_staff) {
getUserList();
}
})
.catch(err => console.log(err));
};
const getUserList = async () => {
const auth_key = await AsyncStorage.getItem('auth_key');
fetch('http://chouhanaryan.pythonanywhere.com/auth/users/', {
method: 'GET',
headers: {
Authorization: `Token ${auth_key}`,
},
})
.then(res => res.json())
.then(data => {
// console.log(JSON.stringify(data))
setEmployeeList(data);
})
.catch(err => console.log(err));
};
const deleteEmployee = async formData => {
const auth_key = await AsyncStorage.getItem('auth_key');
fetch('http://chouhanaryan.pythonanywhere.com/auth/user_delete/', {
method: 'POST',
headers: {Authorization: `Token ${auth_key}`},
body: formData,
})
.then(ToastAndroid.show('Employee Deleted !', ToastAndroid.SHORT))
.then(res => console.log('Employee Deleted!'))
.catch(err => console.log(err));
};
const onMenuPressed = employeeItem => {
Alert.alert(
`${employeeItem.first_name} ${employeeItem.last_name}`,
`${employeeItem.email}`,
[
{
text: 'Delete',
onPress: () => {
let formData = new FormData();
formData.append('email', employeeItem.email);
deleteEmployee(formData);
},
},
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel',
},
],
);
};
if (isReady) {
if (currentUserDetails.is_staff) {
return (
<Container style={{backgroundColor: '#F3F9FB'}}>
<HeaderView navigation={navigation} title={'Employee Details'} />
<Content>
{/* the entire outerpart */}
<Body style={styles.listContainer}>
{/* the header of table */}
<View style={styles.tableHeader}>
<CardItem style={{backgroundColor: 'rgba(255,255,255,0)'}}>
<Text style={styles.nameHeader}>Name</Text>
<Text style={styles.genderHeader}>Gender</Text>
<Text style={styles.emailHeader}>Email</Text>
<Text style={styles.ageHeader}>Age</Text>
</CardItem>
</View>
{/* the inner list */}
<ScrollView>
<View>
<FlatList
style={styles.flatlist}
data={employeeList}
renderItem={({item}) => (
<EmployeeListItem
onMenuPressed={data => onMenuPressed(data)}
item={item}
/>
)}
keyExtractor={item => item.id}
/>
</View>
</ScrollView>
{/* the add employee button */}
<TouchableOpacity
style={styles.addEmployeeButton}
onPress={() => navigation.navigate('AddEmployee', {getUserList})}>
<Icon name="plus" color="white" size={25} />
<Text style={styles.addEmployeeButtonText}>Add Employee</Text>
</TouchableOpacity>
</Body>
</Content>
</Container>
);
} else if (!currentUserDetails.is_staff) {
return (
<Container style={{backgroundColor: '#F3F9FB'}}>
<HeaderView navigation={navigation} title={'Employee Details'} />
<Content>
<Body
style={{
justifyContent: 'center',
alignItems: 'center',
padding: 30,
marginVertical: 250,
}}>
<Text style={{fontSize: 24, lineHeight: 45, textAlign: 'center'}}>
You do not have permission to View, Create or Delete Employees!
</Text>
</Body>
</Content>
</Container>
);
}
} else {
return (
<Container style={{backgroundColor: '#F3F9FB'}}>
<HeaderView navigation={navigation} title={'Employee Details'} />
<Content>
<Body style={{justifyContent: 'center'}}>
<ActivityIndicator size="large" color="#000" />
</Body>
</Content>
</Container>
);
}
}
Example #17
| Source File: ChatRoomHeaderView.js From WhatsApp-Clone with MIT License | 4 votes |
|
ChatRoomHeaderView = ({item, navigation, isNewChat}) => {
// console.log('isNewChat =>', isNewChat);
const [userType, setUserType] = useState('');
const [displayLastSeen, setDisplayLastSeen] = useState('');
const [apiLastSeen, setApiLastSeen] = useState('');
let data = item.chat[0];
useEffect(() => {
populateUserType();
getUserLastSeen();
listenUserLastSeen();
}, []);
useEffect(() => {
if (apiLastSeen != '') {
calcLastSeen(apiLastSeen);
}
}, [apiLastSeen]);
const populateUserType = async () => {
let userType = await getUserType(item);
setUserType(userType);
};
async function getUserLastSeen() {
let userId = await getLocalData(constants.USER_ID);
// This to get id of the other user
let id = data.userId === userId ? data.chatId : data.userId;
let request = {id: id};
let res = getLastSeenUser(request);
res
.then(lastSeen => {
if (lastSeen) {
// console.log('User Last Seen ==> ', JSON.stringify(lastSeen));
setApiLastSeen(lastSeen.data.lastSeen[0]);
}
})
.catch(err => {
console.log('User Last Seen ==> ', err);
});
}
function listenUserLastSeen() {
socket.on(constants.LAST_SEEN, async status => {
// console.log('App Status == ', status);
let newStatus = {
userId: status.userId,
userName: status.userName,
status: status.status,
lastSeen: status.lastSeen,
};
let id = await getLocalData(webConstants.USER_ID);
if (status.userId != id) {
calcLastSeen(newStatus);
} else {
// setDisplayLastSeen("");
}
});
sendPageLoadStatus();
}
async function calcLastSeen(lastSeen) {
if (lastSeen) {
if (lastSeen.userId === data.userId || lastSeen.userId === data.chatId) {
let time =
lastSeen.status === 'Offline'
? `Last seen at ${getDateTimeInFormat(lastSeen.lastSeen)}`
: lastSeen.status;
setDisplayLastSeen(time);
} else if (apiLastSeen != '') {
let time = `Last seen at ${getDateTimeInFormat(apiLastSeen.lastSeen)}`;
setDisplayLastSeen(time);
}
} else {
// User last seen not available yet
setApiLastSeen('');
setDisplayLastSeen('');
}
}
// function calcLastSeen(lastSeen) {
// if (lastSeen) {
// if (lastSeen.userId === data.userId || lastSeen.userId === data.chatId) {
// getLocalData(constants.USER_ID)
// .then(id => {
// if (lastSeen.userId != id) {
// let time =
// lastSeen.status === 'Offline'
// ? `Last seen at ${getDateTimeInFormat(lastSeen.lastSeen)}`
// : lastSeen.status;
// setDisplayLastSeen(time);
// } else if (apiLastSeen != '' && lastSeen != '') {
// let time = `Last seen at ${getDateTimeInFormat(
// lastSeen.lastSeen,
// )}`;
// setDisplayLastSeen(time);
// } else if (apiLastSeen != '') {
// let time = `Last seen at ${getDateTimeInFormat(
// apiLastSeen.lastSeen,
// )}`;
// setDisplayLastSeen(time);
// } else {
// setDisplayLastSeen('');
// }
// })
// .catch(() => {
// if (apiLastSeen != '' && lastSeen != '') {
// let time = `Last seen at ${getDateTimeInFormat(
// lastSeen.lastSeen,
// )}`;
// setDisplayLastSeen(time);
// } else if (apiLastSeen != '') {
// let time = `Last seen at ${getDateTimeInFormat(
// apiLastSeen.lastSeen,
// )}`;
// setDisplayLastSeen(time);
// } else {
// setDisplayLastSeen('');
// }
// });
// } else if (apiLastSeen != '') {
// let time = `Last seen at ${getDateTimeInFormat(apiLastSeen.lastSeen)}`;
// setDisplayLastSeen(time);
// }
// } else {
// // User last seen not available yet
// setApiLastSeen('');
// setDisplayLastSeen('');
// }
// }
return (
<View style={{elevation: 0}}>
<CardItem style={styles.parentView}>
<View style={{flexDirection: 'row'}}>
<Icon
name="arrow-left"
type="MaterialCommunityIcons"
style={styles.backIcon}
onPress={() => navigation.goBack()}
/>
<Thumbnail
source={
!data.chatImage && data.chatImage != ''
? {isStatic: true, uri: data.chatImage}
: USER
}
style={styles.profileIcon}
/>
<Body
style={{
flexDirection: 'column',
marginLeft: 10,
}}>
<Text
numberOfLines={1}
style={
displayLastSeen != '' ? styles.userName : styles.centerUserName
}>
{userType == constants.FRIEND ? data.userName : data.chatName}
</Text>
{displayLastSeen != '' && (
<Text
numberOfLines={1}
ellipsizeMode="tail"
style={[DEFAULT_STYLES.poppinsLight, styles.userMessage]}>
{/* Last seen at {getDateTimeInFormat(data.chatTime)} */}
{displayLastSeen}
</Text>
)}
</Body>
<View style={{flexDirection: 'row', justifyContent: 'space-evenly'}}>
<Icon
name="video"
type="MaterialCommunityIcons"
style={styles.menuIcons}
/>
<Icon
name="phone"
type="MaterialCommunityIcons"
style={styles.menuIcons}
/>
<Icon
name="dots-vertical"
type="MaterialCommunityIcons"
style={styles.menuIcons}
/>
</View>
</View>
</CardItem>
</View>
);
}
Example #18
| Source File: History.js From inventory-management-rn with MIT License | 4 votes |
|
HistoryScreen = ({navigation}) => {
const [transactionlist, setTransactionList] = useState([]);
const apiFetch = async () => {
try {
const auth_key = await AsyncStorage.getItem('auth_key');
console.log(auth_key);
fetch('http://chouhanaryan.pythonanywhere.com/api/transactions/', {
method: 'GET',
headers: {
Authorization: `Token ${auth_key}`,
},
})
.then(res => res.json())
.then(data => {
console.log(data);
setTransactionList(data);
console.log(transactionlist);
})
.catch(err => console.log(err));
} catch (e) {
console.log(e);
}
};
useEffect(() => {
console.disableYellowBox = true;
apiFetch();
}, []);
const [refreshing, setRefreshing] = React.useState(false);
const onRefresh = React.useCallback(() => {
setRefreshing(true);
apiFetch();
setRefreshing(false)
}, []);
return (
<Container style={{backgroundColor: '#F3F9FB'}}>
<Content>
{/* the entire outerpart */}
<Body style={styles.listContainer}>
{/* the header of table */}
<View style={styles.tableHeader}>
<CardItem
style={{
backgroundColor: 'rgba(255,255,255,0)',
justifyContent: 'center',
}}>
{/* <Text style={styles.dateHeader}>Date</Text> */}
{/* <Text style={styles.typeHeader}>Type</Text>
<Text style={styles.productHeader}>Product</Text>
<Text style={styles.noOfItemsHeader}>Items</Text>
<Text style={styles.priceHeader}>Price</Text> */}
<Text style={styles.typeHeader}>Type</Text>
<Text style={styles.productHeader}>Product</Text>
<Text style={styles.noOfItemsHeader}>Quanity</Text>
<Text style={styles.priceHeader}>Rate</Text>
</CardItem>
</View>
{/* the inner list */}
<ScrollView
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
}>
<View>
<FlatList
initialNumToRender={10}
style={styles.flatlist}
data={transactionlist.reverse()}
// scrollEnabled={true}
renderItem={({item}) => <HistoryListItem item={item} />}
keyExtractor={item => item.id}
/>
</View>
</ScrollView>
</Body>
</Content>
</Container>
);
}
Example #19
| 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 #20
| 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>
);
}
