issues with composer height on keyboard shows (Giftedchat into modal)

[flexingCode]

Issue Description

Hi, i have problems with the chat composer on open the keyboard, i have the chat into modal (react-native-modal)

Steps to Reproduce / Code Snippets

Modal component: (into RenderFragment i show the chat component)

<Modal
            isVisible={isVisible}
            avoidKeyboard={false}
      >
      <View style={{ flex: 1, justifyContent: "flex-end" }}>
          <View style={style.modalContent}>
              {renderFragment()}
          </View>
      </View>

      <TouchableOpacity
          onPress={() => onHide(false)}
          style={style.exitBubbleContainer}>
          <Icon name="close" color={Colors.rojoExcel} size={RFPercentage(3)} />
      </TouchableOpacity>
  </Modal>

Chat component

<View
            style={{ flex: 1, position: "relative", padding: 8 }}>
            <View style={style.statusBarContainer}>
                <View style={{ flex: 1, flexDirection: "row", alignItems: "center" }}>
                    <View style={[style.onlineOfflineIndicator, {
                        backgroundColor: agentOnline ? Colors.pedidoenRutaColor : Colors.grisMedio
                    }]} />
                    <View>
                        <Text style={style.statusBarText}>
                            {agentOnline && agentOnline}
                        </Text>
                        {isTyping && <Text style={style.mutedText}>Escribiendo...</Text>}
                    </View>
                </View>
                <View style={{ flex: 1, alignItems: "flex-end" }}>
                    <TouchableOpacity
                        onPress={confirmFinish}
                        style={[style.endButton]}>
                        <Text style={style.endTextButton}>Finalizar consulta</Text>
                    </TouchableOpacity>
                </View>

            </View>
            <View style={{
                flex:1,
            }}>
                <GiftedChat

                    messages={messages}
                    onSend={onSend}
                    renderBubble={(props) => <CustomBubble {...props} />}
                    locale={"es-ES"}
                    renderSend={props => <CustomSendButton {...props} />}
                    renderActions={props => <CustomActions handlePress={confirmVideoCam} />}
                    user={{
                        _id: me,
                    }}    
                    placeholder="Esciba un mensaje..."    
                            
                />

            </View>


        </View>

im triying with KeyboardAvoidView but i don have good results :(

Expected Results

See images

Additional Information

• Nodejs version: 14.19.1
• React version: 16.9.0
• React Native version: 0.62.0
• react-native-gifted-chat version: 0.16.3
• Platform(s) (iOS, Android, or both?): iOS
• TypeScript version: JavaScript

[sultan-arshi]

+1

[flexingCode]

I fix the problem but i dont know why works hahaha, i will upload the code soon

[flexingCode]

Im using react-native-modal for modal component so i added the prop avoidKeyboard={true} To my modal component.

in my chat component add the prop to gifted-chat bottomOffset={ Platform.OS==="ios"?340:0} (i dont know why 340, i will test on devices for see som behavior)

then i added the renderInputToolbar to gifted chat component and add the next code:

renderInputToolbar={(props)=><CustomInputToolbar {...props} />}

export const CustomInputToolbar=(props)=>{
    return(
        <InputToolbar containerStyle={{
            justifyContent:"flex-start",
            alignItems:"flex-start",
            height:40
        }} {...props} />
    )
}

i dont know why 40 on height, if someone knows why this values works please share it.

i hope that this can help us.