0

I have simple anatomy with header, content and footer inside container, But only header is visible and nothing visible in content (with header and content only)

<Header>....</Header>
<Content><Text>Some content</Text></Content>

But, if I place all ie. header, content and footer. Then footer replaces header and only footer is visible. Content is not at all visible in any case. native-base -v 2.3.1

Pram
  • 2,383
  • 2
  • 19
  • 21

3 Answers3

4

I was able to reproduce this anytime there is a parent component in the hierarchy that does not have flex: 1 that Noah Allen listed in his answer. Be sure to look up the entire component hierarchy to ensure there are no <View>'s being used as un-styled wrappers.

The easiest way to reproduce this error is to wrap all the content in an unstyled <View> component:

<View>
  <Container>
    <Header />
    <Content>
      <Text>
        This text does not show when Container is wrapped in a "View"
      </Text>
    </Content>
  </Container>
</View>

See a demonstration here: https://snack.expo.io/@asametrical/native-base-content-empty

Removing the <View> component makes the text render inside <Content>. Applying flex: 1 as a style as Noah mentioned to ALL parent <View> components in the hierarchy also ensures the content is rendered.

asametrical
  • 308
  • 2
  • 9
1

You should wrap everything in a View, with a style set like so:

<View style={styles.container}>
  <Header>...</Header>
  <Content>
    <Text>Some content</Text>
  </Content>
  <Footer>...</Footer>
</View>

And then in your stylesheet:

const styles = StyleSheet.create({
  container: {
    flex: 1, // You should only need this
    height: '100%', // But these wouldn't hurt.
    width: '100%'
  }
})
Noah Allen
  • 699
  • 5
  • 14
1

try upgrading to latest version of native-base(current version is 2.6.1)

import React, { Component } from 'react';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon, Text } from 'native-base';

export default class App extends Component {
  render() {
    return (
      <Container>
        <Header>
          <Left>
            <Button transparent>
              <Icon name='menu' />
            </Button>
          </Left>
          <Body>
            <Title>Header</Title>
          </Body>
          <Right />
        </Header>
        <Content>
          <Text>
            This is Content Section
          </Text>
        </Content>
        <Footer>
          <FooterTab>
            <Button full>
              <Text>Footer</Text>
            </Button>
          </FooterTab>
        </Footer>
      </Container>
    );
  }
}

enter image description here

akhil xavier
  • 1,847
  • 15
  • 15
  • i tried with latest initially, But with latest version i was not able to see any thing. So i switched to 2.3.1 – Pram Jul 07 '18 at 07:21
  • @pram if you have not applied any styles the above code should work. Try setting 'marginTop:100' to Text. Also try adding more components to the content component. – akhil xavier Jul 07 '18 at 07:43
  • Content tag is not at all showing up. if i add header,content and footer, i see only footer on top – Pram Jul 07 '18 at 07:48