CODEWITHSUNDEEP
androidreact-nativenative-base
Pram
Pram

Reputation: 2501

Content not visible native-base

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

Upvotes: 0

Views: 2951

Answers (3)

asametrical
asametrical

Reputation: 338

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.

Upvotes: 4

akhil xavier
akhil xavier

Reputation: 1847

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

Upvotes: 1

Noah Allen
Noah Allen

Reputation: 796

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%'
  }
})

Upvotes: 1

Related Questions