bamlab / react-native-image-header-scroll-view

ScrollView with an image in header which becomes a navbar
MIT License
997 stars 99 forks source link

Height of the ScrollView and of its content is broken #7

Closed timomeh closed 7 years ago

timomeh commented 7 years ago

The layout is broken to a point where unfortunately I can't use the package (at least with a flexible height of the ScrollView).

  1. The height of the HeaderImageScrollView is the available space, plus the current height of the header.
  2. On Android, the ScrollView content has a height content_height - (current height of the header). So if the content is smaller than the header, it isn't visible at all. If the content is taller than the header, it is visible, but minus the height of the header.
    I'm not quite sure if that's the whole story, but it's everything I could inspect. I can't wrap my head completely around it.

Here's is a screenshot of three views, each with a height of 100 and a header-height of 150, in iOS. (The header is the transparent thing above the colored views)

image

Here's the same on Android.

image

The render function is pretty straight forward:

      <View style={{ flex: 1 }}>
        <HeaderImageScrollView
          maxHeight={150}
          minHeight={80}
          renderHeader={this._renderTitleBackground}
          renderForeground={this._renderTitleForeground}
          renderFixedForeground={this._renderStickyHeader}
          fadeOutForeground
        >
          <View style={{ height: 100, backgroundColor: 'blue' }} />
          <View style={{ height: 100, backgroundColor: 'red' }} />
          <View style={{ height: 100, backgroundColor: 'green' }} />
        </HeaderImageScrollView>
      </View>
Nhacsam commented 7 years ago

Thanks for reporting the issue. I should have fixed it in the 0.4.1 Can you confirm your problem is sloved ?

timomeh commented 7 years ago

Thank you, the problem is solved now. :)