Error trying to install Flux Router

Question

I came across a very annoying error when trying to install Flux Router in my app6 folder some suggestion:

Note: I’ve already installed two libraries:

npm install --save Eslint-config-rallycoding npm install --save

React-Native-router-Flux

code: index.android.js

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { Router, Scene } from 'react-native-router-flux';

import Principal from './src/components/Principal';
import SobreJogo from './src/components/SobreJogo';
import OutrosJogos from './src/components/OutrosJogos';

export default class app extends Component {
  render() {
    return (
      <Router sceneStyle={{ paddingTop: 50 }}>
        <Scene key='principal' component={Principal} initil title="Cara ou coroa" />
        <Scene key='sobrejogo' component={SobreJogo} title="Sobre o Jogo" />
        <Scene key='outrosjogos' component={OutrosJogos} title="Outros Jogos" />
      </Router>
    );
  }
}

AppRegistry.registerComponent('app', () => app);

LEADING

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Image,
  TouchableHighlight
} from 'react-native';

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

const logo = require('../imgs/logo.png');
const btnJogar = require('../imgs/botao_jogar.png');
const btnSobreJogo = require('../imgs/sobre_jogo.png');
const btnOutrosJogos = require('../imgs/outros_jogos.png');

export default class Principal extends Component {
  render() {
    return (
      <View style={styles.cenaPrincipal}>

        <View style={styles.apresentacaoJogo}>
          <Image source={logo} />
          <Image source={btnJogar} />
        </View>

        <View style={styles.rodape}>
          <TouchableHighlight
            onPress={() => { Actions.sobrejogo(); }}
          >
            <Image source={btnSobreJogo} />
          </TouchableHighlight>

          <TouchableHighlight
            onPress={() => { Actions.outrosjogos(); }}
          >
            <Image source={btnOutrosJogos} />
          </TouchableHighlight>
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  cenaPrincipal: {
    flex: 1,
    backgroundColor: '#61BD8C'
  },
  apresentacaoJogo: {
    flex: 10,
    justifyContent: 'center',
    alignItems: 'center'
  },
  rodape: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between'
  }
});

GAME CODE

import React, { Component } from 'react';
import { Text } from 'react-native';

export default class SobreJogo extends Component {
    render() {
        return (
            <Text style={{ flex: 1, backgroundColor: '#61BD8C' }}>
                Aqui podem ser apresentadas informações sobre o jogo
            </Text>
        );
    }
}

CODE Othersgames

import React, { Component } from 'react';
import { Text } from 'react-native';

export default class OutrosJogos extends Component {
    render() {
        return (
            <Text style={{ flex: 1, backgroundColor: '#61BD8C' }}>
                Aqui podem ser apresentadas informações sobre outros jogos do desenvolvedor
            </Text>
        );
    }
}

DOWNLOAD CODE INTO GITHUB

Answer 1

Actually it is not a mistake of lib.

The new version of the router-Flux slightly modified the structure to mount its route system.

The good news is it’s very quiet to solve this problem.

Just encapsulate the Scene components inside another Scene without the Component attribute, see example below:

<Router>    
     <Scene key='app'>
          <Scene key='principal' component={Principal} title='Cara ou Coroa?' titleStyle={styles.nav} />
          <Scene key='sobrejogo' component={SobreJogo} title='Sobre o Jogo' titleStyle={styles.nav} />
         <Scene key='outrosjogos' component={OutrosJogos} title='Outros Jogos' titleStyle={styles.nav} />    
         <Scene key='resultado' component={Resultado} title='Resultado' titleStyle={styles.nav} />
    </Scene>
</Router>

I hope I’ve helped.

Att,

Júlio Falbo

Answer 2

This is a problem with the latest version of Flux Router. Uninstall and use the [email protected] version until they repair.