react-native#KeyboardAvoidingView JavaScript Examples

render() { 
    return (
      <KeyboardAvoidingView behavior="padding" style={styles.container}>
        <View style={styles.logoContainer}>
          <Image style={styles.logo} source={require('../../assets/logo_MyFood.png')}/>
        </View>
        <View>
            <LoginForm navigation={this.props.navigation} />
        </View>
        <View style={{ flex : 1 }} />
      </KeyboardAvoidingView>
    );
  }

render() {
    const { services } = this.state;
    return (
      <KeyboardAvoidingView style={styles.wrapper} {...keyboardAvoidingViewSharedProps}>
        <FlatList
          data={services}
          renderItem={this.renderItem}
          keyExtractor={this.keyExtractor}
          ListFooterComponent={
            <View style={styles.moreButtonWrapper}>
              <MoreButton title="Add Service" onPress={this.newItem} />
            </View>
          }
          extraData={services.length}
        />
      </KeyboardAvoidingView>
    );
  }

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

ScreenContainer = ({children}) => {
  return (
    <SafeAreaView style={{flex: 1}}>
      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        style={{flex: 1}}>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          keyboardShouldPersistTaps="handled">
          {children}
        </ScrollView>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

export default function _KeyboardAvoidingView({
  children,
  enabled = true,
  behavior = 'padding',
  keyboardVerticalOffset = 0,
  includeStatusBar,
  style
}) {
  return (
    <KeyboardAvoidingView
      behavior={behavior}
      style={[{ flex: 1 }, style]}
      keyboardVerticalOffset={
        keyboardVerticalOffset + (includeStatusBar ? getStatusBarHeight() : 0)
      }
      enabled={enabled}
    >
      {children}
    </KeyboardAvoidingView>
  );
}

KeyboardAvoid = ({ children, style = {}, ...props }) => (
  <KeyboardAvoidingView
    style={{
      flex: 1,
      ...style,
    }}
    contentContainerStyle={{
      flex: 1,
    }}
    enabled
    behavior="padding"
    {...props}
  >
    {children}
  </KeyboardAvoidingView>
)

SelectList = () => {
  const [selected, setSelected] = useState([]);

  const onSelect = (value, isSelected) => {
    if (!isSelected) {
      const selectedIndex = selected.indexOf(value);
      const newSelectedItems = [...selected];
      newSelectedItems.splice(selectedIndex, 1);
      setSelected(newSelectedItems);
    } else {
      setSelected([...selected, value]);
    }

    // TODO: your logics

    console.log(
      "The value",
      value,
      "is " + (isSelected ? "selected" : "unselected"),
    );
  };

  const renderItem = ({ item }) => {
    return (
      <Checkbox.Item
        mode="ios"
        label={item.title}
        status={selected.includes(item.id) ? "checked" : "unchecked"}
        onPress={() => {
          onSelect(item.id, !selected.includes(item.id));
        }}
      />
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <KeyboardAvoidingView style={styles.container}>
        <BigList data={data} renderItem={renderItem} rowHeight={50} />
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

function ListingDetailsScreen({ route }) {
	const listing = route.params;

	return (
		<KeyboardAvoidingView
			behavior="position"
			keyboardVerticalOffset={Platform.OS === "ios" ? 0 : 100}
		>
			<Image
				style={styles.image}
				preview={{ uri: listing.images[0].thumbnailUrl }}
				tint="light"
				uri={listing.images[0].url}
			/>
			<View style={styles.detailsContainer}>
				<Text style={styles.title}>{listing.title}</Text>
				<Text style={styles.price}>€{listing.price}</Text>
				<View style={styles.userContainer}>
					<ListItem
						image={require("../assets/main_user.jpg")}
						title="Nathan Abela"
						subTitle="5 Listings"
					/>
				</View>
				<ContactSellerForm listing={listing} />
			</View>
		</KeyboardAvoidingView>
	);
}

render() {
      return (
          <>
              <SafeAreaView style={styles.wrapper}>
                  <StatusBarColor
                      backgroundColor={Colors.primary_bg}
                      barStyle="light-content"
                  />
                  <KeyboardAvoidingView style={{flex: 1}}>
                      <View style={styles.container}>
                          <AppHeader headerTitle={'Confirm Deposit'}  />
                          <ScrollView style={styles.mainContentWrapper}>
                              {this.depositContent}
                          </ScrollView>
                          <ConfirmDialog
                              message={this.state.confirmDialogMessage}
                              onDismiss={() => {
                                  this.setState({confirmDialog: false});
                              }}
                              onOk={() => {
                                  this.goToDashboard();
                                  this.setState({confirmDialog: false});
                              }}
                              title={this.state.confirmDialogTitle}
                              visible={this.state.confirmDialog}
                          />
                          <LoadingIndicator
                              visible={this.state.isLoading}
                          />
                      </View>
                  </KeyboardAvoidingView>
              </SafeAreaView>
          </>
      );
  }

render(){
    return(
      <View style={{flex:1}}>
      <MyHeader title="Add Item"/>
      <KeyboardAvoidingView style={{flex:1,justifyContent:'center', alignItems:'center'}}>
        <TextInput
          style={styles.formTextInput}
          placeholder ={"Item Name"}
          maxLength ={8}
          onChangeText={(text)=>{
            this.setState({
              itemName: text
            })
          }}
          value={this.state.itemName}
        />
        <TextInput
          multiline
          numberOfLines={4}
          style={[styles.formTextInput,{height:100}]}
          placeholder ={"Description"}
          onChangeText={(text)=>{
            this.setState({
              description: text
            })
          }}
          value={this.state.description}

        />
        <TouchableOpacity
          style={[styles.button,{marginTop:10}]}
          onPress = {()=>{this.addItem(this.state.itemName, this.state.description)}}
          >
          <Text style={{color:'#ffff', fontSize:18, fontWeight:'bold'}}>Add Item</Text>
        </TouchableOpacity>
      </KeyboardAvoidingView>
      </View>
    )
  }

render(){
    return(
      <View style={{flex:1}}>
      <MyHeader title="Add Item"/>
      <KeyboardAvoidingView style={{flex:1,justifyContent:'center', alignItems:'center'}}>
        <TextInput
          style={styles.formTextInput}
          placeholder ={"Item Name"}
          maxLength ={8}
          onChangeText={(text)=>{
            this.setState({
              itemName: text
            })
          }}
          value={this.state.itemName}
        />
        <TextInput
          multiline
          numberOfLines={4}
          style={[styles.formTextInput,{height:100}]}
          placeholder ={"Description"}
          onChangeText={(text)=>{
            this.setState({
              description: text
            })
          }}
          value={this.state.description}

        />
        <TouchableOpacity
          style={[styles.button,{marginTop:10}]}
          onPress = {()=>{this.addItem(this.state.itemName, this.state.description)}}
          >
          <Text style={{color:'#ffff', fontSize:18, fontWeight:'bold'}}>Add Item</Text>
        </TouchableOpacity>
      </KeyboardAvoidingView>
      </View>
    )
  }

render(){
    return(
      <View style={{flex:1}}>
      <MyHeader title="Add Item" navigation ={this.props.navigation}/>
      <KeyboardAvoidingView style={{flex:1,justifyContent:'center', alignItems:'center'}}>
        <TextInput
          style={styles.formTextInput}
          placeholder ={"Item Name"}
          maxLength ={8}
          onChangeText={(text)=>{
            this.setState({
              itemName: text
            })
          }}
          value={this.state.itemName}
        />
        <TextInput
          multiline
          numberOfLines={4}
          style={[styles.formTextInput,{height:100}]}
          placeholder ={"Description"}
          onChangeText={(text)=>{
            this.setState({
              description: text
            })
          }}
          value={this.state.description}

        />
        <TouchableOpacity
          style={[styles.button,{marginTop:10}]}
          onPress = {()=>{this.addItem(this.state.itemName, this.state.description)}}
          >
          <Text style={{color:'#ffff', fontSize:18, fontWeight:'bold'}}>Add Item</Text>
        </TouchableOpacity>
      </KeyboardAvoidingView>
      </View>
    )
  }

render() {
    const { balance, setPressMaxHandler, feeLevel, estimating, onFeeChange, onSendAll } = this.props;
    const {
      address, coin, amount, showModal,
    } = this.state;
    return (
      <View style={styles.wrapper}>
        <SendingAmount
          amount={amount}
          baseCoin={coin}
          maxAmount={balance[coin].confirmed}
          onChange={this.handleAmountChange}
          setPressMaxHandler={setPressMaxHandler}
          feeLevel={feeLevel}
          onFeeChange={onFeeChange}
          onSendAll={onSendAll}
        />
        <TouchableOpacity activeOpacity={1} onPress={this.handleShowModal} disabled={amount === 0 || estimating}>
          <View style={[styles.nextButton, amount === 0 || estimating ? styles.disabled : {}]}>
            {estimating ? (
              <ActivityIndicator size="small" color="white" />
            ) : (
              <Text style={styles.nextButtonText}>NEXT</Text>
            )}
          </View>
        </TouchableOpacity>
        <CoinTypeSelector coin={coin} onChange={this.handleCoinChanged} showBalance noBorder />
        <OBLightModal
          animationType="fade"
          overlay
          visible={showModal}
          onRequestClose={this.handleHideModal}
        >
          <KeyboardAvoidingView style={styles.sendingAddress} {...keyboardAvoidingViewSharedProps}>
            <TouchableWithoutFeedback onPress={this.handleHideModal}>
              <View style={{ flex: 1 }} />
            </TouchableWithoutFeedback>
            <SendingAddressSelector
              title="Send to"
              address={address}
              onChange={this.handleAddressChange}
              placeholder="Paste or scan address"
              onSend={this.handleSend}
            />
          </KeyboardAvoidingView>
        </OBLightModal>
      </View>
    );
  }

export default function AndroidKeyboardAvoidingView({
  children,
  behavior = 'height',
  enabled = true,
  keyboardVerticalOffset = 0,
  includeStatusBar,
  style
}) {
  let [keyboard, setKeyboard] = useState(false);
  let [accessoryId, setAccessoryId] = useState(null);

  useEffect(() => {
    let cleanups = [
      Keyboard.addListener('keyboardDidShow', e => {
        setKeyboard(true);
      }),
      Keyboard.addListener('keyboardDidHide', e => {
        setKeyboard(false);

        // TODO: This is wrong. In Android, the user can hide the
        // keyboard and bring it back up again all while never losing
        // focus of the input. This means we'll render the accessory
        // view the first time but never again. Need to figure out a
        // better solution.
        setAccessoryId(null);
      })
    ];

    return () => cleanups.forEach(handler => handler.remove());
  }, []);

  return (
    <AccessoryIdContext.Provider value={setAccessoryId}>
      <KeyboardAvoidingView
        style={[{ flex: 1 }, style]}
        behavior={behavior}
        keyboardVerticalOffset={
          keyboardVerticalOffset +
          (includeStatusBar ? StatusBarHeight.statusBarHeight : 0)
        }
        enabled={enabled}
      >
        <>
          {children}
          {keyboard && accessoryId && renderAccessoryView(accessoryId)}
        </>
      </KeyboardAvoidingView>
    </AccessoryIdContext.Provider>
  );
}

render() {
    return (
      <CometChatContextProvider ref={(el) => (this.contextProviderRef = el)}>
        <SafeAreaView style={{ backgroundColor: 'white' }}>
          <KeyboardAvoidingView
            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
            style={styles.conversationWrapperStyle}>
            <View style={styles.headerContainer}></View>
            {this.listHeaderComponent()}
            <SwipeListView
              contentContainerStyle={styles.flexGrow1}
              data={this.state.conversationList}
              keyExtractor={(item, index) => item?.conversationId + '_' + index}
              renderHiddenItem={(data, rowMap) => (
                <View
                  key={data.item?.conversationId}
                  style={{
                    alignItems: 'center',
                    flex: 1,
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    paddingLeft: 15,
                  }}>
                  <TouchableOpacity
                    style={{
                      alignItems: 'center',
                      bottom: 0,
                      justifyContent: 'center',
                      position: 'absolute',
                      top: 0,
                      width: 75,
                      backgroundColor: 'red',
                      right: 0,
                      maxHeight: 64,
                    }}
                    onPress={() => this.deleteConversations(data.item)}>
                    <Image
                      source={require('./resources/delete.png')}
                      resizeMode="contain"
                      style={{ height: 24 }}
                    />
                    <Text style={styles.deleteText}>Delete</Text>
                  </TouchableOpacity>
                </View>
              )}
              leftOpenValue={0}
              rightOpenValue={-75}
              previewRowKey={'0'}
              previewOpenValue={-40}
              previewOpenDelay={3000}
              renderItem={({ item }) => {
                return (
                  <CometChatConversationListItem
                    theme={this.theme}
                    config={this.props.config}
                    conversation={item}
                    selectedConversation={this.state.selectedConversation}
                    loggedInUser={this.loggedInUser}
                    handleClick={this.handleClick}
                  />
                );
              }}
              ListEmptyComponent={this.listEmptyContainer}
              onScroll={this.handleScroll}
              onEndReached={this.endReached}
              onEndReachedThreshold={0.3}
              showsVerticalScrollIndicator={false}
              scrollEnabled
            />
          </KeyboardAvoidingView>
          <DropDownAlert ref={(ref) => (this.dropDownAlertRef = ref)} />
        </SafeAreaView>
      </CometChatContextProvider>
    );
  }

PlaybookPage = (props) => {
  const isEmpty = props.customPlays.length === 0;

  const newPlay = () => {
    const defaultTitle = I18n.t('playbookPage.untitledPlay');
    let newTitle = defaultTitle;
    let counter = 1;
    while (props.customPlays.findIndex((item) => item.title === newTitle) !== -1) {
      newTitle = defaultTitle + ' (' + counter + ')';
      counter += 1;
    }
    const play = {
      uuid: generateUuid(),
      animation: new Drill(),
      title: newTitle,
    };
    props.savePlay(play);
    return play;
  };

  const behavior = Platform.select({
    ios: 'padding',
    android: 'height',
  });
  return (
    <KeyboardAvoidingView style={styles.playbookPage} behavior={behavior}>
      {isEmpty ? (
        <View style={styles.empty}>
          <Text style={styles.emptyText}>{I18n.t('playbookPage.empty')}</Text>
        </View>
      ) : (
        <ScrollView>
          {props.customPlays.map((play) => (
            <PlayTitle
              play={play}
              key={play.title}
              style={styles.customPlay}
              onPress={() => {
                props.navigation.navigate('PlayEditorPage', { currentPlay: play });
              }}
            />
          ))}
        </ScrollView>
      )}
      <TouchableOpacity
        style={styles.footer}
        onPress={() => {
          props.navigation.navigate('PlayEditorPage', { currentPlay: newPlay() });
        }}
      >
        <View style={styles.createContainer}>
          <MaterialCommunityIcons style={styles.createIcon} name="plus" testID="createPlay" />
        </View>
      </TouchableOpacity>
    </KeyboardAvoidingView>
  );
}

export default function Login({ navigation }) {
  const [user, setUser] = useState('');

  useEffect(() => {
    AsyncStorage.getItem('user').then(user => {
      if (user) {
        navigation.navigate('Main', { user });
      }
    });
  }, []);

  async function handleLogin() {
    const response = await api.post('/devs', { username: user });

    const { _id } = response.data;

    await AsyncStorage.setItem('user', _id);

    navigation.navigate('Main', { user: _id });
  }

  return (
    <KeyboardAvoidingView
      behavior="padding"
      enabled={Platform.OS === 'ios'}
      style={styles.container}
    >
      <Image source={logo} style={styles.logo} />

      <TextInput
        autoCapitalize="none"
        autoCorrect={false}
        placeholder="Digite seu usuário no Github"
        placeholderTextColor="#999"
        style={styles.input}
        value={user}
        onChangeText={setUser}
      />

      <TouchableOpacity onPress={handleLogin} style={styles.button}>
        <LinearGradient
          start={{ x: 0.0, y: 0.25 }}
          end={{ x: 0.5, y: 1.0 }}
          locations={[0, 0.5, 0.6]}
          colors={['#FD297B', '#FF5864', '#FF655B']}
          style={styles.button}
        >
          <Text style={styles.buttonText}>Enviar</Text>
        </LinearGradient>
      </TouchableOpacity>
    </KeyboardAvoidingView>
  );
}

PeopleModal = ({
  people,
  handleInputChange, handleAddClick, handleRemoveClick,
  toggleModal, stylesPaper, stylesDefault
}) => (
  <>
    <Appbar.Header style={{ backgroundColor: theme.colors.accent }}>
      <Appbar.Action icon="chevron-down" onPress={toggleModal} />
      <Appbar.Content title="People Manager" subtitle="" titleStyle={{ fontSize: 20, fontWeight: 'bold' }} />
    </Appbar.Header>
    {people.map((x, i) => (
      <ScrollView
        key={`${x}_${i}`} //eslint-disable-line
        style={{ margin: 20 }}
      >
        <KeyboardAvoidingView>
          <TextInput
            label={I18n.t('peopleModal.fname')}
            placeholder={I18n.t('peopleModal.enterFname')}
            onChangeText={(text) => handleInputChange(text, i, 'firstName')}
            mode="outlined"
            theme={stylesPaper}
            style={stylesDefault.label}
          />
          <TextInput
            label={I18n.t('peopleModal.lname')}
            placeholder={I18n.t('peopleModal.enterLname')}
            onChangeText={(text) => handleInputChange(text, i, 'lastName')}
            mode="outlined"
            theme={stylesPaper}
            style={stylesDefault.label}
          />
          <TextInput
            label={I18n.t('peopleModal.relationship')}
            onChangeText={(text) => handleInputChange(text, i, 'relationship')}
            mode="outlined"
            theme={stylesPaper}
            style={stylesDefault.label}
          />
          <View>
            {people.length !== 1 && (
              <PaperButton
                buttonText={I18n.t('peopleModal.remove')}
                onPressEvent={() => handleRemoveClick(i)}
              />
            )}
            {people.length - 1 === i && (
              <PaperButton
                buttonText={I18n.t('peopleModal.add')}
                onPressEvent={handleAddClick}
              />
            )}
          </View>
        </KeyboardAvoidingView>
      </ScrollView>
    ))}
  </>
)

/**
 * @param children
 * @param background {string}
 * @param keyboardAvoidView {boolean}
 * @param styleScrollView {object}
 * @param hideStatusBarOnScroll {boolean}
 * @returns {*}
 * @constructor
 */
function DefaultScrollView({
  children,
  background,
  keyboardAvoidView,
  styleScrollView,
  onScrollCallback,
}) {
  const isAndroid = PlatformUtils.isAndroid;
  const onScroll = (event) =>
    onScrollCallback ? onScrollCallback(event) : null;

  return (
    <View style={{ flex: 1 }}>
      <KeyboardAvoidingView
        style={{ flex: 1 }}
        behavior={Platform.OS === 'ios' ? 'padding' : null}
        enabled={keyboardAvoidView}
      >
        <ScrollView
          scrollEventThrottle={1}
          style={[
            {
              flex: 1,
              paddingVertical: isAndroid ? 0 : 40,
            },
            styleScrollView,
          ]}
          onScroll={onScroll}
        >
          {children}
          <View style={{ height: isAndroid ? 25 : 50 }} />
        </ScrollView>
      </KeyboardAvoidingView>
    </View>
  );
}

export default function SectionList() {
  const [numberColumns, setNumberColumns] = useState(3);
  const renderItem = ({ item }) => {
    return (
      <List.Item
        title={item.title}
        description={item.description}
        style={styles.container}
        left={(props) => <List.Icon {...props} icon="account" />}
      />
    );
  };
  const renderEmpty = () => <List.Item title="No items" />;
  const renderHeader = () => (
    <View>
      <TextInput
        label="Number of columns (max 10)"
        value={String(numberColumns)}
        type="numeric"
        keyboardType="numeric"
        onChangeText={(value) => {
          const num = parseInt(value, 10) || "";
          setNumberColumns(num);
        }}
      />
    </View>
  );
  const renderFooter = () => (
    <Block>
      <Subheading>No more items available...</Subheading>
    </Block>
  );
  return (
    <SafeAreaView style={styles.container}>
      <KeyboardAvoidingView style={styles.container}>
        <View style={styles.compare}>
          <BigList
            style={styles.container}
            data={data}
            numColumns={Math.min(
              Math.max(parseInt(numberColumns, 10) || 1, 1),
              10,
            )}
            // Item
            itemHeight={90}
            renderItem={renderItem}
            renderEmpty={renderEmpty}
            // Header
            headerHeight={90}
            renderHeader={renderHeader}
            // Footer
            footerHeight={100}
            renderFooter={renderFooter}
          />
        </View>
        <StatusBar style="auto" />
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

render() {
    const {
      email,
      password,
    } = this.state;
    return (
      <KeyboardAvoidingView style={styles.splashContainer} behavior="padding" enabled>
        <StatusBar barStyle="dark-content" />
        <View style={styles.logInHeader}>
          <Image
            // style={styles.logInLogo}
            source={iconLogo}
          />
          <Text style={styles.splashHeaderText}>Sign In</Text>
        </View>
        <View style={styles.logInInputs}>
          <TextInput
            placeholder="Email"
            style={styles.authInputs}
            autoCapitalize="none"
            value={email}
            onChangeText={(value) => { this.setState({ email: value }); }}
          />
          <TextInput
            placeholder="Password"
            style={styles.authInputs}
            autoCapitalize="none"
            value={password}
            onChangeText={(value) => { this.setState({ password: value }); }}
          />
        </View>
        <View style={styles.logInButtons}>
          <TouchableOpacity
            style={styles.largeButton}
            onPress={() => this.handleLogIn()}
            underlayColor="#fff"
          >
            <Text style={styles.largeButtonText}>Sign In</Text>
          </TouchableOpacity>
        </View>
      </KeyboardAvoidingView>
    );
  }

addDecorator((Story) => (
  <KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={100}>
    <SpaceAround>
      <Story />
    </SpaceAround>
  </KeyboardAvoidingView>
));

render() {
      return (
          <SafeAreaView style={styles.wrapper}>
              <StatusBarColor
                  backgroundColor={Colors.primary_bg}
                  barStyle="light-content"
              />
              <KeyboardAvoidingView style={{flex: 1}}>
                  <ScrollView contentContainerStyle={{flexGrow: 1}}>
                      <View style={styles.container}>
                          <Image
                              source={this.getHeaderImage()}
                              style={styles.titleImage}
                          />
                          <Text style={styles.title}>{this.getTitle()}</Text>
                          <Text style={styles.subTitle}>{this.getSubTitle()}</Text>
                          {this.state.mode === VERIFICATION_MODE.SMS && (
                              <TextInput
                                  keyboardType={'phone-pad'}
                                  maxLength={4}
                                  onChangeText={this.otpInput}
                                  placeholder={'- - - -'}
                                  placeholderTextColor={Colors.subTitle}
                                  style={styles.otpInput}
                                  value={this.state.otp}
                              />
                          )}
                          <TouchableOpacity
                              onPress={this.onButtonPress}
                              style={styles.button}>
                              <Text style={styles.buttonText}>
                                  {this.getButtonTitle()}
                              </Text>
                          </TouchableOpacity>
                          {this.state.mode === VERIFICATION_MODE.SMS && (
                              <TouchableOpacity onPress={this.resendOTP}>
                                  <Text style={styles.linkButton}>Resend OTP</Text>
                              </TouchableOpacity>
                          )}
                      </View>
                  </ScrollView>
              </KeyboardAvoidingView>
              <LoadingIndicator
                  message={'Please wait!'}
                  visible={this.state.isLoading}
              />
              <ErrorDialog
                  message={this.state.errorMessage}
                  onDismiss={() => {
                      this.setState({showError: false});
                  }}
                  title={this.state.errorTitle}
                  visible={this.state.showError}
              />
          </SafeAreaView>
      );
  }

render() {
    const {navigation} = this.props;
    const DataSourceView = (
      <ScrollView style={{flex: 1, backgroundColor: '#fff'}}>
        <View style={{margin: 10}}>
          <TextInput
            autoCapitalize="none"
            style={styles.input}
            value={this.state.customUrl}
            onChangeText={this.handleCustomUrl}
            placeholderTextColor="#fff"
            placeholder="Add custom host"
            keyboardType="url"
            blurOnSubmit={true}
            // enablesReturnKeyAutomatically={true}
            onEndEditing={this.handleEndEditing.bind(this)}
          />
        </View>
        <List flat={false} paddingLeft={10}>
          {this.state.dataList.map((item, idx) => (
            <List.Item
              key={idx}
              extra={item.url || ' '}
              touchableStyle={{backgroundColor: '#fff'}}
              style={{backgroundColor: 'transparent'}}
              onPress={this.handleSelect.bind(this, item)}>
              {item.url === this.state.selectUrl.url && <Icon size={14} name="check" fill="#008EF0" style={styles.urlListIcon} />}
              <Text>{item.label}</Text>
            </List.Item>
          ))}
        </List>
      </ScrollView>
    );
    return (
      <SafeAreaView style={styles.block}>
        <StatusBar barStyle="light-content" />
        <View style={{flex: 1}}>
          <Flex justify="start" align="start">
            <Button bordered={false} style={{marginLeft: 15, marginBottom: 20}} onPress={() => navigation.goBack()}>
              <Icon fill="#fff" size={23} name="arrow-left" />
            </Button>
          </Flex>
          <WingBlank size={21} style={[styles.block]}>
            <Flex>
              <H4 style={styles.title}>Select Host</H4>
            </Flex>
            <Spacing />
            {Platform.OS === 'ios' ? (
              <KeyboardAvoidingView behavior="padding" style={{flex: 1}} keyboardVerticalOffset={120}>
                {DataSourceView}
              </KeyboardAvoidingView>
            ) : (
              DataSourceView
            )}
            {this.state.selectUrl.type === 'custom' && (
              <View>
                <Button style={{marginVertical: 10}} bordered={false} type="danger" onPress={this.deleteCustomUrl}>
                  Delete Custom Host
                </Button>
              </View>
            )}
          </WingBlank>
        </View>
      </SafeAreaView>
    );
  }

render () {
        const { loading, error, success } = this.props;
        const { email } = this.state;

        return (
            <KeyboardAvoidingView
                style={{ backgroundColor: commonColor.backgroundColor, flex: 1 }}
                behavior={(Platform.OS === 'ios') ? 'padding' : null}
                enabled
                keyboardVerticalOffset={Platform.select({ ios: 80, android: 500 })}>
                <ScrollView contentContainerStyle={{ height: 400 }}>
                    <StatusBar style="light"/>
                    <Container style={{ backgroundColor: commonColor.backgroundColor }}>
                        <Content padder>
                            <Card style={{ backgroundColor: commonColor.backgroundColor }}>
                                {error && <View style={{ margin: 10 }}><Messages message={error}/></View>}
                                {success &&
                                <View style={{ margin: 10 }}><Messages type="success" message={success}/></View>}
                                <Form>
                                    <Item floatingLabel style={{ margin: 15 }}>
                                        <Label style={{ color: '#fff', fontFamily: 'Montserrat' }}>
                                            {i18n.t('login.forgotLabel')}
                                        </Label>
                                        <Input
                                            style={{ color: '#fff', fontFamily: 'Montserrat' }}
                                            autoCapitalize="none"
                                            value={email}
                                            keyboardType="email-address"
                                            disabled={loading}
                                            onChangeText={v => this.handleChange('email', v)}
                                        />
                                    </Item>

                                    <Spacer size={20}/>

                                    <ButtonH2t text={'login.forgotBtn'} loading={loading} onPress={this.handleSubmit}/>
                                </Form>
                            </Card>
                        </Content>
                    </Container>
                </ScrollView>
            </KeyboardAvoidingView>
        );
    }

render(){
        return(
            <KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
                <Header 
                    backgroundColor = {'pink'}
                    centerComponent = {{
                        text : 'Bed Time Stories',
                        style : { color: 'white', fontSize: 20}
                    }}
                />
                <TextInput 
                    placeholder="Story Title"
                    onChangeText= {(text)=>{
                        this.setState({
                            title: text
                        })
                    }}
                    value={this.state.title}
                    style={styles.title}/>
                <TextInput
                    placeholder="Author"
                    onChangeText= {(text)=>{
                        this.setState({
                            author: text
                        })
                    }}
                    value={this.state.author}
                    style={styles.author} />
                <TextInput 
                    placeholder="Write your story"
                    onChangeText= {(text)=>{
                        this.setState({
                            storyText: text
                        })
                    }}
                    value={this.state.storyText}
                    style={styles.storyText}
                    multiline={true}/>
                
                <TouchableOpacity
                    style={styles.submitButton}
                    onPress={this.submitStory}
                    >
                    <Text style={styles.buttonText}>Submit</Text>
                </TouchableOpacity>
            </KeyboardAvoidingView>
        );
    }

render() {
      const hasCameraPermissions = this.state.hasCameraPermissions;
      const scanned = this.state.scanned;
      const buttonState = this.state.buttonState;

      if (buttonState !== "normal" && hasCameraPermissions){
        return(
          <BarCodeScanner
            onBarCodeScanned={scanned ? undefined : this.handleBarCodeScanned}
            style={StyleSheet.absoluteFillObject}
          />
        );
      }

      else if (buttonState === "normal"){
        return(
          <KeyboardAvoidingView behavior="padding" style={styles.container}>
            <View>
              <Image
                source={require("../assets/booklogo.jpg")}
                style={{width:200, height: 200}}/>
              <Text style={{textAlign: 'center', fontSize: 30}}>Wily</Text>
            </View>
            <View style={styles.inputView}>
            <TextInput 
              style={styles.inputBox}
              placeholder="Book Id"
              onChangeText={(text)=>{
                this.setState({
                  scannedBookId: text
                })
              }}
              value={this.state.scannedBookId}/>
            <TouchableOpacity 
              style={styles.scanButton}
              onPress={()=>{
                this.getCameraPermissions("BookId")
              }}>
              <Text style={styles.buttonText}>Scan</Text>
            </TouchableOpacity>
            </View>

            <View style={styles.inputView}>
            <TextInput 
              style={styles.inputBox}
              placeholder="Student Id"
              onChangeText={(text)=>{
                this.setState({
                  scannedStudentId: text
                })
              }}
              value={this.state.scannedStudentId}/>
            <TouchableOpacity 
              style={styles.scanButton}
              onPress={()=>{
                this.getCameraPermissions("StudentId")
              }}>
              <Text style={styles.buttonText}>Scan</Text>
            </TouchableOpacity>
            </View>
            <Text style={styles.transactionAlert}>{this.state.transactionMessage}</Text>
            <TouchableOpacity
              style={styles.submitButton}
              onPress={async()=>{
                var transactionMessage = this.handleTransaction();
                console.log("Transaction Message: ",transactionMessage)
              }}>
              <Text style={styles.submitButtonText}>Submit</Text>
            </TouchableOpacity>
          </KeyboardAvoidingView>
        );
      }
    }

render()
  {
    if (this.state.IsExchangeRequestActive === true){
      // status screen
      return(
        <View style = {{flex:1,justifyContent:'center'}}>
         <View style={{borderColor:"orange",borderWidth:2,justifyContent:'center',alignItems:'center',padding:10,margin:10}}>
         <Text>Item Name</Text>
         <Text>{this.state.requestedItemName}</Text>
         </View>
         <View style={{borderColor:"orange",borderWidth:2,justifyContent:'center',alignItems:'center',padding:10,margin:10}}>
         <Text> Item Status </Text>

         <Text>{this.state.itemStatus}</Text>
         </View>

         <TouchableOpacity style={{borderWidth:1,borderColor:'orange',backgroundColor:"orange",width:300,alignSelf:'center',alignItems:'center',height:30,marginTop:30}}
         onPress={()=>{
           this.sendNotification()
           this.updateExchangeRequestStatus();
           this.receivedItem(this.state.requestedItemName)
         }}>
         <Text>I recieved the Item </Text>
         </TouchableOpacity>
       </View>
     )

    }
    else {
      return(
        <View style={{flex:1}}>
        <MyHeader title="Add Item" navigation ={this.props.navigation}/>
        <KeyboardAvoidingView style={{flex:1,justifyContent:'center', alignItems:'center'}}>
          <TextInput
            style={styles.formTextInput}
            placeholder ={"Item Name"}
            maxLength ={8}
            onChangeText={(text)=>{
              this.setState({
                itemName: text
              })
            }}
            value={this.state.itemName}
          />
          <TextInput
            multiline
            numberOfLines={4}
            style={[styles.formTextInput,{height:100}]}
            placeholder ={"Description"}
            onChangeText={(text)=>{
              this.setState({
                description: text
              })
            }}
            value={this.state.description}

          />
          <TouchableOpacity
            style={[styles.button,{marginTop:10}]}
            onPress = {()=>{this.addItem(this.state.itemName, this.state.description)}}
            >
            <Text style={{color:'#ffff', fontSize:18, fontWeight:'bold'}}>Add Item</Text>
          </TouchableOpacity>
        </KeyboardAvoidingView>
        </View>
      )
    }
  }

render(){

    if(this.state.IsBookRequestActive === true){
      return(

        // Status screen

        <View style = {{flex:1,justifyContent:'center'}}>
          <View style={{borderColor:"orange",borderWidth:2,justifyContent:'center',alignItems:'center',padding:10,margin:10}}>
          <Text>Book Name</Text>
          <Text>{this.state.requestedBookName}</Text>
          </View>
          <View style={{borderColor:"orange",borderWidth:2,justifyContent:'center',alignItems:'center',padding:10,margin:10}}>
          <Text> Book Status </Text>

          <Text>{this.state.bookStatus}</Text>
          </View>

          <TouchableOpacity style={{borderWidth:1,borderColor:'orange',backgroundColor:"orange",width:300,alignSelf:'center',alignItems:'center',height:30,marginTop:30}}
          onPress={()=>{
            this.sendNotification()
            this.updateBookRequestStatus();
            this.receivedBooks(this.state.requestedBookName)
          }}>
          <Text>I recieved the book </Text>
          </TouchableOpacity>
        </View>
      )
    }
    else
    {
    return(
      // Form screen
        <View style={{flex:1}}>
          <MyHeader title="Request Book" navigation ={this.props.navigation}/>

          <ScrollView>
            <KeyboardAvoidingView style={styles.keyBoardStyle}>
              <TextInput
                style ={styles.formTextInput}
                placeholder={"enter book name"}
                onChangeText={(text)=>{
                    this.setState({
                        bookName:text
                    })
                }}
                value={this.state.bookName}
              />
              <TextInput
                style ={[styles.formTextInput,{height:300}]}
                multiline
                numberOfLines ={8}
                placeholder={"Why do you need the book"}
                onChangeText ={(text)=>{
                    this.setState({
                        reasonToRequest:text
                    })
                }}
                value ={this.state.reasonToRequest}
              />
              <TouchableOpacity
                style={styles.button}
                onPress={()=>{ this.addRequest(this.state.bookName,this.state.reasonToRequest);
                }}
                >
                <Text>Request</Text>
              </TouchableOpacity>

            </KeyboardAvoidingView>
            </ScrollView>
        </View>
    )
  }
}