React NativeBase not showing my imported components

Question

I'm fairly new to React and React Native and I'm having a play with React NativeBase.

I've managed to get the following working within a single file, but now I'm simply trying to split up my code into multiple components in separate files.

The problem is, my imported component does not show. I've struggled with this for a while now and I can't see what I'm doing wrong... probably something really stupid.

Here is my code:

code/index.ios.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import {
  Container,
  Title,
  Header,
} from 'native-base';
import MainContent from './main';

class AwesomeNativeBase extends Component {
  render() {
    return (
      <Container>
        <Header>
          <Title>My awesome app</Title>
        </Header>
        <MainContent />
      </Container>
    );
  }
}
AppRegistry.registerComponent('AwesomeNativeBase', () => AwesomeNativeBase);

code/main.js

import React from 'react';
import { Text } from 'react-native';
import { Content } from 'native-base';

export default class MainContent extends React.Component {
  render() {
    return (
      <Content>
        <Text>Oh hello there!</Text>
      </Content>
    );
  }
}

I'm running this using:

rnpm link
react-native run-ios

So just to clarify, the code in index.ios.js shows fine and the header is displayed in the iPhone simulator, however, the text in main.js does not.

Any help is much appreciated!

Answer 1

NativeBase Container as of now mainly accepts Header, Content and Footer.

NativeBase Content in-turn takes Image, View and ScrollView of React Native and not any other custom components.

Thank you for bringing this into notice.

My team will get back to you with the solution.

Answer 2

So I've figured out the issue... It seems like React NativeBase does not allow you to have the <Content> section outside of the main component. Something like this works:

code/index.ios.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import {
  Container,
  Title,
  Header,
  Content,
} from 'native-base';
import MainContent from './main';

class AwesomeNativeBase extends Component {
  render() {
    return (
      <Container>
        <Header>
          <Title>My awesome app</Title>
        </Header>
        <Content>
          <MainContent />
        </Content>
      </Container>
    );
  }
}
AppRegistry.registerComponent('AwesomeNativeBase', () => AwesomeNativeBase);

code/main.js

import React from 'react';
import { Text } from 'react-native';

export default class MainContent extends React.Component {
  render() {
    return (
      <Text>Oh hello there!</Text>
    );
  }
}

So now if you notice, I have just the <Text> tags in my main.js and not the <Content> tags... Not too sure why this makes a huge difference but it's good to know!