Nativebase: Content does not stretch to full height

[gokulkulkarni1987]

react-native, react and native-base version

"react-native": "0.48.4"
"react": "16.0.0-alpha.12"
"native-base": "2.3.3"

Expected behaviour

Flatlist (horizonatl) present inside the content must stretch to full height.

Actual behaviour

Flatlist wraps the height, without content it used to fill the whole height.

Steps to reproduce (code snippet or screenshot)

<Container style={{ marginTop: 22 }}>
        <Header searchBar rounded>
          <Item>
            <Icon active name='search' />
            <Input placeholder='Search' />
          </Item>
          <Button transparent>
            <Text>Search</Text>
          </Button>
        </Header>
        <Content style={{ flex: 1 }}>
          <FlatList
            data={this.state.items}
            renderItem={this.renderRow.bind(this)}
            keyExtractor={(item) => item.row._id}
            horizontal
            removeClippedSubviews={false}
            style={{ flex: 1 }}
          />
        </Content>
</Container>

Screenshot of emulator/device

Is the bug present in both ios and android or in any one of them?

Issue seen in Both

Any other additional info which would help us debug the issue quicker.

I tried,

• wrapping up Flatlist with nativebase View
• Giving style={{ flex: 1 }} contentContainerStyle={{ flex: 1 }} to Content.
• Tried giving flex to the items which are being displayed.
  None of them is working.

[gokulkulkarni1987]

fixed it by adding,
contentContainerStyle={{ flexGrow: 1 }}

[EvHaus]

Thank you @gokulkulkarni1987. This was driving me nuts.

contentContainerStyle is not a documented property of <Content /> on the official docs.

And even the <Fab /> component documentation uses a plain <View /> instead of <Content /> which made it confusing.

@SupriyaKalghatgi Any reason contentContainerStyle isn't documented under the Anatomy section where Content is described?

[SupriyaKalghatgi]

@EvHaus About contentContainerStyle, yes we will add this
Sorry! missed this

[hrmoller]

@SupriyaKalghatgi please do so👍

[shah-vivek]

@SupriyaKalghatgi
The property "contentContainerStyle" is not present on the documentation. Is there a plan to deprecate this?

[cargallo]

Same Issue here. The solution proposed not working here...

[Abhishek12345679]

setting contentContainerStyle to {flexGrow:1} no longer works ?

(Edit: Solution all the parent component should have a style of flex 1)