CODEWITHSUNDEEP
javascriptnode.jsreactjsnpmreact-native
Lew Wei Hao
Lew Wei Hao

Reputation: 843

React native: Can't import and use external packages

I am trying to use the react-native-tabbar-navigator package. I did npm install react-native-tabbar-navigator --save in my project directory to install the package. In my code, I have the following import lines to use the package.

import React, { Component } from 'react';
import {TabBarNavigator} from 'react-native-tabbar-navigator'
import MainTab from './MainTab';


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

However, running this on my android simulator gives me the following error:

Seems you're trying to access 'ReactNative.Component' from the react-native package. Perhaps you meant to access 'React.Component' from the 'react' package instead?

If I remove the import line for the TabBarNavigator, the error goes away. Why is this happening?

I am using version 0.3.0 of tabbarnavigator and 0.31.0-rc.0 version of react-native

Upvotes: 2

Views: 1391

Answers (1)

QoP
QoP

Reputation: 28397

that library is outdated, it won't work till they release a new version.

As you can see here, TabBarNavigator is importing Component from 'react-native' which is not supported on react-native v0.26+ .

You can manually change that in your local package(node_modules),

replacing 

var React = require('react-native');
var {
  Component,
  StyleSheet,
  Text,
  View,
  TabBarIOS
} = React;

to this

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

in MainTabBar.js and MainNavigator.js.

Anyway it would be easier for you to install an updated library like react-native-tab-navigator.

Upvotes: 2

Related Questions