react-native-elements#Button JavaScript Examples

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>
    );
  }

function Color({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Color</Text>
      <Button
        onPress={navigation.goBack}
        title="Go Back"
      />
    </View>
  );
}

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>
    );
  }

ActionButtonFooter = ({ title, onPress }) => {
  return (
    <View style={styles.footer}>
      <Button
        title={title}
        type="solid"
        buttonStyle={ styles.footerAction }
        titleStyle={ globalStyles.latoBold16 }
        onPress={onPress}
      />
    </View>
  )
}

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>
  )
}

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>
    );
  }

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>
        );
    }

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}
		/>
	)
}

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>
        );
    }

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>
    );
  }

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>
  )
}

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>
    );
}

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>
  )
}

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>
    );
  }

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>
  )
}

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>
    );
  }

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>
  )
}

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>
    );
  }

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>
        )
    }

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>
        );
    }

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>
  )
}

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>
      );
    }
  }

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>
            );
        }
    }

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>
    );
  }

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>
    );
}

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>
        )
    }

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>
        );
    }

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>
  )
}

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 });
        }}
      />,
    ];
  }