KeyboardAvoidingView extra padding blank area on the top of keyboard

Question

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.

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 => {
    this.setState({ isKeyboardShow: true });
    Animated.timing(this.keyboardHeight, {
      duration: event.duration,
      toValue: event.endCoordinates.height
    }).start(() => {
      console.log("keyboard height:", this.keyboardHeight);
    });
  };

  keyboardWillHide = event => {
    Animated.timing(this.keyboardHeight, {
      duration: event.duration,
      toValue: 0
    }).start(() => {
      console.log("keyboard height:", this.keyboardHeight);
      this.setState({ isKeyboardShow: false });
    });
  };

  _renderTruncatedFooter = handlePress => {
    return (
      <Text style={{ color: "#ff6666", marginTop: 5 }} onPress={handlePress}>
        Read more
      </Text>
    );
  };

  _renderRevealedFooter = handlePress => {
    return (
      <Text style={{ color: "#ff6666", marginTop: 5 }} onPress={handlePress}>
        Show less
      </Text>
    );
  };

  _handleTextReady = () => {};

  getLat = latLng => {
    return parseFloat(latLng.split(",")[0]);
  };

  getLng = latLng => {
    return parseFloat(latLng.split(",")[2]);
  };

  getMapUrls = (latLng, proximity) => {
    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) => {
    if (Platform.OS === "ios") {
      Linking.canOpenURL(appleMapUrl).then(supported => {
        if (supported) {
          return Linking.openURL(googleMapUrl);
        } else {
          return Linking.openURL(appleMapUrl);
        }
      });
    } else {
      Linking.openURL(googleMapUrl);
    }
  };

  _renderPhotoItem({ item, index }, parallaxProps) {
    return (
      <View style={styles.item}>
        <ParallaxImage
          source={{ uri: item }}
          containerStyle={styles.imageContainer}
          style={styles.image}
          parallaxFactor={0.4}
          {...parallaxProps}
        />
      </View>
    );
  }

  get pagination() {
    const { images, activeSlide } = this.state;
    return (
      <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}
      />
    );
  }

  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 (
      <Animated.View
        style={{
          flex: 1,
          justifyContent: "center",
          alignItems: "center",
          paddingBottom: this.keyboardHeight
        }}
      >
        <View style={{ width: "90%" }}>
          <ScrollView>
            <View>
              <View style={styles.titlePictureRow}>
                <Thumbnail
                  square
                  source={{
                    uri: "https://source.unsplash.com/1024x768/?nature"
                  }}
                  style={{
                    borderRadius: 10,
                    width: width * 0.25,
                    height: width * 0.25
                  }}
                />
                <View style={styles.titlePictureIntroSection}>
                  <Text style={styles.titlePictureIntroSectionTitle}>
                    图书馆学习
                  </Text>
                </View>
              </View>
              <Text style={styles.eventTitle}>图书馆学习</Text>
            </View>

            <View style={styles.goingSection}>
              <View style={styles.goingSectionContentContainer}>
                <View style={styles.goingSectionContentRow}>
                  <Text style={{ fontSize: 16 }}>加入申请</Text>
                  <View style={styles.goingSectionApplyContainer}>
                    <Badge
                      primary
                      style={{
                        width: 50,
                        height: 50,
                        borderRadius: 25,
                        alignItems: "center"
                      }}
                    >
                      <Icon name="ios-add" style={{ color: "#fff" }} />
                    </Badge>
                  </View>
                </View>
              </View>
            </View>

            <View style={styles.eventDetailsSection}>
              <View style={styles.eventDetailsSectionRow}>
                <Icon
                  name="access-time"
                  type="MaterialIcons"
                  style={{ color: "#b4b4b4" }}
                />
                <View style={styles.eventDetailsSectionRowWordingSection}>
                  <Text>星期三, 04/09/2019</Text>
                  <Text style={styles.eventDetailsSectionRowWordingSectionTime}>
                    5:30pm - 8:15pm
                  </Text>
                </View>
              </View>
              <View style={styles.eventDetailsSectionRow}>
                <Icon
                  name="location-on"
                  type="MaterialIcons"
                  style={{ color: "#b4b4b4" }}
                />
                <View style={styles.eventDetailsSectionRowWordingSection}>
                  <Text>31 Queen St</Text>
                  <Text style={styles.eventDetailsSectionRowWordingSectionTime}>
                    31 Queen St, Melbourne, Australia
                  </Text>
                </View>
              </View>
              <View
                style={[
                  styles.eventDetailsSectionRow,
                  { alignItems: "center" }
                ]}
              >
                <Icon
                  name="user"
                  type="AntDesign"
                  style={{ color: "#b4b4b4" }}
                />
                <View
                  style={[
                    styles.eventDetailsSectionRowWordingSection,
                    {
                      flexDirection: "row",
                      justifyContent: "center",
                      alignItems: "center"
                    }
                  ]}
                >
                  <Text>Bruce He</Text>
                  <Thumbnail
                    style={{ marginLeft: 20 }}
                    small
                    source={{
                      uri: "https://source.unsplash.com/1024x768/?boy"
                    }}
                  />
                </View>
              </View>
            </View>

            <View style={styles.memberSection}>
              <Text>35人参与活动</Text>
              <View style={styles.memberRow}>
                {[1, 2, 3, 4, 5, 6].map(item => {
                  return (
                    <Thumbnail
                      key={item}
                      style={{ marginVertical: 10, marginRight: 5 }}
                      small
                      source={{
                        uri: "https://source.unsplash.com/1024x768/?girl"
                      }}
                    />
                  );
                })}
              </View>
            </View>

            <View style={styles.eventDescriptionSection}>
              <ReadMore
                numberOfLines={3}
                renderTruncatedFooter={this._renderTruncatedFooter}
                renderRevealedFooter={this._renderRevealedFooter}
                onReady={this._handleTextReady}
              >
                <Text
                  style={styles.cardText}
                >{`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.`}</Text>
              </ReadMore>
            </View>

            <View>
              <MapView
                region={{
                  latitude: -37.8181917,
                  longitude: 144.961775,
                  latitudeDelta: 0.0012,
                  longitudeDelta: 0.0021
                }}
                style={{
                  width: "100%",
                  height: 250,
                  borderRadius: 10
                }}
              >
                <MapView.Marker
                  coordinate={{
                    longitude: 144.961775,
                    latitude: -37.8181917
                  }}
                  title={"图书馆"}
                  description={"赶快加入"}
                />
                <Icon
                  type="Ionicons"
                  style={{
                    color: "#f66",
                    right: 30,
                    bottom: 20,
                    fontSize: 35,
                    position: "absolute"
                  }}
                  name="md-navigate"
                  onPress={() => this.openMap(appleMapUrl, googleMapUrl)}
                />
              </MapView>
            </View>

            <View style={styles.photoSection}>
              <Text style={styles.sectionTitle}>活动图片</Text>
              <View>
                <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 => this.setState({ activeSlide: index })}
                />
                {this.pagination}
              </View>
            </View>

            <View style={styles.commentsSection}>
              <Text style={styles.sectionTitle}>评论</Text>
              <View style={styles.commentInputSection}>
                <Thumbnail
                  small
                  source={{
                    uri: "https://source.unsplash.com/1024x768/?nature"
                  }}
                />

                <Input
                  placeholder="输入评论..."
                  style={{
                    borderWidth: 0.5,
                    borderRadius: 10,
                    marginLeft: 10,
                    marginVertical: 5
                  }}
                />
              </View>

              <View style={styles.commentContainer}>
                <View style={styles.commentCardItem}>
                  <Thumbnail
                    small
                    source={{
                      uri: "https://source.unsplash.com/1024x768/?nature"
                    }}
                  />
                  <View style={styles.commentContentContainer}>
                    <Text style={{ fontWeight: "bold" }}>Arun Chandran</Text>
                    <Text style={{ marginVertical: 3, color: "#b4b4b4" }}>
                      11 Jun., 5:37 pm
                    </Text>
                    <Text>
                      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.
                    </Text>
                    <View style={styles.commentInteractionSection}>
                      <Icon name="ios-heart" style={{ color: "#b4b4b4" }} />
                      <Icon
                        name="reply"
                        type="MaterialCommunityIcons"
                        style={{ color: "#b4b4b4" }}
                      />
                      <Icon name="ios-more" style={{ color: "#b4b4b4" }} />
                    </View>
                  </View>
                </View>
              </View>
            </View>
          </ScrollView>
        </View>
      </Animated.View>
    );
  }
}

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"
  }
});

Answer 1

you can test your platform, android or ios and then controle your padding this way

import {KeyboardAvoidingView,Platform} from 'react-native';

<KeyboardAvoidingView 
  behavior='padding'
  keyboardVerticalOffset={
  Platform.select({
     ios: () => 0,
     android: () => -200
  })()
}>
   ......
</KeyboardAvoidingView>

ps: padding can be positive or negative value like 200 or even -200 .