Big Space between items in FlatList

Question

I'm implementing Comment Page like Facebook. Somehow I'm getting a plenty of white space. Check this out!

When I scroll it to the bottom... the rest of comments are there.. so weird

Here is my render function and FlatList

render() {
    return (
        <RkAvoidKeyboard style={styles.bigContainer} onResponderRelease={(event) => {
        Keyboard.dismiss();
      }}>
        <FlatList
          ref='list'
          style={styles.root}
          data={this.props.comments}
          ItemSeparatorComponent={this._renderSeparator}
          keyExtractor={this._keyExtractor}
          renderItem={this._renderItem}/>
            {this._renderKeyboard()}
        </RkAvoidKeyboard>
    )
  }

_keyExtractor(item, index) {
    return item.id;
  }

  _renderSeparator() {
    return (
      <View style={styles.separator}/>
    )
  }

I set the background color of the FlatList and it colors all screen (except the keyboard and navigation). I didn't notice this until I implement my Keyboard input. So nothing wrong with Keyboard.

This is so werid..!!

score 1 · Answer 1 · answered Oct 16 '17 at 18:05

To me the space looks exactly the size of keyboard, instead of using the RkAvoidKeyboard spacer, try using react-native-keyboard-spacer

Its easy to set up and you will just have to set it under your comment textInput component or at the bottom of the container whichever suits you.

Here is a sample that I can provide and that may help you

<View>

<FlatList
    data = {dataSource}
    renderItem = {({item}) => this._renderFlatListItem(item)}
    keyExtractor = {(item) => item.id}
/>


<View style={style.textInputContainer}>

    <TextInput
        placeholder={"Text goes here"}
        ref={input => { this.textInput = input }}
        onChangeText={(text) => this.setState({currentMessage:text})}
        value={this.state.message}
        multiline={true}
        underlineColorAndroid = {'transparent'}
    />

    <TouchableHighlight 
        underlayColor={'transparent'} 
        style={style.sendButtonContainer} 
        onPress = {() => {this._sendMessage();}}>

        <Image  source={require('../../Assets/Images/shape.png')} 
                style={style.sendButton} resizeMode="contain"/>

    </TouchableHighlight>


</View>

<KeyboardSpacer/>

All the best!

That's actually GREAT point. Thanks for the contribution. It actually solved my KeyboardSpacer problem but the space remains same. Any more thought? — merry-go-round, Oct 17 '17 at 03:47
Any idea on this post?? I think you may have some idea https://stackoverflow.com/questions/46864293/how-to-draw-square-to-tag-an-object-react-native — merry-go-round, Oct 21 '17 at 14:50

score 0 · Accepted Answer · answered Oct 17 '17 at 04:00

0

I was getting null for my Avatar Image and that showed huge blank list.

I figured this out while printing all comments on console.

Thank you guys!

answered Oct 17 '17 at 04:00

merry-go-round

4,533
10
54
102

Big Space between items in FlatList

2 Answers2