CODEWITHSUNDEEP
react-native
Raven
Raven

Reputation: 689

Cannot pass <Text> into props.children

In my code I have two objects. A StatusBar & a Text object. I pass these as props.children into another component. I get this error:

"This returns: Element type is invalid: expected a string or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file its defined in."

I have my export line set up just fine, why won't this work? If I remove the TEXT Object, my Status Bar object loads. Its just the Text object that is an issue for me.

Here is my code for app.js

import React, { Component, Text } from 'react';
import { Navigation } from 'react-native';
import ViewContainer from './components/viewcontainer'
import PeopleList from './components/peoplelist';
import StatusBar from './components/bar';

export default class App extends Component {

  render(){
    return(
      <ViewContainer>
        <StatusBar style={{backgroundColor:'orange'}} />
        <Text>Why wont this work?</Text>
      </ViewContainer>
    )
  }

}

And I have my component code, viewcontainer.js

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';


export default class ViewContainer extends Component {
  render() {
    return (
      <View style={[styles.ViewContainer,this.props.style]}>
        {this.props.children}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  ViewContainer: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'flex-start',
    alignItems: 'stretch'
  },

});

Upvotes: 2

Views: 1040

Answers (1)

QoP
QoP

Reputation: 28397

You have to import Text from react-native, not from react.

Replace

import React, { Component, Text } from 'react';
import { Navigation } from 'react-native';

with

import React, { Component } from 'react';
import { Navigation, Text } from 'react-native';

Upvotes: 2

Related Questions