react-native-elements#Button JavaScript Examples
The following examples show how to use
react-native-elements#Button.
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: TaskProgressModal.js From RRWallet with MIT License | 6 votes |
|
renderBtn() {
const { errorMessage } = this.props;
return (
<View style={styles.foot} key={"foot"}>
<Button
title={i18n.t("qunfabao-tip-btn-ok")}
containerStyle={styles.nextButtonContainer}
buttonStyle={[styles.nextButton, {}]}
onPress={this.confirm.bind(this, errorMessage)}
/>
</View>
);
}
Example #2
| Source File: FiltersDrawerNavigator.js From spree-react-native with MIT License | 6 votes |
|
function Color({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Color</Text>
<Button
onPress={navigation.goBack}
title="Go Back"
/>
</View>
);
}
Example #3
| Source File: WalletRecoveryModal.js From RRWallet with MIT License | 6 votes |
|
render() {
return (
<View style={styles.main}>
<KeyboardAvoidingView behavior={Platform.select({ ios: "padding", android: null })}>
<View style={styles.container}>
<View style={styles.titleWrap}>
<Text style={styles.title}>{i18n.t("wallet-hdindex-recovery-title")}</Text>
</View>
<Text style={styles.desc}>◎{i18n.t("wallet-hdindex-recovery-desc1")}</Text>
<TextInput
style={styles.input}
placeholder={i18n.t("wallet-hdindex-recovery-pwdinput-placeholder")}
onChangeText={this.onChangePwd}
secureTextEntry={true}
clearButtonMode={"while-editing"}
/>
<Button
title={i18n.t("common-determine")}
containerStyle={styles.buttonContainerStyle}
onPress={this.onConfirmPress}
disabled={this.disabled}
/>
</View>
</KeyboardAvoidingView>
<ProgressHUD ref={ref => (this.hud = ref)} />
</View>
);
}
Example #4
| Source File: index.js From spree-react-native with MIT License | 6 votes |
|
ActionButtonFooter = ({ title, onPress }) => {
return (
<View style={styles.footer}>
<Button
title={title}
type="solid"
buttonStyle={ styles.footerAction }
titleStyle={ globalStyles.latoBold16 }
onPress={onPress}
/>
</View>
)
}
Example #5
| Source File: MainNavigator.js From id.co.moonlay-eworkplace-mobile with MIT License | 6 votes |
|
function HeaderRight () {
return(
<View style={{alignSelf: 'flex-end', paddingRight: 20}}>
<Button
icon={<FontAwesome5
name="bell"
size={25}
color="white"
solid
/>}
buttonStyle={{backgroundColor:'#1A446D'}}
onPress={()=>{alert('Under Development!')}}
/>
</View>
)
}
Example #6
| Source File: MultiSigJoinScreen.js From RRWallet with MIT License | 6 votes |
|
render() {
return (
<View style={styles.main}>
<View style={styles.card}>
<ForumItemInput
title={i18n.t("wallet-multisig-create-nick")}
placeholder={i18n.t("wallet-multisig-create-nick-placeholder")}
onChangeText={this.onChangeNick}
/>
<View style={styles.separator} />
<ForumItemInput
title={i18n.t("wallet-multisig-join-code")}
placeholder={i18n.t("wallet-multisig-join-code-placeholder")}
onChangeText={this.onChangeCode}
value={this.forumData.code}
/>
</View>
<Button
title={i18n.t("wallet-multisig-join-button")}
buttonStyle={styles.button}
titleStyle={styles.buttonTitle}
disabled={this.disabled}
onPress={this.onJoinPress}
/>
<ProgressHUD ref={this.handleHUDRef} />
</View>
);
}
Example #7
| Source File: SharedComponents.js From hugin-mobile with GNU Affero General Public License v3.0 | 6 votes |
|
render() {
return(
<View style={Styles.alignBottom}>
<Button
buttonStyle={{
backgroundColor: this.props.screenProps.theme.buttonColour,
height: 50,
borderRadius: 5,
marginBottom: 48,
width: "50%",
marginLeft: "25%",
fontFamily: 'Montserrat-SemiBold'
}}
disabledStyle={{
backgroundColor: this.props.screenProps.theme.disabledColour,
}}
{...this.props}
title={this.props.title.toUpperCase()}
/>
</View>
);
}
Example #8
| Source File: BackBtn.js From react-native-covid19 with MIT License | 6 votes |
|
export default function BackBtn(props) {
const activeTheme = useContext(theme).globalTheme;
return (
<Button
icon={
<Icon
name="arrow-back"
type="material"
color={activeTheme.textColor.secondary}
/>
}
containerStyle={{ position: 'absolute', top: 20, left: 20, zIndex: 100 }}
buttonStyle={{ backgroundColor: activeTheme.darkTheme ? '#00000070' : '#ffffff70', padding: 12 }}
onPress={props.onPress}
/>
)
}
Example #9
| Source File: ForgotPasswordScreen.js From react-native-booking-app with MIT License | 6 votes |
|
render() {
const {goBack} = this.props.navigation;
return (
<SafeAreaView style={{flex: 1,}}>
<KeyboardAwareScrollView contentContainerStyle={styles.container} enableOnAndroid={true}
enableAutomaticScroll={(Platform.OS === 'ios')}>
<Image source={require('../../assets/images/authBackground.png')} style={styles.backgroundContainer}/>
<Spinner
visible={this.state.spinner}
textContent={'Please wait...'}
overlayColor="rgba(0, 0, 0, 0.5)"
textStyle={{color: 'white'}}
/>
<View style={styles.logoContainer}>
<Image source={require('../../assets/images/logo.png')} style={styles.logo}/>
</View>
<View style={styles.inputContainer}>
<Text style={styles.subtitle}>Please enter your email address</Text>
<Input inputContainerStyle={styles.inputStyle}
leftIcon={<Icon name="envelope" style={styles.iconSmallStyle} />}
inputStyle={styles.inputInnerStyle}
placeholder="Email" autoCapitalize="none" keyboardType="email-address"
onChangeText={(email) => { this.setState({email}); }}
value={this.state.email}
errorMessage={this.state.errorMessage} errorStyle={{paddingLeft: 20}} />
</View>
<View style={styles.buttonsContainer}>
<Button raised buttonStyle={styles.backButton} title="Back" onPress={() => goBack()} />
<Button raised buttonStyle={styles.loginButton} title="Send" onPress={this.onSend} />
</View>
</KeyboardAwareScrollView>
</SafeAreaView>
);
}
Example #10
| Source File: HDWalletComponent.js From RRWallet with MIT License | 6 votes |
|
render() {
return (
<View style={rcStyles.main}>
<Text style={rcStyles.title}>{i18n.tt(BIZ_SCOPE.wallet, "hdindex-recovery-title")}</Text>
<Text style={rcStyles.desc}>{i18n.tt(BIZ_SCOPE.wallet, "hdindex-recovery-desc1")}</Text>
<View style={rcStyles.inputWrap}>
<TextInput
style={rcStyles.input}
value={this.pwd}
onChangeText={this._onChangeText}
autoCorrect={false}
allowFontScaling={false}
clearButtonMode="always"
secureTextEntry={true}
/>
</View>
<Button
containerStyle={rcStyles.buttonContainer}
buttonStyle={rcStyles.buttonStyle}
disabled={this.disabled}
title={i18n.t("common-confirm")}
onPress={this._onPress}
/>
<ProgressHUD ref={ref => (this.hud = ref)} />
</View>
);
}
Example #11
| Source File: OnboardingBScreen.js From spree-react-native with MIT License | 6 votes |
|
OnboardingBScreen = ({ navigation }) => {
return (
<View style={globalStyles.containerFluid}>
<Image
source={require('../../../assets/images/onboarding/onboarding-img-2/onboarding-img-2.png')}
style={globalStyles.onboardingCover}
/>
<View style={styles.onboardingCardContainer}>
<Text style={styles.title}>Find it</Text>
<Text style={styles.description}>Easy to find and check similar products in large catalogue.</Text>
<View style={styles.dotsContainer}>
<View style={styles.inactive}/>
<View style={styles.active}/>
<View style={styles.inactive}/>
</View>
<View style={styles.footerActions}>
<Button
title="Go Shopping"
type="solid"
buttonStyle={globalStyles.roundedButton}
titleStyle={styles.footerActionText}
onPress={() => navigation.navigate('SignIn')}
/>
<TouchableOpacity style={styles.footerAction}
onPress={() => navigation.navigate('OnboardingC')}
>
<Text style={styles.footerActionText}>Next</Text>
<ArrowLongRight size={24} style={styles.footerIcon} />
</TouchableOpacity>
</View>
</View>
</View>
)
}
Example #12
| Source File: SimpleProgressBar.js From react-native-audio-video-tools with MIT License | 6 votes |
|
SimpleProgressBar = ({completed, onCancelPress}) => {
return (
<View style={styles.container}>
<View style={styles.progressBarContainer}>
<View style={styles.barWrapper}>
<View style={[styles.innerBar, {width: `${completed}%`}]}/>
<View>
<Text style={styles.percentage}>
{completed}%
</Text>
</View>
</View>
</View>
<Button
icon={
<Icon
name="cancel"
type="material"
size={15}
color={'white'}
style={{marginLeft: 5}}
/>
}
buttonStyle={{ backgroundColor: 'red' }}
iconRight
title="Cancel"
onPress={() => onCancelPress()}
/>
</View>
);
}
Example #13
| Source File: OnboardingAScreen.js From spree-react-native with MIT License | 6 votes |
|
OnboardingAScreen = ({ navigation }) => {
return (
<View style={globalStyles.containerFluid}>
<Image
source={require('../../../assets/images/onboarding/onboarding-img-1/onboarding-img-1.png')}
style={styles.onboardingCover}
/>
<View style={styles.onboardingCardContainer}>
<Text style={styles.title}>Search it</Text>
<Text style={styles.description}>We make it easy to search and find right product for you.</Text>
<View style={styles.dotsContainer}>
<View style={styles.active} />
<View style={styles.inactive} />
<View style={styles.inactive} />
</View>
<View style={styles.footerActions}>
<Button
title="Go Shopping"
type="solid"
buttonStyle={globalStyles.roundedButton}
titleStyle={styles.footerActionText}
onPress={() => navigation.navigate('SignIn')}
/>
<TouchableOpacity style={styles.footerAction}
onPress={() => navigation.navigate('OnboardingB')}
>
<Text style={styles.footerActionText}> Next </Text>
<ArrowLongRight size={24} style={styles.footerIcon} />
</TouchableOpacity>
</View>
</View>
</View>
)
}
Example #14
| Source File: AppWarningModal.js From RRWallet with MIT License | 6 votes |
|
render() {
return (
<View style={styles.main}>
<View style={styles.alert}>
<Text style={styles.title}>{this.title}</Text>
<Text style={styles.desc}>{this.content}</Text>
<Button
buttonStyle={styles.button}
titleStyle={styles.buttonText}
title={this.buttonTitle}
onPress={this.onConfirmPress}
/>
</View>
</View>
);
}
Example #15
| Source File: ForgotPasswordScreen.js From spree-react-native with MIT License | 6 votes |
|
ForgotPasswordScreen = ({ navigation }) => {
const [inputEmailBorder, setInputEmailBorder] = React.useState(false)
const [email, setEmail] = React.useState('')
return (
<View style={globalStyles.container}>
<ChevronLeft size={24} style={styles.backButton}
onPress={navigation.goBack}
/>
<Text style={styles.title}>Forget Password ?</Text>
<Text style={[ styles.label, globalStyles.mt16, globalStyles.mb32 ]}>
Please enter your email address to receive 4-digit code via email to create a new password.
</Text>
<Input
placeholder="Enter Registered Email"
keyboardType="email-address"
onFocus={() => setInputEmailBorder(true)}
onBlur={() => setInputEmailBorder(false)}
containerStyle={[ styles.inputMainContainer, {borderWidth: inputEmailBorder ? 1 : 0 } ]}
inputStyle={styles.inputStyle}
inputContainerStyle={[ styles.inputContainerStyle, { paddingTop: 5 }]}
onChangeText={setEmail}
/>
<Button
title="Send Me Now"
buttonStyle={styles.buttonBlockStyle}
titleStyle={globalStyles.latoBold16}
onPress={() => navigation.navigate('EnterCode')}
/>
</View>
)
}
Example #16
| Source File: AddressScreen.js From RRWallet with MIT License | 6 votes |
|
render() {
if (!this.visible) {
return null;
}
return (
<Animatable.View style={bdStyles.modal} animation="fadeIn" duration={200} useNativeDriver={true}>
<View style={bdStyles.main}>
<View style={bdStyles.header}>
<Image source={require("@img/wallet/backup_dialog.png")} />
</View>
<Text style={bdStyles.title}>{i18n.tt(BIZ_SCOPE.wallet, "receive-backup-title")}</Text>
<Text style={bdStyles.desc}>{i18n.tt(BIZ_SCOPE.wallet, "receive-backup-desc")}</Text>
<View style={bdStyles.buttonGroup}>
<Button
title={i18n.tt(BIZ_SCOPE.wallet, "receive-backup-later")}
titleStyle={bdStyles.buttonTitle}
containerStyle={bdStyles.buttonContainer}
buttonStyle={bdStyles.buttonStyle}
onPress={this.props.onCancel}
/>
<View style={bdStyles.separator} />
<Button
title={i18n.tt(BIZ_SCOPE.wallet, "receive-backup-confirm")}
titleStyle={bdStyles.buttonTitle}
containerStyle={bdStyles.buttonContainer}
buttonStyle={bdStyles.buttonStyle}
onPress={this.props.onConfirm}
/>
</View>
</View>
</Animatable.View>
);
}
Example #17
| Source File: EnterCodeScreen.js From spree-react-native with MIT License | 6 votes |
|
EnterCodeScreen = ({ navigation }) => {
return (
<View style={globalStyles.container}>
<ChevronLeft size={24} style={styles.backButton}
onPress={navigation.goBack}
/>
<Text style={styles.title}>Enter Code</Text>
<Text
style={[ styles.label, globalStyles.mt16, globalStyles.mb32 ]}
>
We have sent an email with 4-digit password reset code. Enter code below to continue.
</Text>
<View style={{flexDirection: 'row'}}>
<View style={ styles.inputRoundedContainer }>
<Input style={styles.inputRoundedBackground} />
</View>
<View style={ styles.inputRoundedContainer }>
<Input style={styles.inputRoundedBackground} />
</View>
<View style={ styles.inputRoundedContainer }>
<Input style={styles.inputRoundedBackground} />
</View>
<View style={ styles.inputRoundedContainer }>
<Input style={styles.inputRoundedBackground} />
</View>
</View>
<Button
title="Submit & Continue"
buttonStyle={styles.buttonBlockStyle}
titleStyle={globalStyles.latoBold16}
onPress={() => navigation.navigate('ResetPassword')}
/>
</View>
)
}
Example #18
| Source File: HDWalletComponent.js From RRWallet with MIT License | 6 votes |
|
render() {
return (
<ScrollView style={dpStyles.main} justifyContent="center" contentContainerStyle={dpStyles.container}>
<View style={dpStyles.imageWrap}>
<Image source={require("@img/wallet/hd_default_img.png")} style={dpStyles.img} />
</View>
<Text style={dpStyles.title}>{i18n.t("wallet-hdindex-default-title")}</Text>
<Text style={dpStyles.desc}>{i18n.t("wallet-hdindex-default-desc")}</Text>
<Button
containerStyle={dpStyles.buttonContainer}
buttonStyle={dpStyles.buttonStyle}
title={i18n.t("wallet-hdindex-default-create")}
onPress={this.onCreatePress}
/>
<TouchableHighlight underlayColor="transparent" onPress={this.onRecoveryPress} activeOpacity={0.7}>
<Text style={dpStyles.recoveryDesc}>
{i18n.t("wallet-hdindex-default-recovery-desc")}
<Text style={dpStyles.recovery}>{i18n.t("wallet-hdindex-default-recovery")}</Text>
</Text>
</TouchableHighlight>
</ScrollView>
);
}
Example #19
| Source File: ContactUsScreen.js From react-native-booking-app with MIT License | 5 votes |
|
render() {
const {goBack} = this.props.navigation;
return (
<SafeAreaView>
<KeyboardAwareScrollView contentContainerStyle={styles.container} enableOnAndroid={true}
resetScrollToCoords={{ x: 0, y: 0 }}
scrollEnabled={true}>
<Spinner
visible={this.state.spinner}
textContent={'Please wait...'}
overlayColor='rgba(0, 0, 0, 0.5)'
textStyle={{color: 'white'}}
/>
<View style={styles.boxContainer}>
<Text style={[styles.textStyle, {fontWeight: 'bold',}]}>Eves Body Organic Med Spa</Text>
<Text style={styles.textStyle}>10300 Southside Blvd Ste 101</Text>
<Text style={styles.textStyle}>Jacksonville, FL 32256</Text>
<Text style={styles.textStyle}>904-309-9937</Text>
</View>
<View style={styles.boxContainer}>
<Text style={styles.textStyle}>Corporate</Text>
<Text style={styles.textStyle}>50 N. Laura Street</Text>
<Text style={styles.textStyle}>Jacksonville FL 32202</Text>
<Text style={styles.textStyle}>Toll Free (877) 709-Eves</Text>
<Text style={styles.textStyle}>Fax 904-309-9956</Text>
<Text style={styles.textStyle}>[email protected]</Text>
</View>
<View style={{marginTop: 10}}>
<View style={[styles.itemContainer]}>
<Input ref={(input) => { this._nameInput = input; }}
inputContainerStyle={styles.inputStyle}
inputStyle={styles.inputInnerStyle}
placeholder='Full Name' returnKeyType='next'
onSubmitEditing={() => { this._emailInput.focus(); }}
blurOnSubmit={false}
onChangeText={(fullName) => { this.setState({name: fullName});}}
value={this.state.name}
errorMessage={this.state.errorMessage1} errorStyle={{paddingLeft: 20}} />
</View>
<View style={styles.itemContainer}>
<Input ref={(input) => { this._emailInput = input; }}
inputContainerStyle={styles.inputStyle}
inputStyle={styles.inputInnerStyle}
placeholder='Email' autoCapitalize='none' keyboardType='email-address' returnKeyType='next'
onSubmitEditing={() => { this._messageInput.focus(); }}
blurOnSubmit={false}
onChangeText={(email) => { this.setState({email}); }}
value={this.state.email}
errorMessage={this.state.errorMessage2} errorStyle={{paddingLeft: 20}} />
</View>
<View style={styles.itemContainer}>
<Input ref={(input) => { this._messageInput = input; }}
inputContainerStyle={styles.multilineInputStyle}
inputStyle={styles.multilineInnerStyle} multiline={true} numberOfLines={6}
placeholder='Message'
onChangeText={(message) => { this.setState({message}); }}
value={this.state.message}
errorMessage={this.state.errorMessage3} errorStyle={{paddingLeft: 20}} />
</View>
</View>
<View style={styles.buttonsContainer}>
<Button raised buttonStyle={styles.submitButton} title='Submit' onPress={this.onSubmit} />
</View>
</KeyboardAwareScrollView>
</SafeAreaView>
)
}
Example #20
| Source File: Authenticate.js From hugin-mobile with GNU Affero General Public License v3.0 | 5 votes |
|
render() {
return(
<View style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: this.props.screenProps.theme.backgroundColour
}}>
{Platform.OS === 'android' &&
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<XKRLogo />
<Text style={[Styles.centeredText, {
fontSize: 22,
color: this.props.screenProps.theme.slightlyMoreVisibleColour,
marginHorizontal: 80,
fontFamily: "Montserrat-SemiBold",
}]}>
Touch the fingerprint sensor {this.props.navigation.state.params.subtitle}
</Text>
<Animatable.Image
source={require('../assets/img/fingerprint.png')}
style={{
resizeMode: 'contain',
width: 80,
height: 80,
marginTop: 40,
justifyContent: 'flex-end',
}}
animation='pulse'
easing='ease-out'
iterationCount='infinite'
/>
</View>
<View style={{ width: '100%', bottom: 20, position: 'absolute' }}>
<Button
title='Or enter your PIN'
onPress={() => {
this.props.navigation.navigate('RequestPin', {
subtitle: this.props.navigation.state.params.subtitle,
finishFunction: this.props.navigation.state.params.finishFunction
})
}}
titleStyle={{
color: this.props.screenProps.theme.slightlyMoreVisibleColour,
fontSize: 15,
textDecorationLine: 'underline',
}}
type='clear'
/>
</View>
</View>
}
</View>
);
}
Example #21
| Source File: ProfileScreen.js From spree-react-native with MIT License | 5 votes |
|
ProfileScreen = ({ dispatch }) => {
return (
<View style={styles.mainContainer}>
<View style={styles.jumbotron}>
<LinearGradient
// Background Linear Gradient
start={[1, 0]}
end={[1, 1]}
colors={['#EE3168', '#C1236F']}
style={styles.centeredContent}
>
<View style={styles.centeredContent}>
<Image
source={require('../../../../assets/images/user-profile-photo/user-profile-photo.png')}
style={styles.avatar}
/>
<View style={styles.profileDetails}>
<Text style={styles.profileName}>Jane Pinto</Text>
<Pen size={24} style={{ color: colors.white }} />
</View>
</View>
</LinearGradient>
</View>
<View>
{
list.map((item, i) => (
<View key={i}>
<View style={styles.listContainer}>
<View style={styles.listIcon}>{item.icon}</View>
<Text style={styles.title}>{item.title}</Text>
<View style={styles.listIcon}><ChevronRight size={24} style={{color: colors.black}} /></View>
</View>
<Divider />
</View>
)
)}
</View>
<View style={globalStyles.container}>
<Button
title="Logout Account"
buttonStyle={ styles.buttonBlockStyle }
titleStyle={ globalStyles.latoBold16 }
onPress={() => dispatch(userLogout())}
/>
</View>
</View>
)
}
Example #22
| Source File: Tip.js From RRWallet with MIT License | 5 votes |
|
renderBtn() {
let data = this.state;
if (data.bottomComponent) {
return data.bottomComponent;
}
if (data.buttons && data.buttons.length == 2) {
return this.renderCustomButtons();
}
let buttonText = data.buttonText;
let buttonContainerStyle = data.buttonContainerStyle || {};
let buttonStyle = data.buttonStyle || {};
let titleStyle = data.titleStyle || {};
if (!!data.useSingleButton) {
return (
<View style={{ paddingBottom: 30, paddingHorizontal: 16, paddingTop: 20 }} key={"btn"}>
<Button
title={buttonText}
containerStyle={[styles.nextButtonContainer, buttonContainerStyle]}
buttonStyle={[styles.nextButton, buttonStyle]}
titleStyle={[{ color: "#fff", fontSize: 18 }, titleStyle]}
onPress={this.onButtonPress}
/>
</View>
);
} else {
return (
<View style={styles.foot} key={"btn"}>
<Button
title={buttonText}
containerStyle={[{ borderColor: "#eee", borderTopWidth: StyleSheet.hairlineWidth }, buttonContainerStyle]}
buttonStyle={[styles.buttonStyle, buttonStyle]}
titleStyle={[styles.titleStyle, titleStyle]}
onPress={this.onButtonPress}
/>
</View>
);
}
}
Example #23
| Source File: LandingScreen.js From react-native-booking-app with MIT License | 5 votes |
|
render() {
if (this.state.loading) {
return (
<View style={[styles.container, {alignItems: 'center',justifyContent: 'center'}]}>
<Spinner
visible={true}
overlayColor='rgba(0, 0, 0, 0.5)'
textStyle={{color: 'white'}} />
</View>
);
} else {
return (
<SafeAreaView style={{flex: 1,}}>
<View style={styles.container}>
<View style={styles.logoContainer}>
<Image source={require('../assets/images/logo.png')} style={styles.logo}/>
</View>
<View style={styles.carouselContainer}>
<ImageCarousel style={{alignItems: "center", justifyContent: "center"}}>
{this.state.image_urls.map(url => (
<View style={{flex: 1, alignItems: "center", justifyContent: "center"}} key={url}>
<Image
style={styles.image}
source={{uri: url}}
resizeMode="cover"/>
</View>
))}
</ImageCarousel>
<View style={styles.overlayContainer}>
<View style={styles.titleContainer}>
<Text style={styles.title}>{i18n.t('landing.title')}</Text>
</View>
<View style={styles.subTitleContainer}>
<Text style={styles.subtitle}>{i18n.t('landing.subtitle')}</Text>
</View>
<View style={styles.bookNowContainer}>
<Button icon={<Icon name="angle-double-right" size={20} color="white"/>} iconRight
raised
buttonStyle={styles.bookNowButton}
textStyle={{textAlign: 'center',}} title={i18n.t('landing.bookNow') + " "}
onPress={this.onBookNow}/>
</View>
</View>
</View>
<View style={styles.createAccountContainer}>
<Button raised buttonStyle={styles.createAccountButton} title={i18n.t('landing.createNew')}
onPress={this.onCreateNew}/>
</View>
<View style={styles.loginContainer}>
<Text>{i18n.t('landing.haveAccount')}</Text>
<TouchableOpacity onPress={this.onLogin}><Text style={styles.loginButton}>{i18n.t('landing.logIn')}</Text></TouchableOpacity>
</View>
</View>
</SafeAreaView>
);
}
}
Example #24
| Source File: BizModal.js From RRWallet with MIT License | 5 votes |
|
render() {
const {
title = "Hello",
buttonTitle,
buttonStyle,
children,
onPress,
containerStyle,
contentStyle,
onClose,
} = this.props;
return (
<Modal
isVisible={this.props.visible}
animationIn="zoomIn"
avoidKeyboard={true}
style={{ flex: 1 }}
animationOutTiming={250}
animationOut="zoomOut">
<View style={[styles.container, containerStyle]}>
<View style={styles.titleContainer}>
<TouchableOpacity onPress={onClose} style={styles.close}>
<Image source={require("@img/icon/close.png")} />
</TouchableOpacity>
<Text style={styles.title}>{title}</Text>
</View>
<View style={[styles.body, contentStyle]}>{children}</View>
{buttonTitle && (
<Button
title={buttonTitle}
onPress={onPress}
buttonStyle={[{ height: 50, borderRadius: 3, elevation: 0, backgroundColor: "#007AFF" }, buttonStyle]}
containerStyle={{ marginBottom: 30, marginHorizontal: 16 }}
/>
)}
</View>
</Modal>
);
}
Example #25
| Source File: Modals.js From react-native-audio-video-tools with MIT License | 5 votes |
|
CustomModal = ({title, content, isVisible, onCloseClick, leftText, rightText, onLeftClick, onRightClick}) => {
return (
<Modal isVisible={isVisible} overlayStyle={styles.container}>
<View style={styles.wrapper}>
<View style={styles.modalHeader}>
<Text style={styles.modalTitle}>{title}</Text>
<View
style={{
position: 'absolute',
right: 5,
}}
>
<Icon
name={'ios-close-circle-outline'}
type="ionicon"
color={COLORS.White}
onPress={onCloseClick}
/>
</View>
</View>
<Divider />
<View style={styles.modalBody}>
{content}
</View>
<View style={styles.modalFooter}>
{onLeftClick && onRightClick ? (
<>
<Button
type="outline"
title={leftText}
onPress={onLeftClick}
buttonStyle={{paddingHorizontal: 20, paddingVertical: 5}}
/>
<Button
title={rightText}
onPress={onRightClick}
buttonStyle={{paddingHorizontal: 20, paddingVertical: 5, marginHorizontal: 20, marginLeft: 40}}
/>
</>
) : (
<Button
title={leftText}
onPress={onLeftClick}
buttonStyle={{paddingHorizontal: 20, paddingVertical: 5, marginRight: 20}}
/>
)}
</View>
</View>
</Modal>
);
}
Example #26
| Source File: AddEditFoodScreen.js From react-native-booking-app with MIT License | 5 votes |
|
render() {
const {goBack} = this.props.navigation;
return (
<SafeAreaView style={styles.container}>
<KeyboardAwareScrollView contentContainerStyle={styles.container} enableOnAndroid={true}
resetScrollToCoords={{ x: 0, y: 0 }}
scrollEnabled={true}>
<Spinner
visible={this.state.spinner}
textContent={'Please wait...'}
overlayColor='rgba(0, 0, 0, 0.5)'
textStyle={{color: 'white'}}
/>
<View style={[styles.itemContainer, styles.topRow, styles.normalHeight]}>
<Text style={styles.labelStyle}>Food Type</Text>
<Input inputContainerStyle={styles.normalInputStyle} inputStyle={styles.inputInnerStyle}
returnKeyType='next' onSubmitEditing={() => { this._commentInput.focus(); }} blurOnSubmit={false}
onChangeText={(value) => { this.setState({value});}}
value={this.state.value}
errorMessage={this.state.errorMessage1} errorStyle={{paddingLeft: 20}} />
</View>
<View style={[styles.itemContainer, styles.bigHeight]}>
<Text style={styles.labelStyle}>Comments</Text>
<Input ref={(input) => { this._commentInput = input; }}
inputContainerStyle={styles.commentInputStyle} inputStyle={styles.commentInnerStyle}
onChangeText={(comment) => { this.setState({comment}); }}
value={this.state.comment} multiline={true}
errorMessage={this.state.errorMessage2} errorStyle={{paddingLeft: 20}} />
</View>
{/*
<View style={[styles.itemContainer, styles.normalHeight]}>
<Text style={styles.labelStyle}>Date</Text>
<DatePicker style={styles.dateTimeStyle} showIcon={false}
mode="date" placeholder="Select Date" format="MM-DD-YYYY"
date={this.state.date}
confirmBtnText="OK" cancelBtnText="Cancel"
customStyles={{
dateInput: {borderWidth: 0,},
dateText: styles.dateTimeInputStyle,
placeholderText: styles.dateTimeInputStyle,
btnTextConfirm: {color: 'mediumvioletred'},
btnTextCancel: {color: 'lightseagreen'},
}}
onDateChange={(date) => {this.setState({date: date})}} />
<Text style={styles.errorStyle}>{this.state.errorMessage3}</Text>
</View>
*/}
<View style={[styles.itemContainer, styles.normalHeight]}>
<Text style={styles.labelStyle}>Time</Text>
<DatePicker style={styles.dateTimeStyle} showIcon={false}
mode="time" placeholder="Select Time" format="hh:mm A"
date={this.state.time}
confirmBtnText="OK" cancelBtnText="Cancel"
customStyles={{
dateInput: {borderWidth: 0,},
dateText: styles.dateTimeInputStyle,
placeholderText: styles.dateTimeInputStyle,
btnTextConfirm: {color: 'mediumvioletred'},
btnTextCancel: {color: 'lightseagreen'},
}}
onDateChange={(time) => {this.setState({time})}} />
<Text style={styles.errorStyle}>{this.state.errorMessage4}</Text>
</View>
<View style={styles.buttonsContainer}>
<Button raised buttonStyle={styles.backButton} title='Cancel' onPress={() => goBack()} />
<Button raised buttonStyle={styles.createButton} title='OK' onPress={this.onSave} />
</View>
</KeyboardAwareScrollView>
</SafeAreaView>
)
}
Example #27
| Source File: TransferScreen.js From hugin-mobile with GNU Affero General Public License v3.0 | 4 votes |
|
confirmScreen(t) {
return(
<View style={{ flex: 1, backgroundColor: this.props.screenProps.theme.backgroundColour }}>
<View style={{
alignItems: 'flex-start',
justifyContent: 'flex-start',
marginTop: 60,
marginHorizontal: 30,
}}>
<Text style={{ fontFamily: 'Montserrat-SemiBold', color: this.props.screenProps.theme.primaryColour, fontSize: 25, marginBottom: 25 }}>
{t('reviewTitle')}
</Text>
</View>
<ScrollView contentContainerStyle={{
paddingBottom: 70,
}}>
<View style={{
marginHorizontal: 30,
alignItems: 'flex-start',
justifyContent: 'flex-start',
}}>
<Text style={{ fontFamily: 'Montserrat-Regular',fontSize: 13, color: this.props.screenProps.theme.slightlyMoreVisibleColour }}>
<Text style={{ color: this.props.screenProps.theme.primaryColour, fontWeight: 'bold' }}>
{prettyPrintAmount(this.state.recipientAmount, Config)}{' '}
</Text>
will reach{' '}
<Text style={{ color: this.props.screenProps.theme.primaryColour, fontWeight: 'bold' }}>
{this.state.payee.nickname}'s{' '}
</Text>
account, in {getArrivalTime([t('minute'), t('second')])}
</Text>
<View style={{
alignItems: 'flex-start',
justifyContent: 'flex-start',
}}>
<View style={{
flexDirection: 'row',
alignItems: 'center',
marginTop: 15,
width: '100%',
justifyContent: 'space-between'
}}>
<Text style={{
color: this.props.screenProps.theme.primaryColour,
fontFamily: 'Montserrat-SemiBold',
}}>
{t('notes')}
</Text>
<Button
title={t('change')}
onPress={() => {
this.setState({
modifyMemo: !this.state.modifyMemo,
});
}}
titleStyle={{
color: this.props.screenProps.theme.primaryColour,
fontSize: 13
}}
type="clear"
/>
</View>
</View>
<View style={{ borderWidth: 0.7, borderColor: 'lightgrey', width: '100%' }}/>
</View>
<View style={{
alignItems: 'flex-start',
justifyContent: 'flex-start',
marginHorizontal: this.state.modifyMemo ? 20 : 30,
marginTop: 20,
}}>
{this.state.modifyMemo ?
<ModifyMemo
memo={this.state.memo}
onChange={(text) => {
this.setState({
memo: text,
})
}}
{...this.props}
/>
:
<Text style={{ color: this.props.screenProps.theme.primaryColour, fontSize: 16 }}>
{this.state.memo === '' ? t('none') : this.state.memo}
</Text>
}
</View>
<View style={{
marginHorizontal: 30,
alignItems: 'flex-start',
justifyContent: 'flex-start',
}}>
<View style={{
flexDirection: 'row',
alignItems: 'center',
marginTop: 15,
width: '100%',
justifyContent: 'space-between'
}}>
<Text style={{ fontFamily: 'Montserrat-SemiBold', fontSize: 15, color: this.props.screenProps.theme.primaryColour }}>
{this.state.payee.nickname}{t('details')}
</Text>
<Button
title={t('change')}
onPress={() => {
this.props.navigation.navigate('ChoosePayee');
}}
titleStyle={{
color: this.props.screenProps.theme.primaryColour,
fontSize: 13
}}
type="clear"
/>
</View>
<View style={{ borderWidth: 0.7, borderColor: 'lightgrey', width: '100%' }}/>
<Text style={{ fontFamily: 'Montserrat-SemiBold', marginBottom: 5, marginTop: 20, color: this.props.screenProps.theme.slightlyMoreVisibleColour }}>
{t('address')}
</Text>
<Text style={{ fontFamily: 'Montserrat-Regular', color: this.props.screenProps.theme.primaryColour, fontSize: 16 }}>
{this.state.payee.address}
</Text>
{this.state.payee.paymentID !== '' &&
<View>
<Text style={{ fontFamily: 'Montserrat-SemiBold', marginBottom: 5, marginTop: 20 }}>
{t('paymentID')}
</Text>
<Text style={{ fontFamily: 'Montserrat-Regular', color: this.props.screenProps.theme.primaryColour, fontSize: 16 }}>
{this.state.payee.paymentID}
</Text>
</View>}
<View style={{
flexDirection: 'row',
alignItems: 'center',
marginTop: 15,
width: '100%',
justifyContent: 'space-between'
}}>
<Text style={{ fontFamily: 'Montserrat-SemiBold', fontSize: 15, color: this.props.screenProps.theme.primaryColour }}>
{t('transferDetails')}
</Text>
<Button
title={t('change')}
onPress={() => {
this.props.navigation.navigate(
'Transfer', {
payee: this.state.payee,
}
);
}}
titleStyle={{
color: this.props.screenProps.theme.primaryColour,
fontSize: 13
}}
type="clear"
/>
</View>
<View style={{ borderWidth: 0.7, borderColor: 'lightgrey', width: '100%' }}/>
<Text style={{ fontFamily: 'Montserrat-Regular', marginBottom: 5, marginTop: 20, color: this.props.screenProps.theme.slightlyMoreVisibleColour }}>
{t('sendAmountLabel')}
</Text>
<Text style={{ fontFamily: 'Montserrat-Regular',color: this.props.screenProps.theme.primaryColour, fontSize: 16 }}>
{prettyPrintAmount(this.state.sendAll ? this.state.unlockedBalance : this.state.recipientAmount + this.state.feeTotal, Config)}
</Text>
<Text style={{ fontFamily: 'Montserrat-Regular', marginBottom: 5, marginTop: 20, color: this.props.screenProps.theme.slightlyMoreVisibleColour }}>
{this.state.payee.nickname} {t('gets')}
</Text>
<Text style={{ fontFamily: 'Montserrat-Regular',color: this.props.screenProps.theme.primaryColour, fontSize: 16 }}>
{prettyPrintAmount(this.state.recipientAmount, Config)}
</Text>
<Text style={{ fontFamily: 'Montserrat-Regular',marginBottom: 5, marginTop: 20, color: this.props.screenProps.theme.slightlyMoreVisibleColour }}>
{t('fee')}
</Text>
<Text style={{ fontFamily: 'Montserrat-Regular',color: this.props.screenProps.theme.primaryColour, fontSize: 16 }}>
{prettyPrintAmount(this.state.fee, Config)}
</Text>
{this.state.devFee > 0 &&
<View>
<Text style={{ fontFamily: 'Montserrat-Regular',marginBottom: 5, marginTop: 20, color: this.props.screenProps.theme.slightlyMoreVisibleColour }}>
Developer fee
</Text>
<Text style={{ fontFamily: 'Montserrat-Regular',color: this.props.screenProps.theme.primaryColour, fontSize: 16 }}>
{prettyPrintAmount(this.state.devFee, Config)}
</Text>
</View>}
{this.state.nodeFee > 0 &&
<View>
<Text style={{ fontFamily: 'Montserrat-Regular',marginBottom: 5, marginTop: 20, color: this.props.screenProps.theme.slightlyMoreVisibleColour }}>
{t('nodeFee')}
</Text>
<Text style={{ fontFamily: 'Montserrat-Regular',color: this.props.screenProps.theme.primaryColour, fontSize: 16 }}>
{prettyPrintAmount(this.state.nodeFee, Config)}
</Text>
</View>}
<View>
<Text style={{ fontFamily: 'Montserrat-Regular',marginBottom: 5, marginTop: 20, color: this.props.screenProps.theme.slightlyMoreVisibleColour }}>
Total fee
</Text>
<Text style={{ fontFamily: 'Montserrat-Regular',color: this.props.screenProps.theme.primaryColour, fontSize: 16 }}>
{prettyPrintAmount(this.state.feeTotal, Config)}
</Text>
</View>
</View>
</ScrollView>
<BottomButton
title={t('sendTransaction')}
onPress={() => {
const params = {
amount: this.state.recipientAmount,
address: this.state.payee.address,
paymentID: this.state.payee.paymentID,
nickname: this.state.payee.nickname,
memo: this.state.memo,
hash: this.state.hash,
};
if (Globals.preferences.authConfirmation) {
/* Verify they have the correct pin, then send the actual TX */
Authenticate(
this.props.navigation,
'to confirm the transaction',
() => {
this.props.navigation.dispatch(navigateWithDisabledBack('ChoosePayee'));
this.props.navigation.navigate('SendTransaction', {...params});
}
);
} else {
/* Reset this stack to be on the transfer screen */
this.props.navigation.dispatch(navigateWithDisabledBack('ChoosePayee'));
/* Then send the actual transaction */
this.props.navigation.navigate('SendTransaction', {...params});
}
}}
{...this.props}
/>
</View>
);
}
Example #28
| Source File: SignUpScreen.js From spree-react-native with MIT License | 4 votes |
|
SignUpScreen = ({ navigation, dispatch }) => {
const [secureTextEntryToggle, setSecureTextEntryToggle] = useState(true)
const [inputPasswordBorder, setInputPasswordBorder] = useState(false)
const [inputPasswordConfirmationBorder, setInputPasswordConfirmationBorder] = useState(false)
const [userName, setUserName] = useState('')
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [passwordConfirmation, setPasswordConfirmation] = useState('')
const handleSignup = () => {
dispatch(accountCreate(
{
user: {
email: email,
password: password,
password_confirmation: passwordConfirmation
}
}
))
}
return (
<View style={globalStyles.container}>
<ChevronLeft size={24} style={styles.backButton}
onPress={navigation.goBack}
/>
<Text style={styles.title}>Join Spree Shop</Text>
<View style={[globalStyles.containerFluid, { justifyContent: 'space-evenly',}]}>
<View>
<TextField
placeholder="Name"
inputStyle={styles.inputStyle}
containerStyle={[styles.containerStyle, globalStyles.mb16]}
inputContainerStyle={styles.inputContainerStyle}
onChangeText={setUserName}
value={userName}
/>
<TextField
placeholder="Email"
inputStyle={styles.inputStyle}
containerStyle={[styles.containerStyle, globalStyles.mb16]}
inputContainerStyle={styles.inputContainerStyle}
onChangeText={setEmail}
value={email}
/>
<Input
placeholder="Password"
secureTextEntry={secureTextEntryToggle}
onFocus={() => setInputPasswordBorder(true)}
onBlur={() => setInputPasswordBorder(false)}
containerStyle={[ styles.inputMainContainer, { borderWidth: inputPasswordBorder ? 1 : 0 }]}
inputStyle={ styles.inputStyle }
inputContainerStyle={ styles.inputContainerStyle }
rightIcon={<Eye size={24} style={{ color: colors.gray }} onPress={() => setSecureTextEntryToggle(!secureTextEntryToggle)} />}
onChangeText={setPassword}
/>
<Input
placeholder="Password Confirmation"
secureTextEntry={secureTextEntryToggle}
onFocus={() => setInputPasswordConfirmationBorder(true)}
onBlur={() => setInputPasswordConfirmationBorder(false)}
containerStyle={[ styles.inputMainContainer, { borderWidth: inputPasswordConfirmationBorder ? 1 : 0 }]}
inputStyle={ styles.inputStyle }
inputContainerStyle={ styles.inputContainerStyle }
rightIcon={<Eye size={24} style={{ color: colors.gray }} onPress={() => setSecureTextEntryToggle(!secureTextEntryToggle)} />}
onChangeText={setPasswordConfirmation}
/>
<Button
title="Create Account"
buttonStyle={styles.buttonBlockStyle}
titleStyle={globalStyles.latoBold16}
onPress={handleSignup}
/>
<View style={styles.footer}>
<Text style={styles.label}>Already have an account? </Text>
<Text
style={styles.footerAction}
onPress={() => navigation.navigate('SignIn')}
> Login</Text>
</View>
</View>
<View>
<Text
style={[ styles.footerAction, { alignSelf: 'center' }]}
onPress={() => navigation.navigate('SignIn')}
> Terms of Use & Privacy Policy</Text>
</View>
</View>
</View>
)
}
Example #29
| Source File: ExportMnemonicWordScreen.js From RRWallet with MIT License | 4 votes |
|
render() {
return [
<ScrollView key={0} style={styles.scroll} alignItems="center">
<Text style={styles.title}>{this.isBackup ? "您的钱包助记词已生成" : "查看您的钱包助记词"}</Text>
<Text style={[styles.text, { marginTop: padding(16), marginHorizontal: padding(30) }]}>
请妥善备份好您的助记词，用于恢复您的数字钱包！RenrenBit不会在服务器上保存您的助记词
</Text>
<View style={styles.wordContainer}>
{this.state.words.map((word, index) => (
<View key={index} style={styles.wordwrap}>
<Text style={styles.index}>{_.padStart(index + 1 + "", 2, "0")}</Text>
<Text style={styles.word}>{word}</Text>
</View>
))}
</View>
<Text style={styles.subTitle}>如何安全备份助记词?</Text>
<View style={styles.blockContainer}>
<View style={styles.blockView}>
<Image
style={{ width: 48, height: 48, marginBottom: 8 }}
source={require("@img/wallet/mn_pic__photo.png")}
/>
<Image
style={{ position: "absolute", right: 16, top: 16, width: 28, height: 28 }}
source={require("@img/wallet/mn_pic__forbidden.png")}
/>
<Text style={styles.blockText}>请勿拍照/截屏</Text>
</View>
<View style={{ width: 9 }} />
<View style={styles.blockView}>
<Image
style={{ width: 48, height: 48, marginBottom: 8 }}
source={require("@img/wallet/mn_pic__wifi.png")}
/>
<Image
style={{ position: "absolute", right: 16, top: 16, width: 28, height: 28 }}
source={require("@img/wallet/mn_pic__forbidden.png")}
/>
<Text style={styles.blockText}>请勿网络传输/发送</Text>
</View>
</View>
<View style={[styles.blockContainer, { marginBottom: 23 }]}>
<View style={styles.blockView}>
<Image
style={{ width: 48, height: 48, marginBottom: 8 }}
source={require("@img/wallet/mn_pic__record.png")}
/>
<Image
style={{ position: "absolute", right: 16, top: 16, width: 28, height: 28 }}
source={require("@img/wallet/mn_pic__allow.png")}
/>
<Text style={styles.blockText}>纸笔抄录下来</Text>
</View>
<View style={{ width: 9 }} />
<View style={styles.blockView}>
<Image
style={{ width: 48, height: 48, marginBottom: 8 }}
source={require("@img/wallet/mn_pic__copy.png")}
/>
<Image
style={{ position: "absolute", right: 16, top: 16, width: 28, height: 28 }}
source={require("@img/wallet/mn_pic__allow.png")}
/>
<Text style={styles.blockText}>全屏复印保存</Text>
</View>
</View>
</ScrollView>,
<Footer key={1}>
<Button
title={this.isBackup ? "下一步" : "完成"}
onPress={this.nextButtonOnPress.bind(this)}
containerStyle={styles.nextButtonContainer}
buttonStyle={styles.nextButton}
/>
</Footer>,
<ScreenShotWarningModal
key={2}
visible={this.state.warningModal}
onModalHide={() => {
this.setState({ warningModal: false });
}}
/>,
];
}
