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

1
votes

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'   }, });
2
iosreactjsreact-native
Could you post the rest of the file contents as well as the one from Main.js? – Pineda
Thanks: github.com/ebruner/githubNotetaker/blob/master/index.ios.js - github.com/ebruner/githubNotetaker/blob/master/App/Components/… – ed_is_my_name
Thanks, I've added my answer below. You have a conflict because you use React.Component in Main where previously a variable React has been defined and assigned to the 'react-native' default export – Pineda

2 Answers

4
votes

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.

2
votes

This error message was supposed to be a warning about a deprecation introduced with v 0.25.1

https://github.com/facebook/react-native/releases/tag/v0.25.1

Requiring React API from react-native is now deprecated. You still have it in your Main.js

var React = require('react-native');

var {
    StyleSheet,
    Text,
    View
} = React;

Change it to :

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