react-native-keyboard-aware-scroll-view#KeyboardAwareScrollView JavaScript Examples

render() {
    const { options } = this.props;
    return (
      <KeyboardAwareScrollView
        innerRef={this.getScrollRef}
      >
        <FlatList
          ref={this.setListRef}
          data={options}
          renderItem={this.renderItem}
          keyExtractor={this.keyExtractor}
          ListFooterComponent={this.renderListFooter}
          extraData={options}
        />
      </KeyboardAwareScrollView>
    );
  }

function renderScrollableContent(...args) {
  const [
    containerPadding,
    children,
    screenHeight,
    keyboardHeight,
    onContentSizeChange,
    style,
  ] = args;

  const scrollEnabled = screenHeight > Scalling.height;

  return (
    <KeyboardAwareScrollView
      contentContainerStyle={{
        ...style.topContainer,
        paddingBottom: keyboardHeight,
      }}
      keyboardShouldPersistTaps='handled'
      showsVerticalScrollIndicator={false}
      scrollEnabled={scrollEnabled}
      onContentSizeChange={onContentSizeChange}
    >
      <View style={style[containerPadding]}>
        {children}
      </View>
    </KeyboardAwareScrollView>
  );
}

ProfileEdit = ({
  theme,
  user,
  usersEditProfile,
  usersEditProfileRequest,
  togglePrivacyStatus,
  toggleFollowCountsHidden,
  toggleLikesDisabled,
  toggleCommentsDisabled,
  toggleVerificationHidden,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  return (
    <View style={styling.root}>
      <KeyboardAwareScrollView>
        <View style={styling.form}>
          <ProfileEditForm
            user={user}
            usersEditProfile={usersEditProfile}
            usersEditProfileRequest={usersEditProfileRequest}
            PrivacyComponent={(
              <PrivacyForm
                user={user}
                togglePrivacyStatus={togglePrivacyStatus}
                toggleFollowCountsHidden={toggleFollowCountsHidden}
                toggleLikesDisabled={toggleLikesDisabled}
                toggleCommentsDisabled={toggleCommentsDisabled}
                toggleVerificationHidden={toggleVerificationHidden}
              />
            )}
          />
        </View>
      </KeyboardAwareScrollView>
    </View>
  )
}

PostEditComponent = ({
  theme,
  navigation,
  postsEditRequest,
  postsEdit,
  postsSingleGet,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  return (
    <KeyboardAwareScrollView>
      <View style={styling.form}>
        <PostEditForm
          navigation={navigation}
          postsEdit={postsEdit}
          postsEditRequest={postsEditRequest}
          postsSingleGet={postsSingleGet}
        />
      </View>
    </KeyboardAwareScrollView>
  )
}

PostCreateComponent = ({
  theme,
  user,
  cameraCapture,
  postsCreateRequest,
  postsCreate,
  handlePostPress,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  return (
    <KeyboardAwareScrollView>
      <View style={styling.form}>
        <PostCreateForm
          user={user}
          postsCreate={postsCreate}
          postsCreateRequest={postsCreateRequest}
          cameraCapture={cameraCapture}
          handlePostPress={handlePostPress}
        />
      </View>
    </KeyboardAwareScrollView>
  )
}

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() {
        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}>Size</Text>
                        <View style={styles.dropdownContainer}>
                        <Dropdown inputContainerStyle={styles.dropdownStyle} inputStyle={styles.dropdownTextStyle}
                                  pickerStyle={styles.dropdownItemContainer}
                                  selectedItemColor='mediumvioletred'
                                  dropdownOffset={{top: 0, bottom: 0}} rippleInsets={{top: 0, bottom: 0}}
                                  onChangeText={(value, index, data) => { this.setState({value}); }}
                                  data={this.state.sizeOptions} value={this.state.value} />
                            <Text style={[styles.labelStyle, {paddingLeft: 5}]}>{this.state.unit}</Text>
                        </View>
                        <Text style={[styles.errorStyle, {marginTop: -3}]}>{this.state.errorMessage1}</Text>
                    </View>
                    <View style={[styles.itemContainer, styles.bigHeight]}>
                        <Text style={styles.labelStyle}>Comments</Text>
                        <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: 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>
        )
    }

YourNameScreen = () => {
  const [name, setName] = React.useState(null);
  const navigation = useNavigation();

  const saveName = async () => {
    // Saving the Name in Asyncstorage
    try {
      await AsyncStorage.setItem('Name', name);
    } catch (e) {
      console.log(e);
    }
    if (name) {
      console.log(name);
      // Navigating to the next screen
      navigation.navigate('DoYouKnow');
    } else {
      alert('Please enter your Name to Proceed');
    }
  };

  return (
    <KeyboardAwareScrollView
      style={{ flex: 1 }}
      enableOnAndroid={true}
      enableAutoAutomaticScroll={true}
      keyboardOpeningTime={0}
    >
      <ScrollView
        style={{
          flex: 1,
          backgroundColor: 'white',
        }}
      >
        <View style={styles.container}>
          <Image source={top} style={styles.top} />
          <View style={{ flexDirection: 'row', marginTop: 200 }}>
            <Text
              style={[styles.nameText, { fontFamily: 'PT-Sans', fontSize: 30, fontWeight: 'bold' }]}
            ></Text>
            <Text style={styles.nameText}>{i18n.t('how_can_we_call_you')}</Text>
          </View>

          <TextInput
            style={styles.inputContainer}
            underlineColorAndroid="transparent"
            autoCapitalize="none"
            placeholder={i18n.t('please_enter_your_name')}
            onChangeText={text => setName(text)}
            value={name}
          />
          <Image source={bottom} style={styles.bottom} />
          <TouchableOpacity style={styles.button} onPress={saveName}>
            <Text style={styles.buttonText}>{i18n.t('continue')}</Text>
            <AntDesign
              style={{ alignSelf: 'center', color: '#F55963', top: 2, left: -4 }}
              name="arrowright"
              size={18}
            />
          </TouchableOpacity>
        </View>
      </ScrollView>
    </KeyboardAwareScrollView>
  );
}

Fullname = ({
  theme,
  navigation,
  authCheck,
  authOnboard,
  authOnboardRequest,
  authOnboardIdle,
  authSignoutRequest,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  return (
    <KeyboardAwareScrollView contentContainerStyle={styling.wrapper} extraScrollHeight={160}>
      <NativeError
        handleCancelPress={authOnboardIdle}
        titleText={t('Error occured')}
        messageText={t(path(['message', 'text'])(authOnboard))}
        actionText={t('Try again')}
        status={authOnboard.status}
        triggerOn="failure"
      />

      <View style={styling.root}>
        <View style={styling.title}>
          <Subheading>{t('Enter your full name & reserve your new username')}</Subheading>
        </View>
        <View style={styling.form}>
          <FullnameForm
            authCheck={authCheck}
            authOnboard={authOnboard}
            authOnboardRequest={authOnboardRequest}
          />
        </View>
        <View style={styling.subtitle}>
          <Subtitle actions={[{
            onPress: () => Linking.openURL('https://real.app/real-eula-html-english.html').catch(() => {}),
            title: t('By tapping to continue, you are indicating that you have read the EULA and agree to the Terms of Service'),
          }, {
            onPress: authSignoutRequest,
            title: t('Signout'),
          }]} />
        </View>
      </View>
    </KeyboardAwareScrollView>
  )
}

Auth = ({
  navigation,
  theme,
  authFacebook,
  authFacebookRequest,
  authGoogle,
  authGoogleRequest,
  authSignin,
  authSigninRequest,
  authSigninIdle,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  return (
    <KeyboardAwareScrollView contentContainerStyle={styling.wrapper} extraScrollHeight={160}>
      <NativeError
        handleCancelPress={authSigninIdle}
        titleText={t('Error occured')}
        messageText={t(path(['message', 'text'])(authSignin))}
        actionText={t('Try again')}
        status={authSignin.status}
        triggerOn="failure"
        hidden={(
          t(path(['message', 'code'])(authSignin)) === 'GENERIC' ||
          t(path(['message', 'code'])(authSignin)) === 'USER_NOT_FOUND'
        )}
      />

      <View style={styling.root}>
        <View style={styling.title}>
          <Subheading>{t('One Tap')} {t('Login / Signup')}</Subheading>
        </View>
        <View style={styling.footer}>
          <Federated
            authFacebook={authFacebook}
            authFacebookRequest={authFacebookRequest}
            authGoogle={authGoogle}
            authGoogleRequest={authGoogleRequest}
          />
        </View>
        <View style={styling.subtitle}>
          <Subtitle actions={[{
            onPress: () => {},
            title: t('Or Login / Signup'),
          }]} />
        </View>
        <View style={styling.form}>
          <UsernameForm
            authSignin={authSignin}
            authSigninRequest={authSigninRequest}
          />
        </View>
        <View style={styling.subtitle}>
          <Subtitle actions={[{
            onPress: () => navigation.navigate('AuthForgot'),
            title: t('Forgot Password'),
          }]} />
        </View>
      </View>
    </KeyboardAwareScrollView>
  )
}

export default function LoginScreen({navigation}) {
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')

    const onFooterLinkPress = () => {
        navigation.navigate('Registration')
    }

    const onLoginPress = () => {
        firebase
            .auth()
            .signInWithEmailAndPassword(email, password)
            .then((response) => {
                const uid = response.user.uid
                const usersRef = firebase.firestore().collection('users')
                usersRef
                    .doc(uid)
                    .get()
                    .then(firestoreDocument => {
                        if (!firestoreDocument.exists) {
                            alert("User does not exist anymore.")
                            return;
                        }
                        const user = firestoreDocument.data()
                        navigation.navigate('Home', {user: user})
                    })
                    .catch(error => {
                        alert(error)
                    });
            })
            .catch(error => {
                alert(error)
            })
    }

    return (
        <View style={styles.container}>
            <KeyboardAwareScrollView
                style={{ flex: 1, width: '100%' }}
                keyboardShouldPersistTaps="always">
                <Image
                    style={styles.logo}
                    source={require('../../../assets/icon.png')}
                />
                <TextInput
                    style={styles.input}
                    placeholder='E-mail'
                    placeholderTextColor="#aaaaaa"
                    onChangeText={(text) => setEmail(text)}
                    value={email}
                    underlineColorAndroid="transparent"
                    autoCapitalize="none"
                />
                <TextInput
                    style={styles.input}
                    placeholderTextColor="#aaaaaa"
                    secureTextEntry
                    placeholder='Password'
                    onChangeText={(text) => setPassword(text)}
                    value={password}
                    underlineColorAndroid="transparent"
                    autoCapitalize="none"
                />
                <TouchableOpacity
                    style={styles.button}
                    onPress={() => onLoginPress()}>
                    <Text style={styles.buttonTitle}>Log in</Text>
                </TouchableOpacity>
                <View style={styles.footerView}>
                    <Text style={styles.footerText}>Don't have an account? <Text onPress={onFooterLinkPress} style={styles.footerLink}>Sign up</Text></Text>
                </View>
            </KeyboardAwareScrollView>
        </View>
    )
}

render() {
        const {goBack} = this.props.navigation;
        return (
            <SafeAreaView style={{flex: 1,}}>
                <KeyboardAwareScrollView contentContainerStyle={styles.container} enableOnAndroid={true}
                                         resetScrollToCoords={{ x: 0, y: 0 }}
                                         scrollEnabled={true}>
                    <Spinner
                        visible={this.state.spinner}
                        textContent={'Sending to Coach...'}
                        overlayColor='rgba(0, 0, 0, 0.5)'
                        textStyle={{color: 'white'}}
                    />


                    <View style={styles.photoContainer}>
                        <TouchableOpacity style={{flex: 1,}} onPress={this.onCamera}>
                            <Image source={this.state.photo} style={[styles.photo, {resizeMode: this.state.isEmptyPhoto ? "center" : "contain",}]}/>
                        </TouchableOpacity>
                    </View>

                    <View style={{marginTop: 10}}>
                        <View style={styles.itemContainer}>
                            <Text style={{paddingLeft: 20}}>Subject</Text>
                            <Input ref={(input) => { this._subjectInput = input; }}
                                   inputContainerStyle={styles.inputStyle}
                                   inputStyle={styles.inputInnerStyle}
                                   placeholder='' returnKeyType='next'
                                   onSubmitEditing={() => { this._commentInput.focus(); }}
                                   blurOnSubmit={false}
                                   onChangeText={(subject) => { this.setState({subject});}}
                                   value={this.state.subject}
                                   errorMessage={this.state.errorMessage1} errorStyle={{paddingLeft: 20}} />
                        </View>
                        <View style={styles.itemContainer}>
                            <Text style={{paddingLeft: 20}}>Comment</Text>
                            <Input ref={(input) => { this._commentInput = input; }}
                                   inputContainerStyle={styles.multilineInputStyle}
                                   inputStyle={styles.multilineInnerStyle} multiline={true} numberOfLines={6}
                                   placeholder=''
                                   onChangeText={(comment) => { this.setState({comment}); }}
                                   value={this.state.comment}
                                   errorMessage={this.state.errorMessage2} errorStyle={{paddingLeft: 20}} />
                        </View>
                    </View>
                    <View style={styles.buttonsContainer}>
                        <Button raised buttonStyle={styles.cancelButton} title='Cancel' onPress={() => goBack()} />
                        <Button raised buttonStyle={styles.submitButton} title='Submit' onPress={this.onSubmit} />
                    </View>
                </KeyboardAwareScrollView>
            </SafeAreaView>
        )
    }

render() {
        const { goBack } = this.props.navigation;
        return (<SafeAreaView style={{ flex: 1, }}>
                    <KeyboardAwareScrollView contentContainerStyle={styles.container}
                        enableOnAndroid={true}
                        resetScrollToCoords={{ x: 0, y: 0 }}
                        scrollEnabled={true}>
                        <Spinner visible={this.state.spinner}
                            textContent={'Sending to Coach...'}
                            overlayColor='rgba(0, 0, 0, 0.5)'
                            textStyle={{ color: 'white' }}
                        />
                        <View style={{ marginTop: 10 }}>
                            <View style={styles.itemContainer} >
                                <Text style={{ paddingLeft: 20 }}> Subject </Text> 
                                <Input ref={(input) => { this._subjectInput = input; }}
                                    inputContainerStyle={styles.inputStyle}
                                    inputStyle={styles.inputInnerStyle}
                                    placeholder=''
                                    returnKeyType='next'
                                    onSubmitEditing={() => { this._commentInput.focus(); }}
                                    blurOnSubmit={false}
                                    onChangeText={(subject) => { this.setState({ subject }); }}
                                    value={this.state.subject}
                                    errorMessage={this.state.errorMessage1}
                                    errorStyle={{ paddingLeft: 20 }}
                                /> 
                            </View>
                            <View style={styles.itemContainer} >
                                <Text style={{ paddingLeft: 20 }}> Comment </Text> 
                                <Input ref={(input) => { this._commentInput = input; }}
                                    inputContainerStyle={styles.multilineInputStyle}
                                    inputStyle={styles.multilineInnerStyle}
                                    multiline={true}
                                    numberOfLines={6}
                                    placeholder=''
                                    onChangeText={(comment) => { this.setState({ comment }); }}
                                    value={this.state.comment}
                                    errorMessage={this.state.errorMessage2}
                                    errorStyle={{ paddingLeft: 20 }}
                                /> </View>
                            </View> 
                            <View style={styles.buttonsContainer}>
                                <Button raised buttonStyle={styles.cancelButton}
                                    title='Cancel'
                                    onPress={() => goBack()}
                                /> 
                                <Button raised buttonStyle={styles.submitButton}
                                    title='Send'
                                    onPress={this.onSubmit}
                                /> 
                            </View>
                            </KeyboardAwareScrollView>
                        </SafeAreaView >
                    )
                }

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() {
    const {route, intl} = this.props;
    const {status, declare} = this.state;
    const item = (route && route.params.data) || {};
    const {formatMessage} = intl;
    const {Language} = configuration;
    const notifyObj = route.params.data;

    const iconURI = notifyObj.largeIcon;

    return (
      <SafeAreaView style={{flex: 1, backgroundColor: '#ffffff'}}>
        <KeyboardAwareScrollView
          style={styles.container}
          enableAutomaticScroll={true}
          showsHorizontalScrollIndicator={false}
          showsVerticalScrollIndicator={false}>
          <Header
            colorIcon={status === 'infected' ? '#ff0000' : '#015cd0'}
            styleTitle={[
              styles.textHeader,
              {color: status === 'infected' ? '#ff0000' : '#015cd0'},
            ]}
            title={formatMessage(home.warn)}
          />
          <View style={styles.wrapper}>
            <View style={{flexDirection: 'row', alignItems: 'center'}}>
              <FastImage
                source={iconURI ? {uri: iconURI} : bluezoneIcon}
                style={styles.avatar}
              />
              <View style={styles.content}>
                <MediumText numberOfLines={1} style={styles.titleText}>
                  {Language === 'vi' ? item.title : item.titleEn}
                </MediumText>
                <MediumText style={styles.colorDes}>
                  {` ${moment(item.timestamp).format('DD/MM/YYYY')} - ${moment(
                    item.timestamp,
                  ).format('HH:mm')}`}
                </MediumText>
              </View>
            </View>
            {/* Xác minh thấy có tiếp xúc */}
            {status === 'contact' && (
              <NotifyContact
                notifyObj={notifyObj}
                declare={declare}
                onBack={this.onBack}
              />
            )}
          </View>
        </KeyboardAwareScrollView>
      </SafeAreaView>
    );
  }

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

render() {
    const {
      termsAndConditions,
      refundPolicy,
    } = this.state;
    return (
      <KeyboardAwareScrollView>
        <InputGroup title="Return Policy">
          <Animated.View
            style={{
              overflow: 'hidden',
              height: this.refundAniVal.interpolate({
                inputRange: [0, 1],
                outputRange: [50, 193],
              }),
            }}
          >
            <TextInput
              title="Refunds"
              noBorder
              noTitle
              multiline
              value={refundPolicy}
              onChangeText={this.onChangeRefundPolicy}
              placeholder="What is your return policy? How long are returns accepted for? Who pays for return shipping?"
            />
          </Animated.View>
        </InputGroup>
        <InputGroup title="Terms and Conditions">
          <Animated.View
            style={{
              overflow: 'hidden',
              height: this.termAnival.interpolate({
                inputRange: [0, 1],
                outputRange: [50, 193],
              }),
            }}
          >
            <TextInput
              title="T&Cs"
              noBorder
              noTitle
              multiline
              value={termsAndConditions}
              onChangeText={this.onChangeTCPolicy}
              placeholder="What are the terms and conditions of the listing? What are you responsible for as the vendor? Is there a warranty?"
            />
          </Animated.View>
        </InputGroup>
      </KeyboardAwareScrollView>
    );
  }

render() {
    const {
      images, productType, tags, onBack, onSave,
    } = this.props;

    const { keyboardVisible } = this.state;

    const wrapperStyle = {
      backgroundColor,
      flex: 1,
    };
    return (
      <View style={screenWrapper.wrapper}>
        <ListingHeader
          editing
          showActions={images.length > 0}
          onBack={onBack}
          action={this.handleAddImage}
          onMore={this.handlePressMore}
        />
        <StatusBarSpacer />
        <KeyboardAwareScrollView
          style={wrapperStyle}
          innerRef={this.getScrollRef}
          keyboardShouldPersistTaps="always"
        >
          <ImageSelector ref={this.selectorRef} images={images} onChange={this.onChangeImages} />
          <ItemDetail onFocusItem={this.handleInputOnFocus} />
          {(productType.value === 'physical_good' || productType === 'physical_good') && (
            <ShippingOptions onPress={this.toShippingOptions} />
          )}
          <TagEditor count={tags.length} onPress={this.toTagEditor} />

          <InputGroup title="Advanced" noBorder onPress={this.toAdvancedOptions}>
            <OptionGroup noBorder noArrow>
              <React.Fragment>
                <FormLabelText text="Add variants, store policies, coupons and manage your inventory" />
                <MoreButton onPress={this.toAdvancedOptions} />
              </React.Fragment>
            </OptionGroup>
          </InputGroup>
          {keyboardVisible && <EditListingFooter onSave={onSave} />}
        </KeyboardAwareScrollView>
        {!keyboardVisible && <EditListingFooter onSave={onSave} />}
      </View>
    );
  }

export default function LoginScreen({ navigation }) {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  const onFooterLinkPress = () => {
    navigation.navigate('Registration')
  }

  const onLoginPress = () => {
    firebase
      .auth()
      .signInWithEmailAndPassword(email, password)
      .then((response) => {
        const uid = response.user.uid
        const usersRef = firebase.firestore().collection('users')
        usersRef
          .doc(uid)
          .get()
          .then((firestoreDocument) => {
            if (!firestoreDocument.exists) {
              alert('User does not exist anymore.')
              return
            }
            const user = firestoreDocument.data()
            navigation.navigate('Home', { user: user })
          })
          .catch((error) => {
            alert(error)
          })
      })
      .catch((error) => {
        alert(error)
      })
  }

  return (
    <View style={styles.container}>
      <KeyboardAwareScrollView
        style={{ flex: 1, width: '100%' }}
        keyboardShouldPersistTaps='always'
      >
        <Image
          style={styles.logo}
          source={require('../../../assets/icon.png')}
        />
        <TextInput
          style={styles.input}
          placeholder='E-mail'
          placeholderTextColor='#aaaaaa'
          onChangeText={(text) => setEmail(text)}
          value={email}
          underlineColorAndroid='transparent'
          autoCapitalize='none'
        />
        <TextInput
          style={styles.input}
          placeholderTextColor='#aaaaaa'
          secureTextEntry
          placeholder='Password'
          onChangeText={(text) => setPassword(text)}
          value={password}
          underlineColorAndroid='transparent'
          autoCapitalize='none'
        />
        <TouchableOpacity style={styles.button} onPress={() => onLoginPress()}>
          <Text style={styles.buttonTitle}>Log in</Text>
        </TouchableOpacity>
        <View style={styles.footerView}>
          <Text style={styles.footerText}>
            Don&apos;t have an account?{' '}
            <Text onPress={onFooterLinkPress} style={styles.footerLink}>
              Sign up
            </Text>
          </Text>
        </View>
      </KeyboardAwareScrollView>
    </View>
  )
}

render() {
    const {
      show, order, hideModal, finishReview,
    } = this.props;
    const {
      overall,
      quality,
      description,
      deliverySpeed,
      customerService,
      review,
      anonymous,
    } = this.state;
    return (
      <OBLightModal visible={show} animationType="slide">
        <Header
          modal
          left={<NavCloseButton />}
          onLeft={hideModal}
          right={<LinkText text="Done" color={linkTextColor} />}
          onRight={() => finishReview(order.orderId, [{ slug: order.slug, ...this.state }])}
        />
        <KeyboardAwareScrollView
          style={styles.scrollview}
          contentContainerStyle={styles.content}
          innerRef={(ref) => {
            this.scroll = ref;
          }}
        >
          <RatingInput
            title="Overall"
            value={overall}
            onPress={this.handleChange('overall')}
          />
          <RatingInput
            title="Quality"
            value={quality}
            onPress={this.handleChange('quality')}
          />
          <RatingInput
            title="As advertised"
            value={description}
            onPress={this.handleChange('description')}
          />
          <RatingInput
            title="Delivery"
            value={deliverySpeed}
            onPress={this.handleChange('deliverySpeed')}
          />
          <RatingInput
            title="Service"
            value={customerService}
            onPress={this.handleChange('customerService')}
          />
          <TextArea
            style={styles.inputText}
            noBorder
            value={review}
            onChangeText={this.handleChange('review')}
            placeholder="Write a review here"
            onFocus={this.handleFocus}
          />
          <CheckBox
            checked={anonymous}
            title="Post anonymously"
            onPress={() => {
              this.setState({
                anonymous: !anonymous,
              });
            }}
          />
        </KeyboardAwareScrollView>
      </OBLightModal>
    );
  }

render() {
    return (
      <View style={styles.main}>
        <KeyboardAwareScrollView
          enableOnAndroid={true}
          keyboardDismissMode="interactive"
          keyboardShouldPersistTaps="always">
          {this.isImport && <Text style={[styles.note, { marginTop: 16 }]}>◎ {i18n.t("wallet-recovery-desc1")}</Text>}
          <Text style={[styles.note, !this.isImport && { marginTop: 16 }]}>◎ {i18n.t("wallet-recovery-desc2")}</Text>
          <Text style={styles.note}>◎ {i18n.t("wallet-recovery-desc3")}</Text>
          <View style={[styles.card, { marginTop: 16 }]}>
            <View style={{ flex: 1 }}>
              <TextInput
                placeholder={i18n.t("wallet-recovery-word-placeholder")}
                underlineColorAndroid="transparent"
                onChangeText={text => (this.word = text)}
                value={this.word}
                autoCapitalize="none"
                multiline={true}
                clearButtonMode="while-editing"
                style={[styles.mnemonicInput, { width: this.hackWidth }]}
                autoCorrect={false}
                spellCheck={false}></TextInput>
            </View>
          </View>
          <ForumItem
            style={styles.input}
            title={i18n.t("wallet-recovery-setpwd")}
            onChangeText={text => (this.pwd = text)}
            placeholder={i18n.t("wallet-recovery-setpwd-placeholder")}
            value={this.pwd}
            secureTextEntry={true}
            renderInputRightView={this.renderInputRightView}
          />
          <ForumItem
            style={styles.input}
            title={i18n.t("wallet-recovery-confirmpwd")}
            onChangeText={text => (this.repwd = text)}
            placeholder={i18n.t("wallet-recovery-confirmpwd-placeholder")}
            value={this.repwd}
            secureTextEntry={true}
          />
          <Button
            title={this.isImport ? i18n.t("wallet-recovery-recovery") : i18n.t("wallet-recovery-import")}
            onPress={this.importButtonOnPress}
            backgroundColor={theme.brandColor}
            containerStyle={styles.importButtonContainer}
            buttonStyle={styles.importButton}
          />
          <ProgressHUD ref={ref => (this.hud = ref)} />
          <Tip ref={ref => (this.tip = ref)} />
        </KeyboardAwareScrollView>
      </View>
    );
  }

render() {
    const { refundPolicy, termsAndConditions } = this.state;
    return (
      <View style={screenWrapper.wrapper}>
        <Header
          left={<NavBackButton />}
          onLeft={this.onLeft}
          title="Store Policies"
          right={<LinkText text="Save" />}
          onRight={this.onRight}
        />
        <KeyboardAwareScrollView style={{ flex: 1 }}>
          <InputGroup title="Terms and Conditions">
            <TextInput
              ref={this.setTermsRef}
              style={styles.input}
              multiline
              numberOfLines={6}
              onChangeText={this.onChangeTerms}
              onSubmitEditing={this.changeFocus}
              value={termsAndConditions}
              noBorder
              underlineColorAndroid="transparent"
              placeholder="What are the terms and conditions of the listing? What are you responsible for as the vendor? Is there a warranty?"
            />
          </InputGroup>
          <InputGroup title="Refunds">
            <TextInput
              ref={this.setRefundRef}
              style={styles.input}
              multiline
              numberOfLines={6}
              onChangeText={this.onChangeRefund}
              value={refundPolicy}
              noBorder
              underlineColorAndroid="transparent"
              placeholder="What is your return policy? How long are returns accepted for? Who pays for return shipping?"
            />
          </InputGroup>
        </KeyboardAwareScrollView>
      </View>
    );
  }

render() {
        return (
            <SafeAreaView style={{flex: 1,}}>
                <KeyboardAwareScrollView contentContainerStyle={styles.container} enableOnAndroid={true}
                        enableAutomaticScroll={true}>
                    <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.titleContainer}>
                        <Text style={styles.title}>Login to Experience</Text>
                        <Text style={styles.subtitle}>Natural beautification from the inside out.</Text>
                    </View>
                    <View style={styles.inputContainer}>
                        <Input ref={(input) => { this.emailInput = input; }}
                               inputContainerStyle={styles.inputStyle}
                               leftIcon={<Icon name="envelope" style={styles.iconSmallStyle} />}
                               inputStyle={styles.inputInnerStyle}
                               placeholder="Email" autoCapitalize="none" keyboardType="email-address" returnKeyType="next"
                               onSubmitEditing={() => { this.passwordInput.focus(); }}
                               blurOnSubmit={false}
                               onChangeText={(email) => { this.setState({email}); }}
                               value={this.state.email}
                               errorMessage={this.state.errorMessage1} errorStyle={{paddingLeft: 20}} />
                        <View style={{width: '100%', alignItems: 'flex-end'}}>
                            <Input ref={(input) => { this.passwordInput = input; }}
                                   inputContainerStyle={styles.inputStyle}
                                   leftIcon={<Icon name="lock" style={styles.iconNormalStyle} />}
                                   inputStyle={styles.inputInnerStyle}
                                   secureTextEntry={true}
                                   placeholder="Password"
                                   onChangeText={(password) => { this.setState({password}); }}
                                   value={this.state.password}
                                   errorMessage={this.state.errorMessage2} errorStyle={{paddingLeft: 20}} />
                            <TouchableOpacity  onPress={this.onForgotPassword}>
                                <Text style={styles.forgotButton}>Forgot password?</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                    <View style={styles.buttonsContainer}>
                        <Button raised buttonStyle={styles.backButton} title="Back" onPress={this.onBack} />
                        <Button raised buttonStyle={styles.loginButton} title="Login" onPress={this.onLogin} />
                    </View>
                </KeyboardAwareScrollView>
            </SafeAreaView>
        );
    }

render() {
    return (
      <View style={styles.main}>
        <KeyboardAwareScrollView
          enableOnAndroid={true}
          keyboardDismissMode="interactive"
          contentContainerStyle={styles.container}
          keyboardShouldPersistTaps="always">
          <Text style={[styles.note, { marginTop: 16 }]}>◎ {i18n.t("wallet-create-desc1")}</Text>
          <Text style={styles.note}>◎ {i18n.t("wallet-create-desc2")}</Text>
          <ForumItem
            title={i18n.t("wallet-create-setpwd")}
            onChangeText={text => (this.pwd = text)}
            placeholder={i18n.t("wallet-create-setpwd-placeholder")}
            style={styles.input}
            returnKeyType="done"
            secureTextEntry={true}
            renderInputRightView={this.renderInputRightView}
          />
          <ForumItem
            title={i18n.t("wallet-create-confirmpwd")}
            onChangeText={text => (this.repwd = text)}
            placeholder={i18n.t("wallet-create-confirmpwd-placeholder")}
            style={styles.input}
            returnKeyType="done"
            secureTextEntry={true}
          />
          <View style={styles.card}>
            <View style={[styles.row]}>
              <Text style={styles.desc}>{i18n.t("wallet-create-mnemonic-type")}</Text>
              <TouchableWithoutFeedback onPress={this.onMnemonicWordTypePress}>
                <View style={styles.mnemonicWordTypeWrap}>
                  <Text style={[styles.desc, { marginRight: 6 }]}>{this.mnemonicWordTypeText}</Text>
                  <Image source={require("@img/icon/arrow-right.png")} />
                </View>
              </TouchableWithoutFeedback>
            </View>
          </View>
          <TouchableWithoutFeedback onPress={this.onAgreementCheckBoxPress}>
            <View style={styles.checkbox}>
              <Image source={this.icon} />
              <Text style={styles.aggre}>{i18n.t("wallet-create-agreement-1")}</Text>
              <TouchableHighlight
                onPress={this.onAgreementPress}
                hitSlop={{ top: 10, bottom: 10, left: 20, right: 20 }}
                activeOpacity={0.6}
                underlayColor="transparent">
                <Text style={styles.agreement}> {i18n.t("wallet-create-agreement-2")}</Text>
              </TouchableHighlight>
            </View>
          </TouchableWithoutFeedback>
          <Button
            title={i18n.t("wallet-create-create")}
            disabled={!this.checked}
            onPress={this.nextButtonOnPress.bind(this)}
            containerStyle={styles.nextButtonContainer}
            buttonStyle={styles.nextButton}
          />
          <ProgressHUD ref={ref => (this.hud = ref)} />
          <Tip ref={ref => (this.tip = ref)} />
          <ActionSheet
            ref={ref => (this.sheet = ref)}
            onPress={this.onActionSheetItemPress}
            cancelButtonIndex={this.sheetOptions.length - 1}
            options={this.sheetOptions}
          />
        </KeyboardAwareScrollView>
      </View>
    );
  }

export default function RegisterScreen() {
  const navigate = useNavigation();
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [errorMessage, setErrorMessage] = useState("");
  const [visible, setVisible] = useState(false);

  const handleRegister = () => {
    if (errorMessage === "") {
      setVisible(() => true);
      fb.auth
        .createUserWithEmailAndPassword(email, password)
        .then((userCredentials) => {
          setVisible(() => false);
          fb.userCollection.doc(userCredentials.user.uid).set({
            scenes: [],
            uid: userCredentials.user.uid
          });
          return userCredentials.user.updateProfile({
            displayName: name,
          });
        })
        .catch((error) => {
          setVisible(() => false);
          setErrorMessage(error);
        });
    }
  };
  useEffect(() => {
    LayoutAnimation.easeInEaseOut();
  });
  return visible ? (
    <LoadingScreen />
  ) : (
    <KeyboardAwareScrollView
      resetScrollToCoords={{ x: 0, y: 0 }}
      contentContainerStyle={styles.container}
      enableOnAndroid={true}
      keyboardShouldPersistTaps="handled"
      scrollEnabled={true}
      enableAutomaticScroll={Platform.OS === "ios"}
    >
      <StatusBar barStyle="light-content"></StatusBar>
      <ScrollView
          keyboardShouldPersistTaps={"handled"}
        style={{
          height: "100%",
          backgroundColor: 'black'
        }}
      >
        <TouchableOpacity style={styles.back} onPress={() => navigate.goBack()}>
          <Ionicons name="ios-arrow-round-back" color="white" size={32} />
        </TouchableOpacity>
        <Text style={styles.greeting}>{"Become one of us"}</Text>
        <View style={styles.errorMessage}>
          <Text style={styles.error}>{errorMessage.message}</Text>
        </View>
        <View style={styles.form}>
          <View>
            <Text style={styles.inputTitle}>Name</Text>
            <TextInput
              style={styles.input}
              autoCapitalize="none"
              onChangeText={(nameInput) => setName(() => nameInput.trim())}
              value={name}
            ></TextInput>
          </View>
          <View>
            <Text style={styles.inputTitle}>Email Address</Text>
            <TextInput
              style={styles.input}
              autoCapitalize="none"
              onChangeText={(emailInput) => setEmail(() => emailInput.trim())}
              value={email}
            ></TextInput>
          </View>
          <View>
            <Text style={styles.inputTitle}>Password</Text>
            <TextInput
              style={styles.input}
              secureTextEntry
              autoCapitalize="none"
              onChangeText={(password) => setPassword(() => password.trim())}
              value={password}
            ></TextInput>
          </View>
          <View>
            <Text style={styles.inputTitle}>Confirm Password</Text>
            <TextInput
              style={styles.input}
              secureTextEntry
              autoCapitalize="none"
              onChangeText={(passwordInput) => {
                //setPasswordConfirm(passwordInput)
                if (passwordInput != password)
                  setErrorMessage(() => "Incorrect Passwords");
                else setErrorMessage(() => "");
              }}
            ></TextInput>
          </View>
          <TouchableOpacity style={styles.button} onPress={handleRegister}>
            <Text style={{ color: "white", fontWeight: "500" }}>Register</Text>
          </TouchableOpacity>
        </View>
      </ScrollView>
    </KeyboardAwareScrollView>
  );
}

export default function SignUpScreen({navigation, route}) {
  const {contest} = route.params;
  const [focus, setFocus] = useState('');

  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [email, setEmail] = useState('');
  const [zip, setZip] = useState('');
  const [age, setAge] = useState('');
  const [termsAgreed, setTermsAgreed] = useState(false);

  const [isLoading, setLoading] = useState(false);

  const [showAlert, setShowAlert] = useState(false);
  const [alertTitle, setAlertTitle] = useState('');
  const [alertMessage, setAlertMessage] = useState('');
  const [showPrivacyPolicy, setShowPrivacyPolicy] = useState(false);
  const [showContestRules, setShowContestRules] = useState(false);

  const screenDims = Dimensions.get('screen');
  const [privacyText, setPrivacyText] = useState();
  loadLocalResource(Privacy[Strings.getLanguage()]).then(text =>
    setPrivacyText(text),
  );
  const [contestRulesText, setContestRulesText] = useState();
  loadLocalResource(ContestRules[Strings.getLanguage()]).then(text =>
    setContestRulesText(text),
  );

  useFocusEffect(
    useCallback(() => {
      const onBackPress = () => {
        if (showAlert) {
          setShowAlert(false);
          return true;
        } else if (showPrivacyPolicy) {
          setShowPrivacyPolicy(false);
          return true;
        }
        return false;
      };
      BackHandler.addEventListener('hardwareBackPress', onBackPress);
      return () =>
        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
    }),
  );

  async function onSubmit() {
    /// validate email
    if (!email.trim().match(/^[^@ ]+@[^. ]+(?:\.[^. ]+)+$/)) {
      setAlertTitle(Strings.signUp.emailAlertTitle);
      setAlertMessage(Strings.signUp.emailAlertMessage);
      setShowAlert(true);
      return;
    }
    /// validate zip-5 digits
    if (!zip.trim().match(/^\d{5}$/)) {
      setAlertTitle(Strings.signUp.zipAlertTitle);
      setAlertMessage(Strings.signUp.zipAlertMessage);
      setShowAlert(true);
      return;
    }
    //validate zip- sf resident
    else if (!validZipCodes.includes(zip.trim())) {
      setAlertTitle(Strings.signUp.zipRestrictionAlertTitle);
      setAlertMessage(Strings.signUp.zipRestrictionAlertMessage);
      setShowAlert(true);
      return;
    }
    /// validate age
    const parsedAge = parseInt(age, 10);
    if (isNaN(parsedAge) || parsedAge < 18) {
      setAlertTitle(Strings.signUp.ageAlertTitle);
      setAlertMessage(Strings.signUp.ageAlertMessage);
      setShowAlert(true);
      return;
    }
    setLoading(true);
    try {
      const settings = await Realm.getSettings();
      const response = await Api.appUser.create(
        firstName.trim(),
        lastName.trim(),
        email.trim(),
        zip.trim(),
        parsedAge,
        settings.accountId,
      );
      const user = await Realm.createUser({
        ...response.data.payload,
        id: response.data.payload.account_id,
      });
      setLoading(false);
      if (user.isSurveyCompleted) {
        navigation.navigate('Info');
      } else {
        navigation.navigate('LoHOrigin');
      }
    } catch (error) {
      setLoading(false);
      setAlertTitle(Strings.common.serverErrorTitle);
      setAlertMessage(Strings.common.serverErrorMessage);
      setShowAlert(true);
    }
  }

  function onPolicyPress() {
    setShowPrivacyPolicy(true);
  }

  function onContestRulesPress() {
    setShowContestRules(true);
  }

  function isValid() {
    return (
      firstName.trim() !== '' &&
      lastName.trim() !== '' &&
      email.trim() !== '' &&
      zip.trim() !== '' &&
      age.trim() !== '' &&
      termsAgreed
    );
  }

  return (
    <SafeAreaView style={GlobalStyles.container}>
      <KeyboardAwareScrollView style={GlobalStyles.container}>
        <View style={styles.content}>
          <Text style={GlobalStyles.h1}>{Strings.common.welcome}</Text>
          <View style={[styles.row, styles.logos]}>
            <Image
              source={require('../../assets/sfdph_logo.png')}
              style={[styles.logo, styles.sfdphLogo]}
            />
            <Image
              source={require('../../assets/sfgiants_logo.png')}
              style={[styles.logo, styles.giantsLogo]}
            />
          </View>
          <Text style={GlobalStyles.p1}>
            {Strings.formatString(
              Strings.signUp.about,
              Strings.formatString(
                Strings.common.range,
                moment(contest.start).format(Strings.common.rangeFrom),
                moment(contest.end).format(Strings.common.rangeTo),
              ),
            )}
          </Text>
          <View style={styles.row}>
            <Input
              onSubmitEditing={() => setFocus('last_name')}
              onChangeText={newValue => setFirstName(newValue)}
              style={styles.input}
              placeholder={Strings.signUp.firstName}
              autoCapitalize="words"
              autoCompleteType="name"
              returnKeyType="next"
              editable={!isLoading}
            />
            <View style={styles.spacer} />
            <Input
              focused={focus === 'last_name'}
              onSubmitEditing={() => setFocus('email')}
              onChangeText={newValue => setLastName(newValue)}
              style={styles.input}
              placeholder={Strings.signUp.lastName}
              autoCapitalize="words"
              autoCompleteType="name"
              returnKeyType="next"
              editable={!isLoading}
            />
          </View>
          <Input
            focused={focus === 'email'}
            onSubmitEditing={() => setFocus('zip')}
            onChangeText={newValue => setEmail(newValue)}
            placeholder={Strings.signUp.email}
            autoCompleteType="email"
            keyboardType="email-address"
            returnKeyType="next"
            editable={!isLoading}
          />
          <View style={styles.row}>
            <Input
              focused={focus === 'zip'}
              onSubmitEditing={() => setFocus('age')}
              onChangeText={newValue => setZip(newValue)}
              style={styles.input}
              placeholder={Strings.signUp.zipCode}
              keyboardType="number-pad"
              returnKeyType={Platform.select({ios: 'done', android: 'next'})}
              editable={!isLoading}
            />
            <View style={styles.spacer} />
            <Input
              focused={focus === 'age'}
              onSubmitEditing={() => setFocus('')}
              onChangeText={newValue => setAge(newValue)}
              style={styles.input}
              placeholder={Strings.signUp.age}
              keyboardType="number-pad"
              editable={!isLoading}
            />
          </View>
          <Text style={[GlobalStyles.p1, styles.requiredText]}>
            {Strings.signUp.required}
          </Text>
          <CheckBox
            style={styles.agreeCheckBox}
            checked={termsAgreed}
            onPress={() => setTermsAgreed(!termsAgreed)}
            editable={!isLoading}>
            <Text
              style={[GlobalStyles.p1, styles.agreeText]}
              onPress={() => setTermsAgreed(!termsAgreed)}>
              {Strings.formatString(
                Strings.signUp.agree,
                <Text style={styles.linkText} onPress={onPolicyPress}>
                  {Strings.signUp.policy}
                </Text>,
                <Text style={styles.linkText} onPress={onContestRulesPress}>
                  {Strings.signUp.contestRules}
                </Text>,
              )}
            </Text>
          </CheckBox>
          {isLoading && (
            <View style={styles.loader}>
              <ActivityIndicator size="small" color={Colors.primary.purple} />
              <Text style={styles.loaderText}>{Strings.common.pleaseWait}</Text>
            </View>
          )}
          {!isLoading && (
            <Button
              isEnabled={isValid()}
              style={styles.button}
              onPress={onSubmit}>
              {Strings.signUp.submit}
            </Button>
          )}
          <PaginationDots currentPage={1} totalPages={7} />
        </View>
      </KeyboardAwareScrollView>
      <Popup
        isVisible={showPrivacyPolicy}
        onClose={() => setShowPrivacyPolicy(false)}>
        <View>
          <ScrollText
            style={{height: Math.round((screenDims.height - 100) * 0.8)}}>
            <Logo style={styles.privacyLogo} />
            <Text style={GlobalStyles.h1}>{Strings.common.privacyPolicy}</Text>
            <Autolink text={privacyText} style={styles.privacyText} />
          </ScrollText>
        </View>
      </Popup>
      <Popup
        isVisible={showContestRules}
        onClose={() => setShowContestRules(false)}>
        <View>
          <ScrollText
            style={{height: Math.round((screenDims.height - 100) * 0.8)}}>
            <Logo style={styles.privacyLogo} />
            <Text style={GlobalStyles.h1}>{Strings.common.contestRules}</Text>
            <Autolink text={contestRulesText} style={styles.privacyText} />
          </ScrollText>
        </View>
      </Popup>
      <Popup isVisible={showAlert} onClose={() => setShowAlert(false)}>
        <View style={GlobalStyles.centered}>
          <Text style={GlobalStyles.h1}>{alertTitle}</Text>
          <Text style={[GlobalStyles.h2, styles.alertText]}>
            {alertMessage}
          </Text>
          <Button style={styles.button} onPress={() => setShowAlert(false)}>
            {Strings.common.okay}
          </Button>
        </View>
      </Popup>
    </SafeAreaView>
  );
}

render() {
    const {
      name,
      postalCode,
      state,
      addressLineOne,
      addressLineTwo,
      addressNotes,
      city,
      company,
      country,
    } = this.state;
    return (
      <View style={screenWrapper.wrapper}>
        <Header
          left={<NavBackButton />}
          onLeft={this.goBack}
          title="New Address"
          right={<LinkText text="Done" color={linkTextColor} />}
          onRight={this.submitData}
        />
        <KeyboardAwareScrollView innerRef={this.setRef('scroll')}>
          <InputGroup title="Your Address">
            <TextInput
              value={name}
              title="Name"
              required
              onChangeText={this.onChange('name')}
              onSubmit={this.setFocus('companyInput')}
              onFocus={this.findNodePos}
              ref={this.setRef('nameInput')}
            />
            <TextInput
              value={company}
              title="Company"
              onChangeText={this.onChange('company')}
              onFocus={this.findNodePos}
              onSubmit={this.setFocus('addressInput')}
              ref={this.setRef('companyInput')}
            />
            <TextInput
              value={addressLineOne}
              title="Address"
              required
              onChangeText={this.onChange('addressLineOne')}
              onSubmit={this.setFocus('address2Input')}
              onFocus={this.findNodePos}
              ref={this.setRef('addressInput')}
            />
            <TextInput
              value={addressLineTwo}
              title="Address 2"
              onChangeText={this.onChange('addressLineTwo')}
              onSubmit={this.setFocus('cityInput')}
              onFocus={this.findNodePos}
              ref={this.setRef('address2Input')}
            />
            <TextInput
              value={city}
              title="City"
              required
              onChangeText={this.onChange('city')}
              onSubmit={this.setFocus('stateInput')}
              onFocus={this.findNodePos}
              ref={this.setRef('cityInput')}
            />
            <TextInput
              value={state}
              title="State"
              onChangeText={this.onChange('state')}
              onFocus={this.findNodePos}
              ref={this.setRef('stateInput')}
              onSubmit={this.setFocus('postalCodeInput')}
            />
            <TextInput
              value={postalCode}
              title="Postal Code"
              onChangeText={this.onChange('postalCode')}
              onFocus={this.findNodePos}
              ref={this.setRef('postalCodeInput')}
            />
            <RadioModalFilter
              title="Country"
              required
              secondary
              selected={_.isEmpty(country) ? '' : country.toLowerCase()}
              onChange={this.handleCountryChange}
              options={countries}
            />
            <TextArea
              noBorder
              value={addressNotes}
              title="Delivery Notes"
              onChangeText={this.onChange('addressNotes')}
              onFocus={this.findNodePos}
            />
          </InputGroup>
        </KeyboardAwareScrollView>
      </View>
    );
  }

render() {
    const {
      name, country, currency, loggingIn, keyboardVisible,
    } = this.state;
    const { isTrackingEvent } = this.props;

    return (
      <KeyboardAwareScrollView
        style={screenWrapper.wrapper}
        contentContainerStyle={!keyboardVisible && { flex: 1 }}
        keyboardShouldPersistTaps="handled"
      >
        <View style={onboardingStyles.header}>
          <Image style={styles.img} source={onboardingImg} resizeMode="stretch" />
          <View style={onboardingStyles.headerContent}>
            <StatusBarSpacer />
            <Image style={styles.logo} source={logoImg} resizeMode="contain" />
          </View>
        </View>
        <Text style={styles.helloText}>HELLO!</Text>
        <TouchableWithoutFeedback onPress={this.handleRestore} disabled={loggingIn}>
          <View style={styles.restoreContainer}>
            <Text style={styles.restore}>
              Restore profile
            </Text>
          </View>
        </TouchableWithoutFeedback>
        <InputGroup noBorder noHeaderPadding noHeaderTopPadding>
          <TextInput
            wrapperStyle={styles.nameContainer}
            title="Name"
            value={name}
            onChangeText={this.onChangeName}
            placeholder="optional"
            titleWidth={titleWidth}
            vertical
          />
          <SelectorModal
            wrapperStyle={styles.selectorContainer}
            title="Country"
            value={country}
            onChange={this.onChangeCountry}
            options={countries}
            titleWidth={titleWidth}
            vertical
          />
          <SelectorModal
            wrapperStyle={styles.selectorContainer}
            title="Currency"
            value={currency}
            noBorder
            onChange={this.onChangeCurrency}
            options={currencies}
            valueKey="code"
            getLabel={option => `${option.name} (${option.symbol})`}
            titleWidth={titleWidth}
            vertical
          />
          <View style={styles.analyticsContainer}>
            <View>
              <Text style={styles.analyticsTitle}>Share anonymous analytics</Text>
              <Text style={styles.analyticsText}>Help us improve Haven</Text>
            </View>
            <Switch
              onValueChange={this.handleToggleAnalytics}
              value={isTrackingEvent}
            />
          </View>
        </InputGroup>
        {!keyboardVisible && <View style={{ flex: 1 }} />}
        <View style={footerStyles.roundButtonContainer}>
          <Button
            wrapperStyle={onboardingStyles.button}
            title="Next"
            onPress={this.handleGetStarted}
            disabled={loggingIn}
          />
        </View>
      </KeyboardAwareScrollView>
    );
  }

render() {
    const {
      name,
      shortDescription,
      location,
      contactInfo = {},
      about,
      avatarHashes,
      headerHashes,
      keyboardVisible,
    } = this.state;
    const { email = '', phoneNumber = '', website = '' } = contactInfo;
    return (
      <View style={screenWrapper.wrapper}>
        <EditProfileHeader onBack={this.onLeft} />
        <StatusBarSpacer />
        <KeyboardAwareScrollView
          innerRef={(ref) => {
            this.scroll = ref;
          }}
        >
          <ProfileImages
            avatarHashes={avatarHashes}
            headerHashes={headerHashes}
            onChange={this.handleChange('imageHashes')}
          />
          <View style={screenWrapper.wrapper}>
            <InputGroup title="Profile Information" noHeaderTopPadding>
              <TextInput
                title="Name"
                required
                value={name}
                onChangeText={this.handleChange('name')}
                onFocus={this.findPosition}
                placeholder="Satoshi Nakamoto"
                maxLength={40}
              />
              <TextInput
                title="Bio"
                value={shortDescription}
                onChangeText={this.handleChange('shortDescription')}
                onFocus={this.findPosition}
                placeholder="Write a short description"
                maxLength={140}
              />
              <TextInput
                noBorder
                title="Location"
                value={location}
                onChangeText={this.handleChange('location')}
                onFocus={this.findPosition}
                placeholder="e.g. Seattle"
              />
            </InputGroup>
            <InputGroup title="Contact">
              <TextInput
                title="Email"
                value={email}
                onChangeText={this.handleContactChange('email')}
                onFocus={this.findPosition}
                placeholder="[email protected]"
                keyboardType="email-address"
              />
              <TextInput
                title="Phone Number"
                value={phoneNumber}
                onChangeText={this.handleContactChange('phoneNumber')}
                onFocus={this.findPosition}
                placeholder="+123456789"
                keyboardType="phone-pad"
              />
              <TextInput
                noBorder
                title="Website"
                value={website}
                onChangeText={this.handleContactChange('website')}
                onFocus={this.findPosition}
                placeholder="hello.com"
              />
            </InputGroup>
            <InputGroup title="About">
              <TextArea
                noBorder
                value={about}
                onChangeText={this.handleChange('about')}
                onFocus={this.findPosition}
                placeholder="Share more about yourself here"
              />
            </InputGroup>
          </View>
          {keyboardVisible && <EditProfileBanner onSave={this.handleSave} />}
        </KeyboardAwareScrollView>
        {!keyboardVisible && <EditProfileBanner onSave={this.handleSave} />}
      </View>
    );
  }