Skip to content

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

Closed
@timomeh

Description

@timomeh

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions