i'm using React Native for building an Android App

I'm trying to import a ponent in index.android.js file from the folder located in app/containers/AppContainer.js.

When i run the code i got thi error:

Element type is invalid: expected a string (for built-in ponents) or a class/function (for posite ponents) but got: undefined. Check the render method of App

this is my index.android.js file:

import React, { Component } from 'react';

import {  createStore,Provider, applyMiddleware, bineReduxers, pose } from 'redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';


import {  AppRegistry } from 'react-native';
import { expect,assert } from 'chai';

import reducer from './app/reducers';
import AppContainer from './app/containers/AppContainer'

const loggerMiddleware = createLogger({ predicate: (getState,action) => __DEV__ });

function configureStore (initialState) {
 const enhancer = pose(
      applyMiddleware(
         thunkMiddleware,
         loggerMiddleware,
      ),
     );
  return createStore(reducer, initialState, enhancer);
 }

const store = configureStore({});



const App = () => (
  <Provider store={store}>
    <AppContainer />
  </Provider>
)

AppRegistry.registerComponent('Appetizing', () => App);

and this is my AppContainer.js file:

 import React, { Component } from 'react'
 import ReactNative from 'react-native'
 const {
   View,
   Text,
 } = ReactNative

class AppContainer extends Component{

render(){
  return <View>
    <Text style={{marginTop: 20}}>
    I am app container
    </Text>
  </View>
  } 

 } 


export default AppContainer

i'm using React Native for building an Android App

I'm trying to import a ponent in index.android.js file from the folder located in app/containers/AppContainer.js.

When i run the code i got thi error:

Element type is invalid: expected a string (for built-in ponents) or a class/function (for posite ponents) but got: undefined. Check the render method of App

this is my index.android.js file:

import React, { Component } from 'react';

import {  createStore,Provider, applyMiddleware, bineReduxers, pose } from 'redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';


import {  AppRegistry } from 'react-native';
import { expect,assert } from 'chai';

import reducer from './app/reducers';
import AppContainer from './app/containers/AppContainer'

const loggerMiddleware = createLogger({ predicate: (getState,action) => __DEV__ });

function configureStore (initialState) {
 const enhancer = pose(
      applyMiddleware(
         thunkMiddleware,
         loggerMiddleware,
      ),
     );
  return createStore(reducer, initialState, enhancer);
 }

const store = configureStore({});



const App = () => (
  <Provider store={store}>
    <AppContainer />
  </Provider>
)

AppRegistry.registerComponent('Appetizing', () => App);

and this is my AppContainer.js file:

 import React, { Component } from 'react'
 import ReactNative from 'react-native'
 const {
   View,
   Text,
 } = ReactNative

class AppContainer extends Component{

render(){
  return <View>
    <Text style={{marginTop: 20}}>
    I am app container
    </Text>
  </View>
  } 

 } 


export default AppContainer

• javascript
• android
• react-native
• redux

• Have you tried import {AppContainer} from './app/containers/AppContainer' ? – G0dsquad Commented Dec 30, 2016 at 11:53
• @G0dsquad yes , not works. i got the same error. – userfi Commented Dec 30, 2016 at 12:02
• Your code actually works fine for me if I include the ponent and render it in a standard view e.g. home.js (rather than index.android.js). – G0dsquad Commented Dec 30, 2016 at 12:11

4 Answers 4

Your problem is in this line:

import { createStore,Provider, applyMiddleware, bineReduxers, pose } from 'redux';

The way named imports work in ES6 is that if the name does not exist, it simply is initialized as undefined, and so when trying to render <Provider>, react plains.

The Provider that you are looking for is inside the react-redux package, which you have to install in addition to redux. Your code should look like this:

import {  createStore, applyMiddleware, bineReduxers, pose } from 'redux';
import {Provider} from 'react-redux';

Try updating your App to this.

const App = React.createClass({
  render: function() {
    return (
      <Provider store={store}>
        <AppContainer />
      </Provider>
    )
  }
});

Try Following in AppContainer.js.

import React, { Component } from 'react'
 import ReactNative from 'react-native'
 const {
   View,
   Text,
 } = ReactNative

export default class AppContainer extends Component{

render(){
  return <View>
    <Text style={{marginTop: 20}}>
    I am app container
    </Text>
  </View>
  } 

 } 

the problem is here: import ReactNative from 'react-native' const { View, Text, } = ReactNative

for better undetstanding, you can imagine module from 'react-native' like an object with one 'magic' key - default { default: ReactNative View: ... Text: ... }

es6 imports, and in this case - react native bundler, resolves import ReactNative from 'react-native' with accessing to default property, not whole module

and then you try to access default.View which isnt possible, cause ReactNative class dont have it

instead, you should use syntax import ReactNative, {View, Text} from 'react-native' if you want to access exported non-default properties of module