native-base#List JavaScript Examples
The following examples show how to use
native-base#List.
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: 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 #7
| 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 #8
| 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>
)
