In android device keyboard issue

[Tushar321321]

Issue Description

In Android devices when keyboard open view is overlapping in my top view i have also try in android manifest android:windowSoftInputMode="adjustResize" and also android:windowSoftInputMode="adjustPen" but its can't work proper so what is the solution of this? Please help, here is code for gifted chat,

<SafeAreaView style={{flex: 1}} forceInset={{top: 'never', bottom: 'never'}}> {/* <LoadingOverlayBig text="Loading Data" loading={loaderMain} /> */}

    <View style={{flex: 1, marginLeft: '2%', marginRight: '2%'}}>
      <View style={{flex: 1}}>
        <Text h2 bold style={styles.texttop}>
          Offer Details
        </Text>

        <View style={styles.view}>
          <View>
            {/* <TouchableOpacity onPress={() => addCardView()}> */}
            <View style={{flexDirection: 'row'}}>
              {/* <Image source={Avtar} style={styles.avatar} /> */}
              <View style={{marginLeft: '2%', flexDirection: 'row'}}>
                <ProfilePhoto
                  photoURL={userData?.profile_image}
                  firstName={userData?.full_name}
                  lastName={''}
                  width={isDeviceWidth / 8.7}
                  height={isDeviceWidth / 8.7}
                  hideTallyIcon
                />
                <View style={styles.toptextview}>
                  <Text h3 bold style={styles.flatlisttoptext}>
                    {userData?.full_name}
                  </Text>
                  <Text h4 medium style={styles.flatlisttopsecondtext}>
                    @{userData?.user_name}
                  </Text>
                </View>
              </View>
            </View>
            {/* </TouchableOpacity> */}
          </View>

          <View style={styles.bottamview}>
            <Text style={styles.offertext}>
              Offer :<Text style={styles.offerprice}>$1,434.00</Text>
            </Text>
            <Text style={styles.brandtext}>
              Brand:
              <Text style={styles.brandtexttype}>Real estate</Text>
            </Text>
          </View>
        </View>
      </View>

      <View style={{flex: 4}}>
        <GiftedChat
          onLongPress={(context, object) =>
            onLongPressRender(context, object)
          }
          inverted={true}
          maxComposerHeight={40}
          bottomOffset={0}
          messages={messages}
          onSend={msg => onSend(msg)}
          user={{
            _id: 1,
          }}
          renderBubble={renderBubble}
          renderAvatar={null}
          renderTime={null}
          renderInputToolbar={props => customtInputToolbar(props)}
          renderSend={renderSend}
          scrollToBottom={true}
          // alignTop={false}
          // alwaysShowSend={true}
          // alignTop={true}
          renderLoading={() => {
            return (
              <ActivityIndicator
                size="large"
                color="red"
                style={{marginTop: '50%'}}
              />
            );
          }}
          loadEarlier={false}
          renderLoadEarlier={() => {
            return (
              <ActivityIndicator
                size="large"
                color="red"
                style={{marginTop: '50%'}}
              />
            );
          }}
        />
        {/* {isAndroid && <KeyboardAvoidingView behavior="padding" />} */}
      </View>
    </View>
  </SafeAreaView>

Steps to Reproduce / Code Snippets

[FILL THIS OUT]

Expected Results

not overlapping gifted-chat scrolling in top view

Additional Information

• Nodejs version: v16.14.2
• React version: 17.0.2
• React Native version: 0.67.2
• react-native-gifted-chat version: ^0.16.3
• Platform(s) (iOS, Android, or both?): Android
• TypeScript version: ^4.4.4

[huy-lv]

add this prop to giftedchat const minInputToolbarHeight = showAccessory ? ACCESSORY_BAR_HEIGHT + COMPOSER_HEIGHT : COMPOSER_HEIGHT;

[fukemy]

hi @huy-lv , can u provide way to keep access to COMPOSER_HEIGHT, i got problem when textInput have 4 lines it's failed to calculate height

[huy-lv]

try this

export const ACCESSORY_BAR_HEIGHT = 300;
export const COMPOSER_HEIGHT = 42;

[Tushar321321]

showAccessory

hey @huy-lv can you explain please what is showAccessory?