native-base#Content JavaScript Examples
The following examples show how to use
native-base#Content.
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: About.js From react-native-expo-starter-kit with MIT License | 6 votes |
|
About = () => (
<Container>
<Content padder>
<Spacer size={30} />
<H1>Heading 1</H1>
<Spacer size={10} />
<Text>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus
commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
{' '}
</Text>
<Spacer size={30} />
<H2>Heading 2</H2>
<Spacer size={10} />
<Text>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus
commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
{' '}
</Text>
<Spacer size={30} />
<H3>Heading 3</H3>
<Spacer size={10} />
<Text>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus
commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
{' '}
</Text>
</Content>
</Container>
)
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: H2TLoading.js From expo-ticket-app with MIT License | 6 votes |
|
H2TLoading = () => (
<Container style={{ backgroundColor: commonColor.backgroundColor }}>
<StatusBar style="light"/>
<Content padder style={{ flex: 1 }}>
<Spacer size={40}/>
<LottieView
loop={true}
autoPlay
speed={5}
style={{ width: '100%' }}
source={require('../../../images/home')}
/>
</Content>
</Container>
)
Example #4
| Source File: Error.js From expo-ticket-app with MIT License | 6 votes |
|
Error = ({ content }) => (
<Container>
<Content>
<TextH2t>
{content}
</TextH2t>
</Content>
</Container>
)
Example #5
| Source File: TicketView.js From expo-ticket-app with MIT License | 6 votes |
|
TicketView = ({ ticket }) => (
<Container style={{ backgroundColor: commonColor.backgroundColorLighter }}>
<StatusBar style="light"/>
<Content padder>
<View style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
<TextH2t style={{ fontSize: 30, paddingTop: 40, paddingBottom: 40, fontFamily: 'Montserrat_Bold' }}>
{ticket.title}
</TextH2t>
<TextH2t style={{ fontSize: 20, paddingTop: 10, paddingBottom: 10 }}>
{ticket.date}
</TextH2t>
<TextH2t style={{ fontSize: 20, paddingTop: 10, paddingBottom: 10 }}>
{ticket.hour}
</TextH2t>
<QRCode
value={`${Firebase.auth().currentUser.uid} ${ticket.uuid}`}
color={'#111'}
backgroundColor={'white'}
size={windowWidth - 20}
/>
</View>
</Content>
</Container>
)
Example #6
| 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 #7
| 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 #8
| Source File: ForgotPassword.js From expo-ticket-app with MIT License | 5 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 })}>
<ScrollView contentContainerStyle={{ height: 400 }}>
<StatusBar style="light"/>
<Container style={{ backgroundColor: commonColor.backgroundColor }}>
<Content padder>
<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.forgotLabel')}
</Label>
<Input
style={{ color: '#fff', fontFamily: 'Montserrat' }}
autoCapitalize="none"
value={email}
keyboardType="email-address"
disabled={loading}
onChangeText={v => this.handleChange('email', v)}
/>
</Item>
<Spacer size={20}/>
<ButtonH2t text={'login.forgotBtn'} loading={loading} onPress={this.handleSubmit}/>
</Form>
</Card>
</Content>
</Container>
</ScrollView>
</KeyboardAvoidingView>
);
}
Example #9
| Source File: index.js From aws-appsync-refarch-offline with MIT No Attribution | 5 votes |
|
Orders = (props) => {
const [loading, setLoading] = useState(false);
const [orders, setOrders] = useState([]);
useEffect(() => {
refetch();
const subscription = DataStore.observe(Order).subscribe(msg => refetch());
return () => subscription.unsubscribe();
}, []);
async function refetch() {
const data = await DataStore.query(Order);
const sortedOrders = data.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
setOrders(sortedOrders);
}
async function openReceipt(orderId) {
const order = await DataStore.query(Order, orderId);
const allItems = await DataStore.query(LineItem);
const lineItems = allItems.filter(li => li.order && li.order.id === order.id);
return props.navigation.push('Receipt', {
order: {
...order,
lineItems,
}
});
}
return (
<Container>
<Content refreshControl={
<RefreshControl
onRefresh={refetch}
refreshing={loading}
/>
}>
<OrderList orders={orders} onSelectOrder={openReceipt} />
</Content>
</Container>
)
}
Example #10
| 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 #11
| 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 #12
| Source File: Form.js From react-native-expo-starter-kit with MIT License | 5 votes |
|
ArticlesForm = ({
error, loading, success, onFormSubmit, defaultValues,
}) => {
const {
register, handleSubmit, errors, setValue,
} = useForm({ defaultValues });
useEffect(() => {
register({ name: 'email' }, { required: errorMessages.missingEmail });
}, [register]);
return (
<Container>
<Content padder>
<Header
title="Example form"
content="When you submit the form, it'll simply save to your redux store"
/>
{error && <Messages message={error} />}
{loading && <Messages type="info" message="Loading..." />}
{success && <Messages type="success" message={success} />}
<Form>
<Item stackedLabel>
<Label>Email*</Label>
<Input
type="text"
autoCapitalize="none"
placeholder="[email protected]"
keyboardType="email-address"
defaultValue={defaultValues.email || ''}
onChangeText={(value) => setValue('email', value)}
/>
</Item>
{errors.email && <Text>{errors.email.message}</Text>}
<Spacer size={20} />
<Button block onPress={handleSubmit(onFormSubmit)} disabled={loading}>
<Text>{loading ? 'Loading' : 'Submit'}</Text>
</Button>
</Form>
</Content>
</Container>
);
}
Example #13
| 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 #14
| Source File: index.js From aws-appsync-refarch-offline with MIT No Attribution | 5 votes |
|
Settings = (props) => {
async function createProducts() {
try {
await loadProducts();
Toast.show({
text: 'Products loaded, pull to refresh',
buttonText: "Ok",
duration: 3000
});
props.navigation.navigate('Checkout');
} catch(error) {
Toast.show({
text: error,
buttonText: "Ok",
duration: 3000
});
}
}
async function clearDataStore() {
await DataStore.clear();
Toast.show({
text: 'Storage cleared, pull to refresh',
buttonText: "Ok",
duration: 3000
});
props.navigation.navigate('Checkout');
}
return (
<Container>
<Content>
<Button block info style={styles.settingsBtn} onPress={createProducts}>
<Text>Create dummy products</Text>
</Button>
<Button block info style={styles.settingsBtn} onPress={clearDataStore}>
<Text>Clear local storage</Text>
</Button>
</Content>
</Container>
);
}
Example #15
| Source File: Home.js From expo-ticket-app with MIT License | 5 votes |
|
Home = ({ member }) => {
return (
<Container style={{ backgroundColor: commonColor.backgroundColor }}>
<StatusBar style="light"/>
<Content padder>
<Spacer size={10}/>
<TextI18n style={{ color: '#ffffff', textAlign: 'center', fontSize: 35, margin: 16 }}>
homepage.title
</TextI18n>
<CardH2t
source={require('../../images/Events/blueBackgroung.png')}
onPress={() => Actions.jump('events')}
text1="homepage.card1Text1"
text2="homepage.card1Text2"
/>
<Spacer size={20}/>
{(member && member.email) ? (
<View>
<CardH2t
onPress={() => {
Actions.jump('tickets');
}}
text1="homepage.card2Text1"
text2="homepage.card2Text2"
/>
<Spacer size={40}/>
</View>
) : (
<CardH2t
source={require('../../images/Events/account.jpg')}
onPress={Actions.login}
text1="homepage.cardSignInText1"
text2="homepage.cardSignInText2"
/>
)}
<Spacer size={80}/>
</Content>
</Container>
);
}
Example #16
| Source File: UserProfileScreen.js From SocialApp-React-Native with MIT License | 4 votes |
|
UserProfileScreen = (props) => {
const { route } = props;
const loggedInUserId = useSelector(state => state.auth.user._id);
const allUsers = useSelector(state => state.users.allUsers);
const loggedInUser = allUsers.filter(u => u._id === loggedInUserId)[0];
let userId;
if(route.params && route.params.userId){
userId = route.params.userId;
} else {
userId = useSelector(state => state.auth.user._id);
}
const users = useSelector(state => state.users.allUsers);
const posts = useSelector(state => state.posts.allPosts);
const currUser = users.filter(u => u._id === userId)[0];
const currUserPosts = posts.filter(p => p.postedBy._id === userId);
const [isRefreshing,setIsRefreshing] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [isFollowLoading, setIsFollowLoading] = useState(false);
const [imageUri, setImageUri] = useState('');
const dispatch = useDispatch();
const loadUsers = useCallback(async () => {
setIsRefreshing(true);
try {
await dispatch(usersActions.fetchUsers());
await dispatch(postsActions.fetchPosts());
} catch (err) {
console.log(err);
}
setIsRefreshing(false);
}, [dispatch, setIsLoading]);
const onImageErrorHandler = () => {
setImageUri(ENV.defaultImageUri)
}
const checkFollow = (userId) => {
const isFollowed = loggedInUser.following.filter(f => f._id === userId).length !== 0;
return isFollowed;
}
const followUserHandler = async () => {
let user = {...currUser};
delete user.created;
delete user.followers;
delete user.following;
// setIsFollowLoading(true);
if(checkFollow(user._id)){
showMessage({
message: `Your have unfollowed ${user.name}.`,
type: "warning",
duration: 3000,
icon: { icon: "warning", position: 'left' }
});
await dispatch(usersActions.unfollowUser(user))
} else {
showMessage({
message: `Your are now following ${user.name}.`,
type: "success",
duration: 3000,
icon: { icon: "success", position: 'left' }
});
await dispatch(usersActions.followUser(user))
}
// setIsFollowLoading(false);
}
const renderSectionOne = () => {
if(currUserPosts.length === 0 ){
return(
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', borderTopColor: '#c2c2c2', borderTopWidth: 1 }} >
<Text style={{ fontSize: 20, fontWeight: 'bold', marginTop: 25 }} >No Posts</Text>
{ currUser._id === loggedInUserId && (
<Button
style={{ backgroundColor: Colors.brightBlue, padding: 10, borderRadius: 25, marginTop: 15 }}
onPress={() => props.navigation.navigate('AddPost')}
>
<Text style={{ color: '#fff' }} >Create Post</Text>
</Button>
) }
</View>
)
}
return currUserPosts.map((post, index) => {
return (
<TouchableOpacity
key={index}
onPress={() => props.navigation.navigate('UserPosts', { userId: userId, postIndex: index, fromUserProfile: true })}
>
<View style={[{ width: (width) / 3 }, { height: (width) / 3 }, { marginBottom: 2 }, index % 3 !== 0 ? { paddingLeft: 2 } : { paddingLeft: 0 }]}>
<Image
style={{
flex: 1,
alignSelf: 'stretch',
width: undefined,
height: undefined,
backgroundColor: '#c2c2c2'
}}
source={
post.updated ? (
{ uri: `${ENV.apiUrl}/post/photo/${post._id}?${new Date(post.updated)}` }
) : (
{ uri: `${ENV.apiUrl}/post/photo/${post._id}` }
)
}
/>
</View>
</TouchableOpacity>
)
})
}
const renderSection = () => {
return (
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
{renderSectionOne()}
</View>
)
}
if(isLoading){
return (
<View style={styles.centered} >
<ActivityIndicator size='large' color={Colors.primary} />
</View>
);
}
let TouchableComp = TouchableOpacity;
if(Platform.OS === 'android' && Platform.Version >= 21){
TouchableComp = TouchableNativeFeedback;
}
return (
<Container style={styles.container} >
<Content
refreshControl={
<RefreshControl refreshing={isRefreshing} onRefresh={loadUsers} />
}
>
<View style={{ paddingTop: 20 }}>
{/** User Photo Stats**/}
<View style={{ flexDirection: 'row' }}>
{/**User photo takes 1/3rd of view horizontally **/}
<View
style={{ flex: 1, alignItems: 'center', justifyContent: 'flex-start' }}>
<Image
source={{ uri: imageUri || `${ENV.apiUrl}/user/photo/${currUser._id}?${new Date(currUser.updated)}` }}
onError={onImageErrorHandler}
style={{ width: 75, height: 75, borderRadius: 37.5, backgroundColor: "#c2c2c2" }}
/>
</View>
{/**User Stats take 2/3rd of view horizontally **/}
<View style={{ flex: 3 }}>
{/** Stats **/}
<View
style={{
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'flex-end'
}}
>
<View style={{ alignItems: 'center' }}>
<TouchableComp
background={ Platform.OS === 'ios' ? undefined : TouchableNativeFeedback.Ripple('#c2c2c2', true) }
onPress={() => props.navigation.navigate(
'UserPosts',
{ userId: userId, postIndex: 0, fromUserProfile: true }
)}
>
<View style={{ justifyContent: 'center', alignItems: 'center' }} >
<Text style={{ fontSize: 18 }} >{currUserPosts.length}</Text>
<Text style={{ fontSize: 12, color: 'grey' }}>Posts</Text>
</View>
</TouchableComp>
</View>
<View style={{ alignItems: 'center' }}>
<TouchableComp
background={ Platform.OS === 'ios' ? undefined : TouchableNativeFeedback.Ripple('#c2c2c2', true) }
onPress={() => props.navigation.navigate(
'UserStats',
{ activeTab: 0, currUser: currUser }
)}
>
<View style={{ justifyContent: 'center', alignItems: 'center' }} >
<Text style={{ fontSize: 18 }} >{currUser.followers.length}</Text>
<Text style={{ fontSize: 12, color: 'grey' }}>Followers</Text>
</View>
</TouchableComp>
</View>
<View style={{ alignItems: 'center' }}>
<TouchableComp
background={ Platform.OS === 'ios' ? undefined : TouchableNativeFeedback.Ripple('#c2c2c2', true) }
onPress={() => props.navigation.navigate(
'UserStats',
{ activeTab: 1, currUser: currUser }
)}
>
<View style={{ justifyContent: 'center', alignItems: 'center' }} >
<Text style={{ fontSize: 18 }} >{currUser.following.length}</Text>
<Text style={{ fontSize: 12, color: 'grey' }}>Following</Text>
</View>
</TouchableComp>
</View>
</View>
{/**
* Edit profile and Settings Buttons **/}
{ userId === loggedInUserId ? (
<View style={{ alignItems: 'flex-start', paddingTop: 10 }}>
<View
style={{ flexDirection: 'row' }}>
<Button
onPress={() => props.navigation.navigate('EditProfile')}
bordered
dark
style={{ flex: 1, marginLeft: 10, marginRight: 10, justifyContent: 'center', height: 30 }}
>
<Text>Edit Profile</Text>
</Button>
</View>
</View>
) : (
<View style={{ flexDirection: 'row', alignItems: 'flex-start', paddingTop: 10 }}>
<TouchableOpacity
style={{ flexDirection: 'row' }}>
<Button
onPress={followUserHandler}
bordered
dark
style={{ flex: 2, marginLeft: 10, marginRight: 10, justifyContent: 'center', height: 30 }}
>
{ checkFollow(currUser._id) ? (
<>
{ isFollowLoading ? (
<ActivityIndicator size="small" color="#fff" />
) : (
<Text style={{ color: 'black' }} >Unfollow</Text>
) }
</>
) : (
<>
{ isFollowLoading ? (
<ActivityIndicator size="small" color="#fff" />
) : (
<Text style={{ color: 'black' }} >Follow</Text>
) }
</>
) }
</Button>
</TouchableOpacity>
</View>
) }
{/**End edit profile**/}
</View>
</View>
<View style={{ paddingBottom: 10, paddingTop: 10 }}>
<View style={{ paddingHorizontal: 10 }} >
<Text style={{ fontWeight: 'bold', fontSize: 18 }}>
{currUser.name + " "}
{
VerifiedUser.verifiedUsersId.includes(currUser._id) && <Octicons name="verified" size={20} color={Colors.brightBlue} />
}
</Text>
{ currUser.about && (
<Text>{currUser.about} </Text>
) }
<Text>{currUser.email}</Text>
</View>
</View>
</View>
<View>
{renderSection()}
</View>
</Content>
</Container >
);
}
Example #17
| 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 #18
| 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 #19
| Source File: SignUp.js From expo-ticket-app with MIT License | 4 votes |
|
render () {
const { loading, error, success } = this.props;
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>
<Card style={{ marginTop: 10, backgroundColor: commonColor.backgroundColor }}>
<View padder>
{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.firstName')}
</Label>
<Input
disabled={loading}
style={{ color: '#fff', fontFamily: 'Montserrat' }}
onChangeText={v => this.handleChange('firstName', v)}
/>
</Item>
<Item floatingLabel style={{ margin: 15 }}>
<Label style={{ color: '#fff', fontFamily: 'Montserrat' }}>
{i18n.t('login.fields.lastName')}
</Label>
<Input
disabled={loading}
style={{ color: '#fff', fontFamily: 'Montserrat' }}
onChangeText={v => this.handleChange('lastName', v)}
/>
</Item>
<Item floatingLabel style={{ margin: 15 }}>
<Label style={{ color: '#fff', fontFamily: 'Montserrat' }}>
{i18n.t('login.fields.email')}
</Label>
<Input
disabled={loading}
style={{ color: '#fff', fontFamily: 'Montserrat' }}
autoCapitalize="none"
keyboardType="email-address"
onChangeText={v => this.handleChange('email', v)}
/>
</Item>
<Item floatingLabel style={{ margin: 15 }}>
<Label style={{ color: '#fff', fontFamily: 'Montserrat' }}>
{i18n.t('login.fields.password')}
</Label>
<Input
disabled={loading}
style={{ color: '#fff', fontFamily: 'Montserrat' }}
secureTextEntry
onChangeText={v => this.handleChange('password', v)}
/>
</Item>
<Item floatingLabel style={{ margin: 15 }}>
<Label style={{ color: '#fff', fontFamily: 'Montserrat' }}>
{i18n.t('login.fields.confirmPassword')}
</Label>
<Input
disabled={loading}
style={{ color: '#fff', fontFamily: 'Montserrat' }}
secureTextEntry
selectionColor={'white'}
onChangeText={v => this.handleChange('password2', v)}
/>
</Item>
<Spacer size={40}/>
<ButtonH2t text={'login.signUp'} loading={loading} onPress={this.handleSubmit}/>
</Form>
</View>
</Card>
</Content>
</Container>
</ScrollView>
</KeyboardAvoidingView>
);
}
Example #20
| 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 #21
| 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 #22
| Source File: TicketsListing.js From expo-ticket-app with MIT License | 4 votes |
|
TicketsListing = ({ member, loading, reFetch }) => (
<Container>
<ImageBackground
source={require('../../../images/Tickets/no-tickets.png')}
imageStyle={{
resizeMode: 'stretch',
height: 650,
}}
style={{
width: '100%',
flex: 1,
backgroundColor: commonColor.backgroundColor,
}}>
<StatusBar style="light"/>
<TextI18n style={{ fontSize: 30, margin: 50, marginBottom: 10, marginLeft: 10 }}>
tickets.title
</TextI18n>
<Content padder refreshControl={(
<RefreshControl
refreshing={loading}
onRefresh={reFetch}
title="Pull to refresh"
tintColor="#fff"
titleColor="#fff"
colors={["#000", "#fff", "#000"]}
/>
)}>
{(member && member.tickets && member.tickets.length)
? (<View>
<Spacer size={30}/>
<FlatList
data={member.tickets}
renderItem={({ item, index }) =>
(<TouchableOpacity disabled={item.scanned === true}
onPress={() => Actions.ticketView({ ticket: item })}
style={{ flex: 1, paddingBottom: 12 }}>
<View style={{
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: commonColor.backgroundColor,
borderRadius: 10,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 3,
},
shadowOpacity: 0.29,
shadowRadius: 4.65,
elevation: 7,
marginLeft: 10,
marginRight: 10,
opacity: item.scanned === true ? 0.6 : 1,
zIndex: 1,
}}>
{item.scanned === true && <View style={{
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
zIndex: 10,
}}>
<TextI18n style={{
color: '#fff',
fontSize: 25,
fontFamily: 'Montserrat_Bold',
}}>
tickets.scanned
</TextI18n>
</View>}
<View style={{
borderColor: '#FFE5EC',
borderRadius: 100,
borderWidth: 7,
backgroundColor: '#FFE5EC',
margin: 10,
marginRight: 10,
}}>
<Icon
name="ticket"
type="MaterialCommunityIcons"
style={{ color: commonColor.brandStyle, fontSize: 30 }}
/>
</View>
<View style={{ flex: 1, padding: 5, marginRight: 5 }}>
<View style={{
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
}}>
<TextH2t style={{ fontSize: 15 }}>
{item.title ? (item.title.length > 22) ? ((item.title.substring(0, 22 - 3)) + '...') : item.title : ''}
</TextH2t>
<TextH2t style={{ fontSize: 13 }}>
{item.date ? item.date : ''}
</TextH2t>
</View>
<View style={{
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
}}>
<View style={{ flexDirection: 'row' }}>
<Icon type="FontAwesome5" name="music"
style={{ fontSize: 16, color: '#b3b5bb', paddingRight: 5 }}/>
<TextH2t style={{ color: '#b3b5bb', fontSize: 13 }}>Techno</TextH2t>
</View>
<TextH2t style={{ color: '#b3b5bb', fontSize: 13 }}>
{item.hour ? item.hour : ''}
</TextH2t>
</View>
</View>
</View>
</TouchableOpacity>)}
keyExtractor={(index) => {return index.uuid;}}
/>
</View>) : (
<View>
<Spacer size={100}/>
<TextI18n style={{ fontSize: 30, textAlign: 'center', fontFamily: 'Montserrat_Bold' }}>
tickets.noTickets
</TextI18n>
<TextI18n style={{ fontSize: 15, textAlign: 'center' }}>
tickets.noTicketsInfo
</TextI18n>
</View>
)}
<Spacer size={20}/>
</Content>
</ImageBackground>
</Container>
)
Example #23
| Source File: EventsListing.js From expo-ticket-app with MIT License | 4 votes |
|
EventsListing = ({ loading, events, reFetch }) => {
const onPress = index => Actions.eventView({ match: { params: { id: String(index) } } });
return (
<Container style={{ backgroundColor: commonColor.backgroundColor }}>
<StatusBar style="light"/>
<TextI18n style={{ color: '#ffffff', fontSize: 30, margin: 50, marginBottom: 10, marginLeft: 10 }}>
events.title
</TextI18n>
<Content padder refreshControl={(
<RefreshControl
refreshing={loading}
onRefresh={reFetch}
title="Pull to refresh"
tintColor="#fff"
titleColor="#fff"
colors={['#000', '#fff', '#000']}
/>
)}>
<FlatList
data={events}
renderItem={({ item, index }) => (
<TouchableOpacity onPress={() => onPress(index)} style={{ flex: 1 }}>
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
}}>
<View style={{
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 6,
},
shadowOpacity: 0.39,
shadowRadius: 8.30,
elevation: 13,
borderRadius: 5,
position: 'absolute',
backgroundColor: commonColor.brandStyle,
width: 100,
height: 34,
top: 150 + ((deviceWidth > 400) ? 40 : 20),
right: 40,
zIndex: 1000,
alignItems: 'center',
justifyContent: 'center',
}}>
<TextH2t style={{ color: '#ffffff', fontSize: 18 }}>
{item.price ? item.price + ' $' : 'Free'}
</TextH2t>
</View>
<View style={{
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 3,
},
shadowOpacity: 0.29,
shadowRadius: 4.65,
elevation: 8,
borderRadius: 5,
flex: 1,
}}>
<Image
source={{ uri: item.image ? item.image : '' }}
style={{
width: '100%',
aspectRatio: 1.85,
resizeMode: 'stretch',
borderRadius: (Platform.OS === 'ios') ? 5 : 10,
}}
/>
</View>
<View style={{ flex: 1, padding: 10 }}>
<TextH2t style={{ color: '#ffffff', fontSize: 16 }}>
{item.date}
</TextH2t>
<TextH2t style={{ color: '#ffffff', fontSize: 23, fontFamily: 'Montserrat_Bold' }}>
{item.title}
</TextH2t>
<TextH2t style={{ color: '#b3b5bb', fontSize: 13 }}>
{item.hour}
</TextH2t>
<View style={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
}}>
<View style={{ flexDirection: 'row' }}>
<TextH2t style={{ color: '#b3b5bb', fontSize: 13 }}># Techno</TextH2t>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'center' }}>
<Icon type="FontAwesome" name="ticket"
style={{ fontSize: 17, color: '#b3b5bb', paddingRight: 5 }}/>
<TextH2t style={{
color: '#b3b5bb',
fontSize: 13,
}}>{item.tickets > 0 ? `${item.tickets} ${i18n.t('events.available')}` : i18n.t('events.full')}</TextH2t>
</View>
</View>
</View>
</View>
</TouchableOpacity>
)}
keyExtractor={(item, index) => (`list-item-${index}`)}
/>
<Spacer size={20}/>
</Content>
</Container>
);
}
Example #24
| 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 #25
| 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 #26
| Source File: MakeTransaction.js From web3-react-native with MIT License | 4 votes |
|
MakeTransaction = ({ onPressSubmit, ...extraProps }) => {
const [toAddress, setToAddress] = useState("0x19e03255f667bdfd50a32722df860b1eeaf4d635");
const [amount, setAmount] = useState("1");
const [units, setUnits] = useState("wei");
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
return (
<Container>
<Content>
<Form>
<Item>
<Label
children="Address:"
/>
<Input
onChangeText={setToAddress}
value={toAddress}
/>
</Item>
<Item
>
<Label
children="Amount:"
/>
<Input
onChangeText={setAmount}
value={amount}
/>
</Item>
<Item
last
>
<Label
children="Units:"
/>
<Picker
onValueChange={setUnits}
selectedValue={units}
>
<Picker.Item label="Wei" value="wei" />
<Picker.Item label="Kwei" value="kwei" />
<Picker.Item label="Mwei" value="mwei" />
<Picker.Item label="Gwei" value="gwei" />
<Picker.Item label="Finney" value="finney" />
<Picker.Item label="Ether" value="eth" />
</Picker>
</Item>
</Form>
<View
style={styles.errorContainer}
>
{(!!error) && (
<Text
style={styles.error}
children={error.message}
/>
)}
</View>
<View
style={styles.buttonContainer}
>
<Button
disabled={loading}
style={styles.button}
onPress={e => Promise
.resolve()
.then(() => [
setLoading(true),
])
.then(() => onPressSubmit(e, toAddress, amount, units))
.then(() => setLoading(false))
.catch(
(e) => {
setError(e);
setLoading(false);
},
)}
primary
rounded
>
{(!!loading) && (
<Spinner
size={20}
/>
)}
<Text
children="Send"
/>
</Button>
</View>
</Content>
</Container>
);
}
Example #27
| 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>
);
}
Example #28
| Source File: LoginScreen.js From inventory-management-rn with MIT License | 4 votes |
|
LoginScreen = ({ navigation }) => {
const [email, setUserEmail] = useState('');
const [password, setUserPassword] = useState('');
const login = () => {
// fetching the token by providing email and password
fetch('http://chouhanaryan.pythonanywhere.com/auth/token/login/', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
'email': email,
'password': password
})
})
.then((res) => res.json())
.then(async (data) => {
const token = data.auth_token;
if (token) {
console.log('token is: ' + token);
// storing token in async storage
try {
await AsyncStorage.setItem('auth_key', token);
} catch (error) {
console.log('Token not saved in async storage properly');
console.log(error);
}
// using the token just received to check the info of the current logged in user
fetch('http://chouhanaryan.pythonanywhere.com/auth/users/me/', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Authorization': `Token ${token}`
}
})
.then((res) => res.json())
.then(async (data) => {
// storing is_staff boolean in async storage
try {
await AsyncStorage.setItem('is_staff', data.is_staff.toString());
} catch (error) {
console.log('is_staff not saved in async storage properly');
console.log(error)
}
navigation.replace('Drawer');
})
.catch((err) => {
console.log(err)
})
} else {
Alert.alert('Invalid email or password', 'Please enter correct credentials')
}
})
.catch((err) => console.log(err))
}
return (
<Container style={{ backgroundColor: '#F3F9FB' }}>
<Header style={{ backgroundColor: '#4796BD', flexDirection: 'row', alignItems: 'center' }} androidStatusBarColor="#247095">
<Text style={{ color: '#fff', fontSize: 24 }}>Login</Text>
</Header>
<Content>
<Body>
<Image
style={{
width: 274,
height: 207,
marginVertical: 40,
marginRight: 10,
}}
source={require('../Images/Illustration.png')}
/>
<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"
autoCapitalize="none"
secureTextEntry
/>
</Item>
{/* <TouchableOpacity
rounded
style={styles.loginButton}
onPress={() => {
Login(email, password);
}}>
<Text style={styles.buttonText}>Login</Text>
</TouchableOpacity> */}
<TouchableOpacity
rounded
style={styles.loginButton}
onPress={() => {
login()
}}>
<Text style={styles.buttonText}>Login</Text>
</TouchableOpacity>
<View style={{ flexDirection: 'row' }}>
<Text style={styles.newUser}>New user ? </Text>
<TouchableOpacity onPress={() => {
navigation.navigate('RegisterScreen');
}} ><Text style={{
fontSize: 18,
textDecorationLine: 'underline',
color: '#9ca2ad',
// borderBottomWidth:1,
// borderBottomColor: 'black',
marginTop: 25,
marginBottom: 10,
marginBottom: 10,
}}>Register </Text></TouchableOpacity>
</View>
</Body>
</Content>
</Container>
);
}
Example #29
| 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>
);
}
