ed_is_my_name ed_is_my_name - 19 days ago 7
React JSX Question

Seems you're trying to access 'ReactNative.Component' from the 'react-native' package

I'm trying to learn react-native from Tyler McGinnis tutorial: https://egghead.io/lessons/react-react-native-basic-ios-routing#/tab-code

The error message below seems straight forward, but I'm not sure what I'm doing wrong.


Seems you're trying to access 'ReactNative.Component' from the 'react-native' package. Perhaps your meant to access 'React.Component' from the 'react' package instead. For example instead of:

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

You should now do:

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


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

import {Main} from './App/Components/Main';

var styles = StyleSheet.create({ container: {
flex: 1,
backgroundColor: '#111111' }, });

Answer

The cause of your error:

Your file sets React to 'react-native' default export and not 'react' one.

Later in the file you are Accessing React.Component on a variable that is set to the 'react-native' default export won't work (React native doesn't contain Component as a named export)

The 'react' library is where the {Component} (and therefore React.Component) named export is defined.


Solution:

In Main change your imports to the following:

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

...

class Main extends React.Component {
    render(){
        return(
            <View style={styles.mainContainer}>
            <Text>Testing the Router</Text>
            </View>
        )
    }
};

When you refer to React.Component now, there is no issue because it has been defined properly whilst still retaining references to React-Native components.

Comments