Space at the top when inverting the scroll view.

[expo]

Space at the top when inverting the scroll view.

[jameshartt]

@maxs15 If you haven't already tried it, <ListView contentContainerStyle={{ flexGrow: 1, justifyContent: 'flex-end' }} works very well for me on both platforms.

[Feng999]

<ListView contentContainerStyle={{ flexGrow: 1, justifyContent: 'flex-end' }}
works well for me.

[fschai89]

the { flexGrow: 1, justifyContent: 'flex-end' } in latest version 1.1.0 seem not work, anyone know how to solve this?

[aarongreenwald]

In case anyone is still struggling with this, here's how I solved it, using the suggestions above:

In the render function:

<View style={styles.container} ref='container'>
    <InvertibleScrollView inverted>
        {this.state.scrollViewPadding ? <View style={{height: this.state.scrollViewPadding}} /> : null}
        <View onLayout={this._adjustPadding.bind(this)}>
            {items.map(item => <MyComponent item={item} />)}
        </View>
    </InvertibleScrollView>
</View>

In the class:

_adjustPadding({nativeEvent}) {
    let height = nativeEvent.layout.height;
    let container = this.refs.container;
    UIManager.measure(React.findNodeHandle(container), (x, y, width, containerHeight) => {
        this.setState({scrollViewPadding: Math.max(containerHeight - height, 0)});
    });
}

[irfaan]

Yes - thanks @joshuapinter !

@ide - can you point me to @brentvatne 's flex-box solution? Can't seem to find it.

[irfaan]

Addressed in #5.

@ide, your component is great for chat applications because new items scroll the new message into position automatically.

Do you know of any way to solve this gap problem while using invertible-scroll-view to maintain that feature? Possible solutions, each with their own drawbacks:

1. Use a spacer below and let invertible-scroll-view expand until a certain height, at which point it begins to scroll as expected. Using that method, we lose the ability to touch and drag a short list if not directly on top of the content (as we would be attempting to scroll on the spacer).
2. Nest an invertible-scroll-view inside a scrollView until its height exceeds that of the scrollView, at which point we somehow strip the scrollView container?

At this point, 1 is more desirable, but I don't know how we watch the height of the spacer to determine when to prevent the invertible-scroll-view from continuing to grow.

[ide]

My recommended solution would be to add dummy paddingTop to the contentContainerStyle (which gets rendered at the bottom because of the inversion). Then use an onLayout prop on the contentContainer (might need to hack into ScrollView for this) to learn when it resizes, and adjust the paddingTop to be min(scrollViewHeight - contentHeight, 0).

[pjadavies]

I had problems getting onLayout sizes for the ScrollView so instead I used an empty View with flex:1 that acted as a buffer underneath the ScrollView. Once the ScrollView exceeded the height of the full window, I added flex: 1 to that to it would scroll as expected.

[irfaan]

@pjadavies your method is analogous to '1' in my last #11 (comment) above, correct? You lose the ability to manipulate the scrollview if not directly over content (because you would be touching the empty view), yes?

How did you watch the height of the scrollView to tell when it had exceeded the height of the full window?

[pjadavies]

@irfaan yup that's correct

I'm not sure what you mean about losing the ability to manipulate the scrollView. In my version, the ScrollView has a parent View scrollViewParent and I use onLayout to measure the height of that.

[irfaan]

@ide Regarding your suggestion in #11 (comment), onLayout fires after the padding is set too, which puts it into an infinite resizing loop (new height -> adjust padding > new height > adjust padding > ... ).

Perhaps I'm doing it wrong?

[ide]

Maybe you could use marginTop, and check in the onLayout event whether the height changed since the last onLayout event, or if only the y-coordinate changed when only the margin is adjusted.

[alejomendoza]

Amazing @aarongreenwald ! thanks!

[joshuapinter]

I was able to solve this in a fairly clean way. One that can be used with a ListView and passing InvertibleScrollView to the renderScrollComponent prop.

I'm using an absolute height for the ListView but you can easily obtain the ListView height dynamically and replace listViewHeight with that dynamic value.

Set Initial State

this.state = {
  listViewPaddingTop: 0
};

Update Function

updateListViewPaddingTop(listViewContentHeight) {
  let listViewHeight = 255;
  let listViewPaddingTop;

  if (listViewContentHeight >= listViewHeight) {
    listViewPaddingTop = 0;
  }
  else {
    listViewPaddingTop = listViewHeight - listViewContentHeight;
  }

  this.setState({
    listViewPaddingTop: listViewPaddingTop
  });
}

ListView

Makes use of onContentSizeChange to trigger a call to updateListViewPaddingTop and pass the new contentHeight. This will "push" the content upwards when there isn't enough content to fill the entire ListView.

<ListView
  renderScrollComponent={ (props) => <InvertibleScrollView {...props} inverted /> }
  onContentSizeChange={ (contentWidth, contentHeight) => { this.updateListViewPaddingTop(contentHeight) } }
  style={{ height: 255, paddingTop: this.state.listViewPaddingTop }} />

Note: Important props like dataSource and renderRow have been omitted for the sake of brevity and clarity.

[ide]

@joshuapinter Thanks for sharing your solution with onContentSizeChange!

@brentvatne also came up with a solution that uses flex box by setting justifyContent on both the ListView and its content container to flex-end instead of flex-start.

[joshuapinter]

@ide @irfaan Yeah, that would be great. I couldn't find it either. And I tried to replicate it but couldn't quite get it to work properly.

[ide]

I don't have the actual code at hand. But it's not so hard to replicate -- the idea is more helpful than the code itself. You set justifyContent: 'flex-end' on the ListView and content container.

[JakeRuth]

I may be totally off here cause I only skimmed this thread, but I was facing annoying issues with content in a ScrollView being 'bumped down' as if there was padding on the top of the view. I found that if I pass this prop as false it solved my problem:
automaticallyAdjustContentInsets={false}

[kfiroo]

Did anyone get the justifyContent: 'flex-end' to work?

[maxs15]

<ListView contentContainerStyle={{flex: 1, justifyContent: 'flex-end'}}

Works on my side, but the scroll doesn't work properly anymore when the list is getting bigger..

[johnchourajr]

@Feng999 that was by far the easiest implementation

[nzoLogic]

@fschai89 It worked for me when I had 2 or 3 messages. If I had more it would cut off the bottom.

My solution was to use a function to return an object of props to pass to listViewProps of the GiftedChat component.

returnListViewProps = messages => { const props = {padding: 10}; return messages.length < 4 ? { ...props, flexGrow: 1, justifyContent: 'flex-end' } : props; };

[evanjmg]

flexGrow: 1, justifyContent: 'flex-end' works with FlatList - thank you so much @Feng999 . Spent an hour on this. There's no need for this library as inversion is supported now