React Native Router Flux

Question

I am new to react native, and trying to build an app to practise. I have arrived to the routing part, but it is not working properly. I have now three components. The app, the router and one called game.

I have this in the routing:

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

const RouterComponent = () => {
   return (
       <Router>
           <Scene key="root">
               <Scene
                   key="game"
                   component={GameComponent}
                   title="New Game"
               />
           </Scene>
        </Router>
    );
 }
export default RouterComponent;

And this in the app:

import { Actions } from 'react-native-router-flux';

export default class App extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text>Basketball App</Text>
                <Button
                     onPress={() => Actions.game()}
                     title="New Game">
                </Button>
            </View>
        );
    }

But i receive the following error message: undefined is not a function. What am I missing?

Thanks a lot in advance

Answer 1

You also need to define the Home Screen in your Router

Import your GameComponent

import GameComponent from './game';

Create your Router

const RouterComponent = () => {
     return (
       <Router>
           <Scene key="root">
               <Scene key="home" component={Home} title="Home" />
               <Scene key="game" component={GameComponent} title="New Game" />
           </Scene>
        </Router>
      );
}

Create your Home Screen

class Home extends Component {
  render() {
    return (
      <View style={{flex:1}}>
          <Text>Basketball App</Text>
          <Button
               onPress={() => Actions.game() }
               title="New Game">
          </Button>
      </View>
    );
  }
}

Main App

export default class App extends React.Component {
    render() {
        return (
            <RouterComponent />
        );
    }
}