title: Weird Spacing Between Text Input and Keyboard Android react native
body: <p>Please, can anybody help me, I'm seeing this issue on Android and have no idea why it's happening? I tried KeyboardAvoidingView, but still, nothing is happening, that's when I tried to use behavior=&quot;padding&quot; instead of height and setting it to some number or zero, but that doesn't help either (an even bigger gap is created). Did anyone have a similar problem?</p>
  <p>This is my code:</p>
  <pre><code>let content = (
  &lt;KeyboardAvoidingView
    style={{
      flex: 1,
      backgroundColor: theme.bodyColor,
    }}
    behavior={Platform.OS === 'ios' ? 'padding' : 'padding'}
    keyboardVerticalOffset={Platform.OS === 'ios' ? 120 : -120}&gt;
    &lt;View style={{flex: 8}}&gt;
      &lt;SectionList
        bounces={true}
        inverted
        stickySectionHeadersEnabled={true}
        contentContainerStyle={{}}
        showsVerticalScrollIndicator={true}
        sections={props.messages[0].data}
        extraData={props.messages.has_more}
        onEndReached={() =&gt; {
          props.loadMoreData(props.route.params.channel, props.cursor);
        }}
        onEndReachedThreshold={0.1}
        keyExtractor={keyExtractor}
        renderSectionFooter={renderSectionFooter}
        renderItem={renderItem}
      /&gt;
    &lt;/View&gt;
    &lt;View
      style={{
        flex: 1,
        flexShrink: 1,
        backgroundColor: theme.bodyColor,
        width: width,
        borderTopWidth: 1,
        borderTopColor: theme.footerBorderColor,
      }}&gt;
      &lt;View
        style={{
          flexDirection: 'row',
          borderRadius: 30,
          alignItems: 'center',
          borderWidth: 1,
          borderColor: '#AEAEAE',
          margin: 20,
          marginTop: 10,
          marginBottom: 10,
        }}&gt;
        &lt;TextInput
          style={{
            padding: 15,
            color: '#4A4A4A',
            flex: 8,
            minHeight: 45,
          }}
          value={props.newMessage}
          onChangeText={(newText) =&gt; props.setNewMessage(newText)}
          placeholderTextColor={'#9A9A9A'}
          placeholder={'Type Your Message'}
          color={theme.primaryTextColor}
        /&gt;
        &lt;View
          style={{
            flex: 1,
            alignItems: 'flex-end',
            marginRight: 15,
          }}&gt;
          &lt;TouchableOpacity
            activeOpacity={props.sendingMessage ? 1 : 0.7}
            disabled={props.sendingMessage}
            onPress={() =&gt; {
              props.sendMessage(props.route.params.channel, props.newMessage);
            }}&gt;
            &lt;SendIcon size={24} active={theme.fab.fabBackgroundColor} /&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    &lt;/View&gt;
  &lt;/KeyboardAvoidingView&gt;
  </code></pre>
  <p>);</p>
  <p>Image of the problem:</p>
  <p><a href="https://i.stack.imgur.com/1Kzrs.png" rel="nofollow noreferrer">check this image</a></p>