mrpopo mrpopo - 1 month ago 12
React JSX Question

React NativeBase not showing my imported components

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

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!

Comments