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\'

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!