React Native Keyboard Avoiding View

Question

I'm trying to implement a flatlist of comments alongside a textinput at the bottom. However, when I try to place the textinput in a keyboard avoiding view so that it gets pushed to the top to see the input being typed in, it doesn't go to the top and stays at the bottom. Here is my code:

render() {
    return (
      <KeyboardAvoidingView enabled behavior='padding' style={styles.container}>
      <View style={styles.commentStyles}>
        <FlatList
          keyExtractor={(item) => JSON.stringify(item.date)}
          data={this.props.post.comments}
          renderItem={({item}) => (
            <View style={[styles.row, styles.commentContainer]}>
              <Image style={styles.roundImage} source={{uri: item.commenterPhoto}}/>
              <View style={[styles.left]}>
                <Text>{item.commenterName}</Text>
                <Text style={styles.commentText}>{item.comment}</Text>
                </View>
            </View>
          )}
        />
          <TextInput
            style={styles.input}
            onChangeText={(comment) => this.setState({comment})}
            value={this.state.comment}
            returnKeyType='send'
          placeholder='Add Comment'
            onSubmitEditing={this.postComment}
          />
      </View>
      </KeyboardAvoidingView>
    );
  }

My container just has a flex: 1 styling applied to it. I tried reading through the documentation for KeyboardAvoidingView but found it to be very confusing. If you guys can help me in any way, would greatly appreciate it!

Answer 1

Give this a try.

    import React, {Component} from 'react';
    import {
      StyleSheet,
      Text,
      View,
      KeyboardAvoidingView,
      Platform,
      Dimensions,
      TextInput
    } from 'react-native';
    
    const {height: fullHeight} = Dimensions.get('window');
    
    class Comment extends Component {
      constructor(props) {
        super(props);
        this.state = {
          pageOffset: 0,
        };
      }
    
      onLayout = ({
        nativeEvent: {
          layout: {height},
        },
      }) => {
        const pageOffset =
          fullHeight - height;
        this.setState({pageOffset});
      };
    
      render() {
        return (
          <View style={styles.viewContainer} onLayout={this.onLayout}>
            <KeyboardAvoidingView
              style={styles.container}
              keyboardVerticalOffset={this.state.pageOffset}
              behavior={Platform.OS === 'ios' ? 'padding' : null}>
              


        <FlatList
          keyExtractor={(item) => JSON.stringify(item.date)}
          data={this.props.post.comments}
          renderItem={({item}) => (
            <View style={[styles.row, styles.commentContainer]}>
              <Image style={styles.roundImage} source={{uri: item.commenterPhoto}}/>
              <View style={[styles.left]}>
                <Text>{item.commenterName}</Text>
                <Text style={styles.commentText}>{item.comment}</Text>
                </View>
            </View>
          )}
        />
          <TextInput
            style={styles.input}
            onChangeText={(comment) => this.setState({comment})}
            value={this.state.comment}
            returnKeyType='send'
          placeholder='Add Comment'
            onSubmitEditing={this.postComment}
          />
            </KeyboardAvoidingView>
          </View>
        );
      }
    }
    
    export default Comment;
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'space-between',
      },
      viewContainer: {
        flex: 1,
      },

});