title: KeyboardAvoidingView extra padding blank area on the top of keyboard
body: <p><a href="https://i.stack.imgur.com/nXrRb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nXrRb.png" alt="enter image description here"></a></p>
  
  <p>Any one know why it had an empty space on the top of keyboard when keyboard is open? No matter what value I set to paddingBottom to . There always has an white area on the top of keyboard when it is open. The smaller value set to paddingBottom, the smaller white space would tuens up on the keyboard. However no matter what value set to paddingBottom. The white space never disappear. </p>
  
  <pre><code>import React, { Component } from "react";
  import {
    ScrollView,
    StyleSheet,
    View,
    FlatList,
    TouchableOpacity,
    Image,
    Dimensions,
    Linking,
    Platform,
    KeyboardAvoidingView,
    SafeAreaView,
    Animated,
    Keyboard
  } from "react-native";
  import ReadMore from "react-native-read-more-text";
  import Carousel, {
    ParallaxImage,
    Pagination
  } from "react-native-snap-carousel";
  import Modal from "react-native-modal";
  import {
    Container,
    Header,
    Content,
    Button,
    Text,
    Thumbnail,
    Badge,
    Icon,
    Input
  } from "native-base";
  import MapView from "react-native-maps";
  
  const { width, height } = Dimensions.get("window");
  
  class EventScreen extends Component {
    state = {
      images: [
        "https://source.unsplash.com/1024x768/?nature",
        "https://source.unsplash.com/1024x768/?water",
        "https://source.unsplash.com/1024x768/?girl",
        "https://source.unsplash.com/1024x768/?tree"
      ],
      activeSlide: 0,
      isKeyboardShow: false
    };
    constructor(props) {
      super(props);
  
      this.keyboardHeight = new Animated.Value(0);
    }
  
    componentWillMount() {
      this.keyboardWillShowSub = Keyboard.addListener(
        "keyboardWillShow",
        this.keyboardWillShow
      );
      this.keyboardWillHideSub = Keyboard.addListener(
        "keyboardWillHide",
        this.keyboardWillHide
      );
    }
  
    componentWillUnmount() {
      this.keyboardWillShowSub.remove();
      this.keyboardWillHideSub.remove();
    }
  
    keyboardWillShow = event =&gt; {
      this.setState({ isKeyboardShow: true });
      Animated.timing(this.keyboardHeight, {
        duration: event.duration,
        toValue: event.endCoordinates.height
      }).start(() =&gt; {
        console.log("keyboard height:", this.keyboardHeight);
      });
    };
  
    keyboardWillHide = event =&gt; {
      Animated.timing(this.keyboardHeight, {
        duration: event.duration,
        toValue: 0
      }).start(() =&gt; {
        console.log("keyboard height:", this.keyboardHeight);
        this.setState({ isKeyboardShow: false });
      });
    };
  
    _renderTruncatedFooter = handlePress =&gt; {
      return (
        &lt;Text style={{ color: "#ff6666", marginTop: 5 }} onPress={handlePress}&gt;
          Read more
        &lt;/Text&gt;
      );
    };
  
    _renderRevealedFooter = handlePress =&gt; {
      return (
        &lt;Text style={{ color: "#ff6666", marginTop: 5 }} onPress={handlePress}&gt;
          Show less
        &lt;/Text&gt;
      );
    };
  
    _handleTextReady = () =&gt; {};
  
    getLat = latLng =&gt; {
      return parseFloat(latLng.split(",")[0]);
    };
  
    getLng = latLng =&gt; {
      return parseFloat(latLng.split(",")[2]);
    };
  
    getMapUrls = (latLng, proximity) =&gt; {
      const scheme = Platform.select({
        ios: "maps:0,0?q=",
        android: "geo:0,0?q="
      });
      const _latLng = `${this.getLat(latLng)},${this.getLng(latLng)}`;
      const label = proximity;
  
      //index 0 contains appleMapUrl 1 contains googleMapUrl
      return [`${scheme}${label}@${_latLng}`, `${scheme}${_latLng}(${label})`];
    };
  
    openMap = (appleMapUrl, googleMapUrl) =&gt; {
      if (Platform.OS === "ios") {
        Linking.canOpenURL(appleMapUrl).then(supported =&gt; {
          if (supported) {
            return Linking.openURL(googleMapUrl);
          } else {
            return Linking.openURL(appleMapUrl);
          }
        });
      } else {
        Linking.openURL(googleMapUrl);
      }
    };
  
    _renderPhotoItem({ item, index }, parallaxProps) {
      return (
        &lt;View style={styles.item}&gt;
          &lt;ParallaxImage
            source={{ uri: item }}
            containerStyle={styles.imageContainer}
            style={styles.image}
            parallaxFactor={0.4}
            {...parallaxProps}
          /&gt;
        &lt;/View&gt;
      );
    }
  
    get pagination() {
      const { images, activeSlide } = this.state;
      return (
        &lt;Pagination
          dotsLength={images.length}
          activeDotIndex={activeSlide}
          containerStyle={{
            marginTop: -height * 0.08
          }}
          dotStyle={{
            width: 10,
            height: 10,
            borderRadius: 5,
            marginHorizontal: 8,
            backgroundColor: "rgba(255, 255, 255, 0.92)"
          }}
          inactiveDotStyle={
            {
              // Define styles for inactive dots here
            }
          }
          inactiveDotOpacity={0.4}
          inactiveDotScale={0.6}
        /&gt;
      );
    }
  
    render() {
      const { categories } = this.props;
  
      let mapUrls = this.getMapUrls("-37.8181917,144.961775", "图书馆");
  
      let appleMapUrl = mapUrls[0];
      let googleMapUrl = mapUrls[2];
  
      let inputHeight = this.keyboardHeight;
  
      // const inputInterpolateValue = this.keyboardHeight.interpolate({
      //   inputRange: [0, 1],
      //   outputRange: [0, 1]
      // });
  
      return (
        &lt;Animated.View
          style={{
            flex: 1,
            justifyContent: "center",
            alignItems: "center",
            paddingBottom: this.keyboardHeight
          }}
        &gt;
          &lt;View style={{ width: "90%" }}&gt;
            &lt;ScrollView&gt;
              &lt;View&gt;
                &lt;View style={styles.titlePictureRow}&gt;
                  &lt;Thumbnail
                    square
                    source={{
                      uri: "https://source.unsplash.com/1024x768/?nature"
                    }}
                    style={{
                      borderRadius: 10,
                      width: width * 0.25,
                      height: width * 0.25
                    }}
                  /&gt;
                  &lt;View style={styles.titlePictureIntroSection}&gt;
                    &lt;Text style={styles.titlePictureIntroSectionTitle}&gt;
                      图书馆学习
                    &lt;/Text&gt;
                  &lt;/View&gt;
                &lt;/View&gt;
                &lt;Text style={styles.eventTitle}&gt;图书馆学习&lt;/Text&gt;
              &lt;/View&gt;
  
              &lt;View style={styles.goingSection}&gt;
                &lt;View style={styles.goingSectionContentContainer}&gt;
                  &lt;View style={styles.goingSectionContentRow}&gt;
                    &lt;Text style={{ fontSize: 16 }}&gt;加入申请&lt;/Text&gt;
                    &lt;View style={styles.goingSectionApplyContainer}&gt;
                      &lt;Badge
                        primary
                        style={{
                          width: 50,
                          height: 50,
                          borderRadius: 25,
                          alignItems: "center"
                        }}
                      &gt;
                        &lt;Icon name="ios-add" style={{ color: "#fff" }} /&gt;
                      &lt;/Badge&gt;
                    &lt;/View&gt;
                  &lt;/View&gt;
                &lt;/View&gt;
              &lt;/View&gt;
  
              &lt;View style={styles.eventDetailsSection}&gt;
                &lt;View style={styles.eventDetailsSectionRow}&gt;
                  &lt;Icon
                    name="access-time"
                    type="MaterialIcons"
                    style={{ color: "#b4b4b4" }}
                  /&gt;
                  &lt;View style={styles.eventDetailsSectionRowWordingSection}&gt;
                    &lt;Text&gt;星期三, 04/09/2019&lt;/Text&gt;
                    &lt;Text style={styles.eventDetailsSectionRowWordingSectionTime}&gt;
                      5:30pm - 8:15pm
                    &lt;/Text&gt;
                  &lt;/View&gt;
                &lt;/View&gt;
                &lt;View style={styles.eventDetailsSectionRow}&gt;
                  &lt;Icon
                    name="location-on"
                    type="MaterialIcons"
                    style={{ color: "#b4b4b4" }}
                  /&gt;
                  &lt;View style={styles.eventDetailsSectionRowWordingSection}&gt;
                    &lt;Text&gt;31 Queen St&lt;/Text&gt;
                    &lt;Text style={styles.eventDetailsSectionRowWordingSectionTime}&gt;
                      31 Queen St, Melbourne, Australia
                    &lt;/Text&gt;
                  &lt;/View&gt;
                &lt;/View&gt;
                &lt;View
                  style={[
                    styles.eventDetailsSectionRow,
                    { alignItems: "center" }
                  ]}
                &gt;
                  &lt;Icon
                    name="user"
                    type="AntDesign"
                    style={{ color: "#b4b4b4" }}
                  /&gt;
                  &lt;View
                    style={[
                      styles.eventDetailsSectionRowWordingSection,
                      {
                        flexDirection: "row",
                        justifyContent: "center",
                        alignItems: "center"
                      }
                    ]}
                  &gt;
                    &lt;Text&gt;Bruce He&lt;/Text&gt;
                    &lt;Thumbnail
                      style={{ marginLeft: 20 }}
                      small
                      source={{
                        uri: "https://source.unsplash.com/1024x768/?boy"
                      }}
                    /&gt;
                  &lt;/View&gt;
                &lt;/View&gt;
              &lt;/View&gt;
  
              &lt;View style={styles.memberSection}&gt;
                &lt;Text&gt;35人参与活动&lt;/Text&gt;
                &lt;View style={styles.memberRow}&gt;
                  {[1, 2, 3, 4, 5, 6].map(item =&gt; {
                    return (
                      &lt;Thumbnail
                        key={item}
                        style={{ marginVertical: 10, marginRight: 5 }}
                        small
                        source={{
                          uri: "https://source.unsplash.com/1024x768/?girl"
                        }}
                      /&gt;
                    );
                  })}
                &lt;/View&gt;
              &lt;/View&gt;
  
              &lt;View style={styles.eventDescriptionSection}&gt;
                &lt;ReadMore
                  numberOfLines={3}
                  renderTruncatedFooter={this._renderTruncatedFooter}
                  renderRevealedFooter={this._renderRevealedFooter}
                  onReady={this._handleTextReady}
                &gt;
                  &lt;Text
                    style={styles.cardText}
                  &gt;{`Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`}&lt;/Text&gt;
                &lt;/ReadMore&gt;
              &lt;/View&gt;
  
              &lt;View&gt;
                &lt;MapView
                  region={{
                    latitude: -37.8181917,
                    longitude: 144.961775,
                    latitudeDelta: 0.0012,
                    longitudeDelta: 0.0021
                  }}
                  style={{
                    width: "100%",
                    height: 250,
                    borderRadius: 10
                  }}
                &gt;
                  &lt;MapView.Marker
                    coordinate={{
                      longitude: 144.961775,
                      latitude: -37.8181917
                    }}
                    title={"图书馆"}
                    description={"赶快加入"}
                  /&gt;
                  &lt;Icon
                    type="Ionicons"
                    style={{
                      color: "#f66",
                      right: 30,
                      bottom: 20,
                      fontSize: 35,
                      position: "absolute"
                    }}
                    name="md-navigate"
                    onPress={() =&gt; this.openMap(appleMapUrl, googleMapUrl)}
                  /&gt;
                &lt;/MapView&gt;
              &lt;/View&gt;
  
              &lt;View style={styles.photoSection}&gt;
                &lt;Text style={styles.sectionTitle}&gt;活动图片&lt;/Text&gt;
                &lt;View&gt;
                  &lt;Carousel
                    loop={true}
                    autoplay={true}
                    autoplayDelay={500}
                    autoplayInterval={30000}
                    sliderWidth={width}
                    sliderHeight={width}
                    itemWidth={width}
                    data={this.state.images}
                    renderItem={this._renderPhotoItem}
                    hasParallaxImages={true}
                    onSnapToItem={index =&gt; this.setState({ activeSlide: index })}
                  /&gt;
                  {this.pagination}
                &lt;/View&gt;
              &lt;/View&gt;
  
              &lt;View style={styles.commentsSection}&gt;
                &lt;Text style={styles.sectionTitle}&gt;评论&lt;/Text&gt;
                &lt;View style={styles.commentInputSection}&gt;
                  &lt;Thumbnail
                    small
                    source={{
                      uri: "https://source.unsplash.com/1024x768/?nature"
                    }}
                  /&gt;
  
                  &lt;Input
                    placeholder="输入评论..."
                    style={{
                      borderWidth: 0.5,
                      borderRadius: 10,
                      marginLeft: 10,
                      marginVertical: 5
                    }}
                  /&gt;
                &lt;/View&gt;
  
                &lt;View style={styles.commentContainer}&gt;
                  &lt;View style={styles.commentCardItem}&gt;
                    &lt;Thumbnail
                      small
                      source={{
                        uri: "https://source.unsplash.com/1024x768/?nature"
                      }}
                    /&gt;
                    &lt;View style={styles.commentContentContainer}&gt;
                      &lt;Text style={{ fontWeight: "bold" }}&gt;Arun Chandran&lt;/Text&gt;
                      &lt;Text style={{ marginVertical: 3, color: "#b4b4b4" }}&gt;
                        11 Jun., 5:37 pm
                      &lt;/Text&gt;
                      &lt;Text&gt;
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                        ullamco laboris nisi ut aliquip ex ea commodo consequat.
                      &lt;/Text&gt;
                      &lt;View style={styles.commentInteractionSection}&gt;
                        &lt;Icon name="ios-heart" style={{ color: "#b4b4b4" }} /&gt;
                        &lt;Icon
                          name="reply"
                          type="MaterialCommunityIcons"
                          style={{ color: "#b4b4b4" }}
                        /&gt;
                        &lt;Icon name="ios-more" style={{ color: "#b4b4b4" }} /&gt;
                      &lt;/View&gt;
                    &lt;/View&gt;
                  &lt;/View&gt;
                &lt;/View&gt;
              &lt;/View&gt;
            &lt;/ScrollView&gt;
          &lt;/View&gt;
        &lt;/Animated.View&gt;
      );
    }
  }
  
  export default EventScreen;
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: "#fff"
    },
    titlePictureRow: {
      flexDirection: "row"
    },
    titlePictureIntroSection: {
      marginLeft: width * 0.05
    },
    titlePictureIntroSectionTitle: {
      fontWeight: "bold",
      fontSize: 18
    },
    eventTitle: {
      fontWeight: "bold",
      fontSize: 20,
      marginVertical: width * 0.1
    },
    goingSection: {
      width: "100%",
      height: height * 0.1,
      borderTopWidth: 1,
      borderBottomWidth: 1,
      borderColor: "#b4b4b4",
      justifyContent: "center"
    },
    goingSectionContentContainer: {
      marginVertical: height * 0.01,
      justifyContent: "center"
    },
    goingSectionContentRow: {
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "center"
    },
    goingSectionApplyContainer: {
      flexDirection: "row",
      alignItems: "center"
    },
    eventDetailsSection: {
      marginVertical: height * 0.03
    },
    eventDetailsSectionRow: {
      flexDirection: "row",
      marginVertical: 10
    },
    eventDetailsSectionRowWordingSection: {
      marginLeft: 20
    },
    eventDetailsSectionRowWordingSectionTime: {
      color: "#b4b4b4",
      marginTop: 5
    },
    memberSection: {},
    memberRow: {
      flexDirection: "row"
    },
    eventDescriptionSection: {
      marginVertical: height * 0.03
    },
    photoSection: {
      marginVertical: height * 0.05
    },
    item: {
      width: width,
      height: width * 0.5
    },
    imageContainer: {
      flex: 1,
      backgroundColor: "white",
      borderRadius: 3,
      marginVertical: 2.5
    },
    sectionTitle: { fontWeight: "bold", marginBottom: 20 },
    commentContainer: {},
    commentCardItem: {
      flexDirection: "row"
    },
    commentContentContainer: {
      marginLeft: 10
    },
    commentInteractionSection: {
      marginVertical: 5,
      width: "30%",
      flexDirection: "row",
      justifyContent: "space-between"
    },
    commentInputSection: {
      flexDirection: "row",
      marginBottom: 30,
      alignItems: "center"
    }
  });
  
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/rp9dL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rp9dL.png" alt="enter image description here"></a></p>