React Native Router Flux - expected a component class, got [object Object]

Question

I am getting component class got object error while using react-native-router-flux, Here is my index.js file and component files. I am facing component object error but if i use the component directly as tag it is working well.

index.js

import React from 'react';
import { Router ,Scene } from 'react-native-router-flux';
import GreenScreen from './GreenScreen';
import GrayScreen from './GrayScreen';

const App = () => {
  return (
    <Router>
      <Scene key="root">
        <Scene key="green" component="{ GreenScreen }" title="Green Screen" initial/>
        <Scene key="gray" component="{ GrayScreen }" title="Green Screen"/>
      </Scene>
    </Router>
  );
}

export default App;

GreenScreen.js

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

const GreenScreen = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.welcome} onPress={ () => Actions.gray()}>
        Hello This is Green Screen !
        Click to Go to Gray Screen !
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#33691E',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: '#ffffff',
  }
});

export default GreenScreen;

GrayScreen.js

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

const GrayScreen = () => {
    return (
        <View style={ styles.container }>
            <Text style={ styles.welcome } onPress={() => Actions.green()}>
             Hello This is Gray Screen !
             Click here to Move to Green Screen
            </Text>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
       backgroundColor: '#607D8B',
    },
    welcome: {
       fontSize: 20,
       textAlign: 'center',
       margin: 10,
       color: '#ffffff',
    }
});

export default GrayScreen;

Thanks for help!

Can you post your `GrayScreen.js` file code? – Jeffrey Rajan Jun 10 '17 at 12:24 — Jeffrey Rajan, Jun 10 '17 at 12:24
@JeffreyRajan I have added code for GrayScreen.js – Sandy Jun 11 '17 at 08:54 — Sandy, Jun 11 '17 at 08:54

score 2 · Answer 1 · answered Jun 11 '17 at 12:08

Found the issue were is, you have passed String to component in Scenes instead of component. Change the following code in index.js

<Scene key="green" component="{ GreenScreen }" title="Green Screen" initial/>
<Scene key="gray" component="{ GrayScreen }" title="Green Screen"/>

to this

<Scene key="green" component={ GreenScreen } title="Green Screen" initial/>
<Scene key="gray" component={ GrayScreen } title="Green Screen"/>

React Native Router Flux - expected a component class, got [object Object]

1 Answers1