CODEWITHSUNDEEP
javascriptandroidreact-nativeredux
userfi
userfi

Reputation: 165

React Native Component not working check render method of App

i'm using React Native for building an Android App

I'm trying to import a component 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 components) or a class/function (for composite components) 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, combineReduxers, compose } 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 = compose(
      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

Upvotes: 3

Views: 22224

Answers (4)

Murad Rogozhnikov
Murad Rogozhnikov

Reputation: 1

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

Upvotes: 0

martinarroyo
martinarroyo

Reputation: 9701

Your problem is in this line:

import { createStore,Provider, applyMiddleware, combineReduxers, compose } 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 complains.

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, combineReduxers, compose } from 'redux';
import {Provider} from 'react-redux';

Upvotes: 4

Santosh Sharma
Santosh Sharma

Reputation: 2248

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>
  } 

 }

Upvotes: 0

Ravi Theja
Ravi Theja

Reputation: 3401

Try updating your App to this.

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

Upvotes: 0

Related Questions