KeyboardAvoidingView not Working in apk file -React Native

Viewed 34

We are having two fields 1 textfield and one text area.We have placed keyboardawarescrollview as wrapper. When running from expo code the keyboard behaviour is normal.

But Once we put build and use .apk file the keyboard comes over the fields when trying to do input.

Example Screenshot

Please help us to fix this issue. we tried in many ways but not worked out.

<KeyboardAwareScrollView
    enableOnAndroid={true}
    enableAutomaticScroll={(Platform.OS === 'ios')}
    showsVerticalScrollIndicator={false}>
   
      <Block flex={0.6} style={{ paddingBottom: 35 }}>
        <Block row center style={{ paddingBottom: 25 }}>
          <Text style={styles.orderId}>Order #{this.state.orderNo}</Text>
          <Text bold>({ (this.state.orderDetail[0].orderplaceddate)?this.state.orderDetail[0].orderplaceddate:this.state.orderDetail[0].quoteRequested})</Text>
        </Block>
        <Block row>
          <Block>
            <Text style={styles.subtitle}>Party Date</Text>
            <Text size={15} bold>
              {this.state.orderDetail[0].orderedon}
            </Text>
          </Block>
          <Block>
            <Text style={styles.subtitle}>From</Text>
            <Block row middle>
              <Image
                style={styles.profile}
                source={{
                  uri:
                    imagebaseUrl+"images/" +
                    this.state.orderDetail[0].custPic,
                }}
              />
              <Block>
                <Text bold size={15} style={styles.custName}>
                  {this.state.orderDetail[0].custName}
                </Text>
                <Text size={12} style={styles.custName}>
                  {this.state.orderDetail[0].custPhone}
                </Text>
              </Block>
            </Block>
          </Block>
        </Block>
      </Block>

      <Block row stye={{ paddingBottom: 15 }}>
        <Text bold>Party Count : </Text>
        <Text>
          {this.getPeopleCount()}
        </Text>
      </Block>
      <Block row stye={{ paddingBottom: 15 }}>
        <Text bold>Preference : </Text>
        <Text>
          Veg {this.state.orderDetail[0].includeNonVeg ? " + Non-veg" : ""}
        </Text>
      </Block>
      <Block row stye={{ paddingBottom: 15 }}>
        <Text bold>Delivery mode : </Text>
        <Text>
          {this.state.orderDetail[0].needDelivery ? "Delivery" : "Pickup"}
        </Text>
      </Block>

      {this.displayPartyMenu()}

      <Block row>
        <Text bold>Total Price </Text>
      </Block>
      <Block row>
        <Input
          underlineColorAndroid="transparent"
          defaultValue={tot}
          editable={this.state.isEditable}
          onChangeText={(total) => this.setState({ total,status:'updatedbyk',tochanged:'1' })}
          style={{
            height: 30,
            width: 50,
            borderColor: "gray",
            borderWidth: 1,
            marginBottom: 20,
          }}
          maxLength={30}
        />
      </Block>

      <Block row>
        <Text bold>Customer Comment </Text>
        <Text bold>
          {this.state.orderDetail[0].customertypedinfo == ""
            ? "NA"
            : this.state.orderDetail[0].customertypedinfo}{" "}
        </Text>
      </Block>
      <Block row>
        <Text bold>Kitchen Comment </Text>
      </Block>
      <Block row>
        <Input
          style={styles.textArea}
          underlineColorAndroid="transparent"
          editable={this.state.isEditable}
          defaultValue={this.state.orderDetail[0].businessusertypedinfo}
          style={{ flex: 1 }}
          onChangeText={(businessusertypedinfo) =>
            this.setState({ businessusertypedinfo,status:'updatedbyk',buchanged:'1' })
          }
          multiline={true}
          maxLength={300}
        />
      </Block>

      <RBSheet
        ref={(ref) => {
          this.RBSheet = ref;
        }}
        height={300}
        openDuration={250}
        customStyles={{
          container: {
            justifyContent: "center",
            alignItems: "center",
          },
        }}
      >
        {this.renderConfirmation(
          "success",
          // messages.alerts["s01""],
          "",
          "Login",
          "Back to Login"
        )}
      </RBSheet>

      <Block center style={styles.bottomSeparator} row flex={0.5}>
        <PartyTrackOrder
          orderPlacedTime={this.state.orderDetail[0].orderplaceddate}

          readyForPickUpTime={this.state.orderDetail[0].readyForPickUpTime}
          quoteRequested={this.state.orderDetail[0].quoteRequested}
          quoteUpdated={this.state.orderDetail[0].quoteUpdated}
          quoteCancelledByKitchen={this.state.orderDetail[0].quoteCancelledByKitchen}
          quoteCancelledByCustomer={this.state.orderDetail[0].quoteCancelledByCustomer}
          pickedUpTime={this.state.orderDetail[0].pickedUpTime}
          name={this.state.orderDetail[0].kitchenname}
          address={this.state.orderDetail[0].kitchenaddress}
          city={this.state.orderDetail[0].kitchencity}
          state={this.state.orderDetail[0].kitchenstate}
          zip={this.state.orderDetail[0].kitchenzip}
        ></PartyTrackOrder>
      </Block>
      {/* </ScrollView> */}
     
       
       {this.getCTAButton(this.state.status,pickupcomment)}

    </KeyboardAwareScrollView>
0 Answers
Related