ReactNative - Component not rendering when it's inside any other tag | NativeBase Custom Components

Question

Trying to call the component class GlobalHeader from a separate file.
Problem is, it won't display whenever it's in any other tag.

I've tried:

1. Adding a StyleSheet with flex: 1 to the Container, Header and GlobalHeader
2. Removing native-base components and sticking with react-native components.
3. Toying around with export default (Doubt this is the problem)
4. Replacing the ES6 import with NodeJS require
5. Playing around with GlobalHeader's structure (Putting containers in it and the like)

I can successfully call and render it here:

If it's in another tag; yes, I've tried all sorts of tags:

Expected output (Yes, I know how to fix the icons):

Code for Details.js:

import React, { Component } from 'react';
import { Container, Content, List, ListItem, Text, Header, Title, Button, Icon } from 'native-base';

import GlobalHeader from "../components/GlobalHeader";

export default class Details extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Container>
        <GlobalHeader />
        <Content>
            <List dataArray={this.props.crate}
                renderRow={(item) =>
                    <ListItem>
                        <Text>{item}</Text>
                    </ListItem>
                }>
            </List>
        </Content>
      </Container>

        // <GlobalHeader />
    );
  }
}

module.exports = Details;

Code for GlobalHeader.js:

import React, { Component } from 'react';
import { Container, Content, List, ListItem, Text, Header, Title, Button, Icon } from 'native-base';

export default class GlobalHeader extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (

        <Header>
          <Button transparent>
              <Icon name='ios-arrow-back' />
          </Button>

          <Title>Header</Title>

          <Button transparent>
              <Icon name='ios-menu' />
          </Button>
        </Header>

    );
  }
}

module.exports = GlobalHeader;

Help would be much appreciated. Not changing my routes/navigator.
Only read about ES6 when I encountered this problem so it could be an ES6 problem?

Answer 1

Looking at your example and the native-base docs:

• NativeBase provides its own frame component, named after .
• All the components should be included within the Container.
• Container takes mainly three components: < Header>, < Content> and < Footer>.
• Container comes with its predefined stylesheet, with an added advantage of accepting user-defined styles.
• Usage of Container's Header component is very similar to your HTML . So is with Footer.
• The Content component of Container is nothing but the body section of your screen.

But the Container Sees your component as GlobalHeader, not the native-base Header, so it ignores it.

At first I thought that if you move the Header out of the GlobalHeader up to the Details component, this would work, but unfortunately, native-base Header only accepts native-base Button and Title:

• Header takes input as: Button and Title

So I don't think this will work..
I'm thinking of two options:

1. Embed GlobalHeader into Details.
2. If GlboalHeader is a simple component with no state, you can convert it into a function that returns the Header like so: (untested)

GlobalHeader:

import React from 'react';
import { Container, Content, List, ListItem, Text, Header, Title, Button, Icon } from 'native-base';

export default function () {    
    return (
        <Header>
          <Button transparent>
              <Icon name='ios-arrow-back' />
          </Button>

          <Title>Header</Title>

          <Button transparent>
              <Icon name='ios-menu' />
          </Button>
        </Header>
    );
}

Details:

import React, { Component } from 'react';
import { Container, Content, List, ListItem, Text, Header, Title, Button, Icon } from 'native-base';

import getGlobalHeader from "../components/GlobalHeader";

export default class Details extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Container>
        {getGlobalHeader()}
        <Content>
            <List dataArray={this.props.crate}
                renderRow={(item) =>
                    <ListItem>
                        <Text>{item}</Text>
                    </ListItem>
                }>
            </List>
        </Content>
      </Container>
    );
  }
}

Answer 2

This has been answered, please check here and Issue #297

NativeBase as of now does not support custom components.

And this to be fixed with the rewrite of NativeBase