native-base#View JavaScript Examples
The following examples show how to use
native-base#View.
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: Error.js From react-native-expo-starter-kit with MIT License | 6 votes |
|
Error = ({ title, content, tryAgain }) => (
<Container style={{ flex: 1 }}>
<View style={{ alignSelf: 'center' }}>
<Spacer size={20} />
<H3 style={{ textAlign: 'center' }}>{title}</H3>
<Text style={{ textAlign: 'center', marginBottom: 20 }}>{content}</Text>
{tryAgain && (
<Button block onPress={tryAgain}>
<Text>Try Again</Text>
</Button>
)}
<Spacer size={20} />
</View>
</Container>
)
Example #2
| Source File: Spacer.js From react-native-expo-starter-kit with MIT License | 5 votes |
|
Spacer = ({ size }) => <View style={{ flex: 1, height: size }} />
Example #3
| Source File: CardH2t.js From expo-ticket-app with MIT License | 5 votes |
|
CardH2t = ({ source, text1, text2, onPress, loading }) => (
<TouchableOpacity style={{
flex: 1,
height: 220,
padding: 10,
}} onPress={onPress} disabled={loading}>
<View style={{
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 8,
},
shadowOpacity: 0.46,
shadowRadius: 11.14,
elevation: 17,
borderRadius: 10,
}}>
<ImageBackground
source={source}
imageStyle={{ resizeMode: 'cover', borderRadius: 15 }}
style={{
width: '100%',
height: '100%',
}}>
<View style={{
flex: 1, padding: 15,
alignItems: 'center',
justifyContent: 'space-around',
}}>
<TextI18n style={{ fontSize: 23, textAlign: 'center', fontFamily: 'Montserrat_Bold' }}>
{text1}
</TextI18n>
<TextI18n style={{ fontSize: 17, textAlign: 'center' }}>{text2}</TextI18n>
<View style={{ flexDirection: 'row', alignItems: 'center', alignSelf: 'flex-start' }}>
<TextI18n style={{ fontSize: 20, textAlign: 'center', fontFamily: 'Montserrat_Bold' }}>
global.go
</TextI18n>
<Icon type="Entypo" name="chevron-right" style={{ color: 'white', fontSize: 26 }}/>
</View>
</View>
</ImageBackground>
</View>
</TouchableOpacity>
)
Example #4
| Source File: Spacer.js From expo-ticket-app with MIT License | 5 votes |
|
Spacer = ({ size }) => (
<View style={{ flex: 1, height: size }}/>
)
Example #5
| 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 #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: 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 #8
| 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 #9
| 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 #10
| 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>
);
}
