native-base#Body JavaScript Examples
The following examples show how to use
native-base#Body.
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: SplashScreen.js From inventory-management-rn with MIT License | 6 votes |
|
render() {
return (
<Container>
<Content>
<Body style={styles.container}>
<Image
style={{
width: 374,
height: 300,
justifyContent: 'center',
marginVertical: 40,
resizeMode: 'cover',
}}
source={require('../Images/store-inventory-logo.jpg')}
/>
</Body>
</Content>
</Container>
);
}
Example #2
| 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 #3
| Source File: SettingsScreen.js From pandoa with GNU General Public License v3.0 | 6 votes |
|
render() {
return (
<Container>
<Header>
<Body>
<Title>Settings</Title>
</Body>
</Header>
<Content>
<List>
<ListItem
first
onPress={() => this.props.navigation.navigate("Billing")}
>
<Text>Notifications</Text>
</ListItem>
<ListItem>
<Text>User Settings</Text>
</ListItem>
<ListItem>
<Text>Billing</Text>
</ListItem>
<ListItem onPress={this.logout}>
<Text style={styles.logout}>Logout</Text>
</ListItem>
</List>
</Content>
</Container>
);
}
Example #4
| Source File: SummaryScreen.js From discovery-mobile-ui with MIT License | 6 votes |
|
SummaryScreen = () => (
<SafeAreaView style={styles.root}>
<StatusBar backgroundColor={Colors.primary} barStyle="dark-content" />
<Header style={styles.header}>
<Body>
<Title style={styles.headerText}>Summary</Title>
</Body>
</Header>
<Tab.Navigator
initialRouteName="Records"
style={styles.tabs}
tabBarOptions={{
labelStyle: styles.tabText,
indicatorStyle: {
backgroundColor: Colors.primary,
},
}}
>
<Tab.Screen
name="Records"
component={RecordsSummary}
/>
<Tab.Screen
name="Providers"
component={ProvidersSummary}
/>
</Tab.Navigator>
</SafeAreaView>
)
Example #5
| Source File: ProfileScreen.js From discovery-mobile-ui with MIT License | 6 votes |
|
ProfileScreen = () => (
<SafeAreaView style={styles.root}>
<StatusBar backgroundColor={Colors.primary} barStyle="dark-content" />
<Header style={styles.header}>
<Body>
<Title style={styles.headerText}>Profile</Title>
</Body>
</Header>
<UserInfo />
<ScrollView style={styles.scrollContainer}>
<Demographics />
<Data />
</ScrollView>
<View style={styles.logoutContainer}>
<Logout>
<TouchableOpacity style={styles.logout}>
<Text style={styles.logoutText}>
Logout
</Text>
</TouchableOpacity>
</Logout>
</View>
</SafeAreaView>
)
Example #6
| Source File: DrawerScreen2.js From inventory-management-rn with MIT License | 6 votes |
|
MyHeader = ({ navigation }) => {
return (
<Header style={{ backgroundColor: '#4796BD', flexDirection: 'row' }}>
<Left>
<TouchableOpacity onPress={() => navigation.openDrawer()}>
<Icon name="menu" color="white" size={35} />
</TouchableOpacity>
</Left>
<Body>
<Text style={{ fontSize: 21, color: '#fff' }}>Drawer</Text>
</Body>
<Right>
<TouchableOpacity onPress={() => { }}>
<Icon name="user" color="white" size={35} />
</TouchableOpacity>
</Right>
</Header>
);
}
Example #7
| Source File: HeaderView.js From inventory-management-rn with MIT License | 6 votes |
|
HeaderView = ({ navigation,title }) => {
return (
<Header style={{ backgroundColor: '#4796BD', flexDirection: 'row' }} androidStatusBarColor="#247095" >
<Left>
<TouchableOpacity onPress={() => navigation.toggleDrawer()}>
<Icon name="menu" color="white" size={35} />
</TouchableOpacity>
</Left>
<Body>
<Text style={{fontSize: 21, color: '#fff'}}>{title}</Text>
</Body>
<Right>
<TouchableOpacity onPress={() => navigation.replace('ProfilePage')}>
<Icon name="user" color="white" size={35} />
</TouchableOpacity>
</Right>
</Header>
);
}
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: index.js From aws-appsync-refarch-offline with MIT No Attribution | 5 votes |
|
Receipt = ({ route }) => {
const { order } = route.params;
const lineItemList = order.lineItems.map(lineItem => (
<ListItem icon key={lineItem.id}>
<Left>
<Text>{lineItem.qty}</Text>
</Left>
<Body>
<Text>{lineItem.description}</Text>
</Body>
<Right>
<Text>${lineItem.total.toFixed(2)}</Text>
</Right>
</ListItem>
));
return (
<Container>
<Content>
<List>
<ListItem itemDivider>
<Text> </Text>
</ListItem>
<ListItem>
<Body>
<Text>Order Number</Text>
<Text note>{order.id}</Text>
</Body>
</ListItem>
<ListItem>
<Body>
<Text>Date</Text>
<Text note>{moment(order.createdAt).format('YYYY-MM-DD hh:mm A')}</Text>
</Body>
</ListItem>
<ListItem itemDivider>
<Text> </Text>
</ListItem>
{lineItemList}
<ListItem itemDivider>
<Text> </Text>
</ListItem>
<ListItem>
<Body>
<Text style={styles.subtotalsTxt}>Subtotal</Text>
</Body>
<Right>
<Text>${order.subtotal.toFixed(2)}</Text>
</Right>
</ListItem>
<ListItem>
<Body>
<Text style={styles.subtotalsTxt}>Tax</Text>
</Body>
<Right>
<Text>${order.tax.toFixed(2)}</Text>
</Right>
</ListItem>
<ListItem>
<Body>
<Text style={styles.subtotalsTxt}>Total</Text>
</Body>
<Right>
<Text>${order.total.toFixed(2)}</Text>
</Right>
</ListItem>
<ListItem itemDivider>
<Text> </Text>
</ListItem>
</List>
</Content>
</Container>
);
}
Example #10
| 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 #11
| 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 #12
| 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 #13
| 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 #14
| 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 #15
| Source File: index.js From aws-appsync-refarch-offline with MIT No Attribution | 5 votes |
|
OrderList = ({ orders, onSelectOrder }) => {
function onPress(orderId) {
if (onSelectOrder) {
onSelectOrder(orderId);
}
}
const ordersByDay = _.groupBy(orders, order => moment(order.createdAt).format('YYYY-MM-DD'));
const days = _.keys(ordersByDay);
const ordersByDayList = days.map(day => {
const sorted = ordersByDay[day].sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
const orderList = sorted.map(order => (
<ListItem thumbnail button key={order.id} onPress={() => onPress(order.id)}>
<Body>
<Text style={styles.orderTitle}>
{moment(order.createdAt).format('hh:mm A')}
</Text>
<Text note>{order.id}</Text>
</Body>
<Right>
<Text note>
${order.total.toFixed(2)}
</Text>
<Icon name="arrow-forward" />
</Right>
</ListItem>
));
const sectionTitle = (
<ListItem itemDivider key={day}>
<Text>{moment(day).format('MMM Do, YYYY')}</Text>
</ListItem>
);
return [sectionTitle, ...orderList];
});
return (
<List>
{ordersByDayList}
</List>
);
}
Example #16
| Source File: index.js From pandoa with GNU General Public License v3.0 | 5 votes |
|
function WarningList({ navigation, setDetailTrigger, warnings }) {
const filteredWarnings = warnings.filter(
e => e.matches && e.matches.length >= 1
);
if (filteredWarnings.length === 0) {
return (
<View style={styles.introWrapper}>
<SoapImage width={220} style={styles.image} />
<Text style={styles.title}>No warning</Text>
<Text style={styles.subTitle}>
There is currently no contact reported.
</Text>
</View>
);
}
return (
<List>
{filteredWarnings.map((e, i) => {
const geocode =
e.position.geocode && e.position.geocode[0]
? e.position.geocode[0]
: {};
return (
<ListItem key={i} onPress={() => setDetailTrigger(e)}>
<Body>
<Text>{e.title}</Text>
<Text numberOfLines={1} style={styles.date}>
{new Date(e.position.time).toLocaleDateString("de-DE", options)}
</Text>
<Text note style={styles.location}>
{geocode.name}, {geocode.postalCode} {geocode.city}
</Text>
<Text note style={styles.time}>
{e.matches &&
e.matches.length >= 1 &&
contactLengthText(e.duration)}
</Text>
</Body>
<Right>
<Text
style={[
styles.right,
{
color:
e.duration > 10
? commonColor.brandDanger
: commonColor.brandWarning
}
]}
>
{e.matches &&
e.matches.length >= 1 &&
contactLengthText(e.duration, "short")}
</Text>
</Right>
</ListItem>
);
})}
</List>
);
}
Example #17
| Source File: index.js From aws-appsync-refarch-offline with MIT No Attribution | 5 votes |
|
function Catalog(props) {
const [loading, setLoading] = useState(false);
const [products, setProducts] = useState([]);
const order = useSelector(state => state.order);
const dispatch = useDispatch();
useEffect(() => {
fetchProducts();
}, []);
async function fetchProducts() {
const data = await DataStore.query(Product);
setProducts(data);
};
function checkoutBtnHandler() {
return props.navigation.push('Checkout');
}
function addProductHandler(product) {
dispatch(addLineItem(product));
}
const productList = products.map(product => (
<ListItem thumbnail key={product.id}>
<Left>
<Thumbnail square source={{ uri: product.image }} />
</Left>
<Body>
<Text>{product.name}</Text>
<Text note numberOfLines={1}>${product.price}</Text>
</Body>
<Right>
<Button onPress={() => addProductHandler(product)}>
<Text>Add</Text>
</Button>
</Right>
</ListItem>
));
return (
<Container>
<Content refreshControl={
<RefreshControl
onRefresh={fetchProducts}
refreshing={loading}
/>
}>
<Button block info style={styles.checkoutBtn} onPress={checkoutBtnHandler}>
<Text style={styles.quantityText}>{order.totalQty}</Text>
<Text style={styles.subtotalTxt}>Subtotal ${order.subtotal.toFixed(2)}</Text>
</Button>
<List>
{productList}
</List>
</Content>
</Container>
);
}
Example #18
| 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 #19
| 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 #20
| Source File: UpdateProfile.js From expo-ticket-app with MIT License | 4 votes |
|
render () {
const { loading, error, success } = this.props;
const {
firstName, lastName, email, changeEmail, changePassword,
} = this.state;
return (
<Container style={{ backgroundColor: commonColor.backgroundColor }}>
<StatusBar style="light"/>
<Content padder>
<Header
title={i18n.t('profile.myAccount')}
content={i18n.t('profile.updateAccount')}
/>
{error && <Messages message={error}/>}
{success && <Messages message={success} type="success"/>}
<Form>
<Item stackedLabel>
<Label style={{ fontFamily: 'Montserrat', color: '#fff' }}>
{i18n.t('login.fields.firstName')}
</Label>
<Input
value={firstName}
style={{ fontFamily: 'Montserrat', color: '#fff' }}
disabled={loading}
onChangeText={v => this.handleChange('firstName', v)}
/>
</Item>
<Item stackedLabel>
<Label style={{ fontFamily: 'Montserrat', color: '#fff' }}>
{i18n.t('login.fields.lastName')}
</Label>
<Input
value={lastName}
style={{ fontFamily: 'Montserrat', color: '#fff' }}
disabled={loading}
onChangeText={v => this.handleChange('lastName', v)}
/>
</Item>
<ListItem icon onPress={() => this.handleChange('changeEmail', !changeEmail)}>
<Body>
<TextH2t>{i18n.t('login.fields.email')}</TextH2t>
</Body>
</ListItem>
{changeEmail && (
<Item stackedLabel>
<Label style={{ fontFamily: 'Montserrat', color: '#fff' }}>{i18n.t('login.fields.email')}</Label>
<Input
autoCapitalize="none"
value={email}
style={{ fontFamily: 'Montserrat', color: '#fff' }}
keyboardType="email-address"
disabled={loading}
onChangeText={v => this.handleChange('email', v)}
/>
</Item>
)}
<ListItem icon onPress={() => this.handleChange('changePassword', !changePassword)}>
<Body>
<TextH2t>{i18n.t('profile.updatePassword')}</TextH2t>
</Body>
</ListItem>
{changePassword && (
<View padder>
<Item stackedLabel>
<Label style={{ fontFamily: 'Montserrat', color: '#fff' }}>{i18n.t('login.fields.password')}</Label>
<Input
secureTextEntry
style={{ fontFamily: 'Montserrat', color: '#fff' }}
onChangeText={v => this.handleChange('password', v)}
disabled={loading}
/>
</Item>
<Item stackedLabel last>
<Label style={{ fontFamily: 'Montserrat', color: '#fff' }}>{i18n.t('login.fields.confirmPassword')}</Label>
<Input
secureTextEntry
style={{ fontFamily: 'Montserrat', color: '#fff' }}
onChangeText={v => this.handleChange('password2', v)}
disabled={loading}
/>
</Item>
</View>
)}
<Spacer size={20}/>
<ButtonH2t text={'login.update'} onPress={this.handleSubmit}/>
</Form>
</Content>
</Container>
);
}
Example #21
| Source File: index.js From aws-appsync-refarch-offline with MIT No Attribution | 4 votes |
|
Checkout = (props) => {
const order = useSelector(state => state.order);
const dispatch = useDispatch();
async function submitOrder() {
const now = new Date().toISOString();
const newOrder = await DataStore.save(
new Order({
total: order.total,
subtotal: order.subtotal,
tax: order.tax,
createdAt: now,
})
);
const promises = order.lineItems.map(lineItem => {
return DataStore.save(
new LineItem({
qty: lineItem.qty,
description: lineItem.description,
price: lineItem.price,
total: lineItem.total,
order: newOrder, // associate to order
product: lineItem.product, // associate to product
})
);
});
await Promise.all(promises);
}
async function checkoutBtnHandler() {
await submitOrder();
dispatch(startNewOrder());
props.navigation.goBack();
}
const lineItemList = order.lineItems.map(lineItem => (
<ListItem icon key={lineItem.sku}>
<Left>
<Text>{lineItem.qty}</Text>
</Left>
<Body>
<Text>{lineItem.description}</Text>
</Body>
<Right>
<Text>${lineItem.total.toFixed(2)}</Text>
</Right>
</ListItem>
));
return (
<Container>
<Content>
<Text style={styles.totalTxt}>TOTAL</Text>
<Text style={styles.totalQty}>${order.total.toFixed(2)}</Text>
<List>
<ListItem itemDivider>
<Text> </Text>
</ListItem>
{lineItemList}
<ListItem itemDivider>
<Text> </Text>
</ListItem>
<ListItem>
<Body>
<Text style={styles.subtotalsTxt}>Subtotal</Text>
</Body>
<Right>
<Text>${order.subtotal.toFixed(2)}</Text>
</Right>
</ListItem>
<ListItem>
<Body>
<Text style={styles.subtotalsTxt}>Tax</Text>
</Body>
<Right>
<Text>${order.tax.toFixed(2)}</Text>
</Right>
</ListItem>
<ListItem>
<Body>
<Text style={styles.subtotalsTxt}>Total</Text>
</Body>
<Right>
<Text>${order.total.toFixed(2)}</Text>
</Right>
</ListItem>
</List>
<Button block info style={styles.checkoutBtn} onPress={checkoutBtnHandler} disabled={order.lineItems.length === 0}>
<Text style={styles.checkoutTxt}>Checkout</Text>
</Button>
</Content>
</Container>
);
}
Example #22
| 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 #23
| 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 #24
| 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>
);
}
Example #25
| Source File: Buy.js From inventory-management-rn with MIT License | 4 votes |
|
Buy = ({ navigation }) => {
const [product, setProduct] = useState([]);
const [date_array, setDate_array] = useState([]);
const [show, setShow] = useState(false);
const [curr_ind, setCurr_ind] = useState(0);
const [customerName, setCustomerName] = useState('');
const [phoneNumber, setPhoneNumber] = useState('');
const [address, setAddress] = useState('');
useEffect(() => {
setProduct([{ name: '', price: 0, amount: 0, expiry: '' }]);
setDate_array([new Date()])
}, []);
const buyprod = async () => {
product.forEach(async product => {
const formdata = new FormData();
formdata.append("name", product.name);
formdata.append("avg_cost_price", product.price);
formdata.append("quantity", product.amount);
formdata.append("expiry", product.expiry);
let myHeaders = new Headers();
const auth_key = await AsyncStorage.getItem('auth_key');
myHeaders.append("Authorization", `Token ${auth_key}`);
fetch('http://chouhanaryan.pythonanywhere.com/api/buy/', {
method: 'POST',
headers: myHeaders,
body: formdata,
redirect: 'follow',
})
.then(res => console.log(res))
.catch(err => console.log(err));
});
};
const set_date = (e) => {
setShow(false);
let date_array_copy = [...date_array];
let product_copy = [...product];
const date = new Date(e.nativeEvent.timestamp)
date_array_copy[curr_ind] = date;
setDate_array(date_array_copy);
if (date == 'Invalid Date') {
product_copy[curr_ind].expiry = 'Choose a date and press OK';
setProduct(product_copy);
} else {
const month = date.toLocaleDateString().split('/')[0];
const day = date.toLocaleDateString().split('/')[1];
const year = date.toDateString().split(' ')[3];
const final_date = year + '-' + month + '-' + day;
product_copy[curr_ind].expiry = final_date;
setProduct(product_copy);
}
}
return (
<Container style={{ backgroundColor: '#F3F9FB' }}>
<ScrollView>
<Body>
<Text style={styles.heading}>Buy Items</Text>
{/* separator line above name, phone no. and address fields */}
<View style={{ flex: 1, flexDirection: 'row', marginBottom: 10 }}>
<View
style={{
borderColor: '#0004',
borderWidth: 1,
width: '90%',
alignSelf: 'center',
borderRadius: 2,
marginBottom: -10,
marginTop: 5,
}}
/>
</View>
{/* customer name */}
<Item floatingLabel style={styles.inputBox}>
<Label style={styles.label}>Customer Name</Label>
<Input
style={styles.inputArea}
value={customerName}
onChangeText={value => setCustomerName(value)}
/>
</Item>
{/* phone number */}
<Item floatingLabel style={styles.inputBox}>
<Label style={styles.label}>Phone number</Label>
<Input
style={styles.inputArea}
keyboardType='number-pad'
value={phoneNumber}
onChangeText={value => setPhoneNumber(value)}
/>
</Item>
{/* address */}
<Item floatingLabel style={styles.inputBox}>
<Label style={styles.label}>Address</Label>
<Input
style={styles.inputArea}
value={address}
onChangeText={value => setAddress(value)}
/>
</Item>
{product.map((item, index) => {
return (
<View key={index} style={{ width: Dimensions.get('window').width }}>
{/* for the separating line */}
<View
style={{
borderColor: '#0004',
borderWidth: 1,
width: '90%',
alignSelf: 'center',
borderRadius: 2,
marginBottom: -10,
marginTop: 5,
}}
/>
{/* Product title */}
<Text style={styles.product_titles}>
Product {product.length == 1 ? '' : index + 1}
</Text>
{/* Product name input */}
<Item floatingLabel style={styles.inputBox}>
<Label style={styles.label}>Product Name</Label>
<Input
placeholder={product[index].name}
style={styles.inputArea}
onChangeText={value => (product[index].name = value.trim())}
/>
</Item>
{/* Price input */}
<Item floatingLabel style={styles.inputBox}>
<Label style={styles.label}>Price</Label>
<Input
style={styles.inputArea}
keyboardType="numeric"
onChangeText={value =>
(product[index].price = parseFloat(value.trim()))
}
/>
</Item>
{/* Quantity input */}
<Item floatingLabel style={styles.inputBox}>
<Label style={styles.label}>No. of Items</Label>
<Input
style={styles.inputArea}
keyboardType="numeric"
onChangeText={value =>
(product[index].amount = parseInt(value.trim()))
}
/>
</Item>
{/* Expiry date text */}
<View style={{ flexDirection: 'row', flex: 1 }}>
<View style={styles.dateMainView}>
<Text
style={{
marginLeft: 4,
fontSize: 16,
marginTop: 17,
color: 'black',
}}>
Expiry: {product[index].expiry}
</Text>
</View>
<TouchableOpacity onPress={() => {
setCurr_ind(index);
setShow(true)
}}>
<Icon
name="calendar"
color="#4796BD"
size={30}
style={{
marginLeft: -10,
flex: 1,
marginRight: 30,
marginTop: 20,
}}
/>
</TouchableOpacity>
</View>
{/* Date display */}
<View>
<View>
{show && (
<DateTimePicker
testID="dateTimePicker"
value={new Date()}
mode='date'
is24Hour={true}
display="default"
onChange={(e) => set_date(e)}
/>
)}
</View>
</View>
</View>
);
})}
<TouchableOpacity
onPress={() => {
if (
product[product.length - 1].name &&
product[product.length - 1].price &&
product[product.length - 1].amount &&
product[product.length - 1].expiry.length === 10 // length should be 10 because for date, we have format YYYY-MM-DD, and the length of the string is thus 10
) {
let copy = [...product];
copy.push({ name: '', price: 0, amount: 0, expiry: '' });
setProduct(copy);
let dates_copy = [...date_array];
dates_copy.push(new Date());
setDate_array(dates_copy);
} else {
Alert.alert(
`Please fill all details for product ${product.length}`,
);
}
}}
style={styles.addButton}>
<Icon name="plus" color="#4796BD" size={25} style={styles.icon} />
<Text style={styles.addButtonText}>Add Product</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={async () => {
let can_buy = true;
let incomplete_product_index = 0;
for (let i = 0; i < product.length; i++) {
if (
product[i].name == '' ||
product[i].price == 0 ||
product[i].amount == 0 ||
product[i].expiry.length !== 10
) {
can_buy = false;
incomplete_product_index = i + 1;
break;
}
}
if (!can_buy) {
Alert.alert(
`Please fill valid details for product ${incomplete_product_index}`,
);
} else {
await buyprod();
await setProduct([]);
await setProduct([{ name: '', price: 0, amount: 0, expiry: '' }]);
await setDate_array([new Date()]);
await setAddress();
await setAddress('');
await setCustomerName();
await setCustomerName('');
await setPhoneNumber();
await setPhoneNumber('')
}
}}
style={styles.buyButton}>
<Text style={styles.buyButtonText}>Buy</Text>
</TouchableOpacity>
</Body>
</ScrollView>
</Container>
);
}
Example #26
| Source File: Profile.js From expo-ticket-app with MIT License | 4 votes |
|
Profile = ({ member, logout, switchLanguage }) => (
<Container style={{ backgroundColor: commonColor.backgroundColor }}>
<StatusBar style="light"/>
<Content>
<Spacer size={50}/>
<List>
{(member && member.email) ? (
<View>
<Content padder>
<Header
title={`${member.firstName}`}
content={`${i18n.t('profile.connectWith')} : ${member.email}`}
/>
</Content>
<ListItem onPress={switchLanguage} icon>
<Left>
<Icon style={{ color: '#fff' }} name="language"
type="MaterialIcons"/>
</Left>
<Body style={{
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
}}>
<TextI18n>
global.currentLanguage
</TextI18n>
<TextH2t style={{ fontSize: 20, marginRight: 20 }}>
{member.locale === 'fr' && 'Fr ??'}
{member.locale === 'en' && 'En ??'}
</TextH2t>
</Body>
</ListItem>
<ListItem onPress={Actions.updateProfile} icon>
<Left>
<Icon style={{ color: '#fff' }} name="person-add"/>
</Left>
<Body>
<TextI18n>profile.myAccount</TextI18n>
</Body>
</ListItem>
<ListItem onPress={logout} icon>
<Left>
<Icon style={{ color: '#fff' }} name="power"/>
</Left>
<Body>
<TextI18n>profile.logout</TextI18n>
</Body>
</ListItem>
<Spacer size={20}/>
{member.role && member.role.toLowerCase().includes('admin') &&
<ListItem onPress={Actions.scan} icon>
<Left>
<Icon style={{ fontSize: 23, color: '#fff' }} type="AntDesign" name="scan1"/>
</Left>
<Body>
<TextI18n>profile.scan</TextI18n>
</Body>
</ListItem>}
</View>
) : (
<View>
<Spacer size={40}/>
<ListItem onPress={switchLanguage} icon>
<Left>
<Icon style={{ color: '#fff' }} name="language"
type="MaterialIcons"/>
</Left>
<Body style={{
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
borderBottomWidth: 0,
}}>
<TextI18n>
global.currentLanguage
</TextI18n>
<TextH2t style={{ fontSize: 20, marginRight: 20 }}>
{member.locale === 'fr' ? 'Fr ??' : 'En ??'}
</TextH2t>
</Body>
</ListItem>
<CardH2t
source={require('../../../images/Events/account.jpg')}
onPress={Actions.login}
text1="login.connect"
text2="login.connectText"
/>
<CardH2t
source={require('../../../images/Events/signIn.jpg')}
onPress={Actions.signUp}
text1="login.signUp"
text2="login.signUpText"
/>
<Spacer size={80}/>
</View>
)}
</List>
</Content>
</Container>
)
Example #27
| 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 #28
| 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 #29
| Source File: RegisterScreen.js From inventory-management-rn with MIT License | 4 votes |
|
RegisterScreen = ({navigation}) => {
return (
<Container style={{backgroundColor: '#F3F9FB'}}>
<Header style={{ backgroundColor: '#4796BD', flexDirection: 'row', alignItems: 'center' }} androidStatusBarColor="#247095">
<Text style={{ color: '#fff', fontSize: 20 }}>Register</Text>
</Header>
<Content>
<Body>
<Text style={styles.heading}>Register</Text>
<Text
style={{
alignSelf: 'flex-start',
fontSize: 25,
color: '#122E40',
marginLeft: 28,
marginTop: 25,
marginBottom: 10,
}}>
Account
</Text>
<Item floatingLabel style={styles.inputBox}>
<Label style={styles.label}>Full Name</Label>
<Input
style={styles.inputArea}
blurOnSubmit={true}
onChangeText={value => {
setUserEmail(value);
}}
keyboardType="email-address"
autoCapitalize="none"
/>
</Item>
<Item floatingLabel style={styles.inputBox}>
<Label style={styles.label}>Email-id</Label>
<Input
style={styles.inputArea}
blurOnSubmit={true}
onChangeText={value => {
setUserEmail(value);
}}
keyboardType="email-address"
autoCapitalize="none"
/>
</Item>
<Item floatingLabel style={styles.inputBox}>
<Label style={styles.label}>Password</Label>
<Input
style={styles.inputArea}
blurOnSubmit={true}
onChangeText={value => {
setUserPassword(value);
}}
name="password"
secureTextEntry
/>
</Item>
<Item floatingLabel style={styles.inputBox}>
<Label style={styles.label}>Confirm Password</Label>
<Input
style={styles.inputArea}
blurOnSubmit={true}
onChangeText={value => {
setUserEmail(value);
}}
keyboardType="email-address"
autoCapitalize="none"
/>
</Item>
<Text
style={{
alignSelf: 'flex-start',
fontSize: 25,
color: '#122E40',
marginLeft: 28,
marginTop: 25,
marginBottom: 10,
marginBottom: 10,
}}>
Shop Details
</Text>
<Item floatingLabel style={styles.inputBox}>
<Label style={styles.label}>Name</Label>
<Input
style={styles.inputArea}
blurOnSubmit={true}
onChangeText={value => {
setUserEmail(value);
}}
keyboardType="email-address"
autoCapitalize="none"
/>
</Item>
<Item floatingLabel style={styles.inputBox}>
<Label style={styles.label}>Address</Label>
<Input
style={styles.inputArea}
blurOnSubmit={true}
onChangeText={value => {
setUserEmail(value);
}}
keyboardType="email-address"
autoCapitalize="none"
/>
</Item>
<TouchableOpacity
rounded
style={styles.loginButton}
onPress={() => {
navigation.navigate('LoginScreen');
}}>
<Text style={styles.buttonText}>Register</Text>
</TouchableOpacity>
</Body>
</Content>
</Container>
);
}
