native-base#ListItem JavaScript Examples
The following examples show how to use
native-base#ListItem.
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: index.js From pandoa with GNU General Public License v3.0 | 6 votes |
|
function HistoryList({ positions }) {
return (
<List>
{positions.map((e, i) => (
<ListItem key={i}>
<Text>{e.lat}</Text>
<Text>{e.lng}</Text>
</ListItem>
))}
</List>
);
}
Example #2
| 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 #3
| 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 #4
| 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 #5
| 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 #6
| 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 #7
| 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 #8
| 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 #9
| 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 #10
| 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 #11
| 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>
);
}
