iOS TextInput Alignment and Padding Issues

[AnmolManocha]

Issue Description

I'm developing a chat application that works seamlessly on Android, but I'm encountering issues on iOS. Specifically, the TextInput field on iOS does not behave as expected:

1. Top Padding Issue: The text inside the TextInput touches the top boundary, causing it to look misaligned and cramped.

2. Keyboard Behavior: When the keyboard is opened and I start typing, even entering a single letter causes the entire inputTextToolbar to shift slightly upward. This behavior is unexpected and does not occur on Android.

3. Text Input Squeeze: After pressing enter and moving to the third line of text, the TextInput field becomes extremely squeezed, reducing the space for text input and eliminating any padding. This leads to a poor user experience.

I've attached screenshots demonstrating the issue on both Android and iOS for reference.

Steps to Reproduce / Code Snippets

<GiftedChat
        messages={messages}
        onSend={(messages) => onSend(messages)}
        alwaysShowSend
        renderAvatar={null}
        renderSend={(props) => (
          <Send {...props} containerStyle={{ minHeight: 60 }}>
            <MCIcon name="send-circle" color="#dd1077" size={60} />
          </Send>
        )}
        renderComposer={(props) => (
          <Composer
            {...props}
            placeholder="Message"
            textInputStyle={{ color: 'black' }}
            textInputProps={{
              marginRight: 8,
              paddingHorizontal: 32,
              backgroundColor: '#fff',
              borderRadius: 26,
              minHeight: 52,
              marginLeft: 0,
              cursorColor: '#dd1077',
              selectionColor: '#dd1077',
            }}
          />
        )}
        renderInputToolbar={(props) => (
          <InputToolbar
            {...props}
            containerStyle={{
              marginHorizontal: 8,
              borderTopWidth: 0,
              paddingVertical: 12,
              backgroundColor: 'transparent',
            }}
          />
        )}
        renderBubble={renderBubble}
        minInputToolbarHeight={80}
        isLoadingEarlier={isLoading}
        loadEarlier={!chatLast}
        maxComposerHeight={Platform.OS === 'ios' ? 108 : 132}
        onLoadEarlier={loadMoreOldMessages}
        bottomOffset={Platform.OS === 'ios' ? 108 : 0}
        keyboardShouldPersistTaps={Platform.select({ android: 'always' })}
        user={{
          _id: tokenData.username,
        }}
      />

Expected Results

Additional Information

• React Native version: 0.71.8
• react-native-gifted-chat version: ^2.4.0
• Platform(s) (iOS, Android, or both?): iOS

[fukemy]

better using AnimatedKeyboard, see this patch #2493