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

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:

Render successful

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

enter image description here

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

enter image description here

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?


ANSWERS:


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>
    );
  }
}

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



 MORE:


 ? Can't use fat arrow functions (ES6) in react
 ? Accessing static members of a class within static methods
 ? even strings of an array in backwards way
 ? non-static method run(JFrame,int,int) cannot be referenced from a static context
 ? Karma/Jasmine not finding required files
 ? Issue setting local heroku environment variables
 ? Disable optimizing imports when writing JSX in IntelliJ IDEA
 ? How can react lazyload child route using react-router?
 ? Recieve JSON data in CodeIgniter PHP framework from React - AJAX
 ? How to call localhosted API from Reactjs?