Search code examples
reactjsreact-nativereact-native-router-fluxexpo

"props should be defined" but how?


I am new to react and react native.

I am trying to set up a simple app, using this tutorial

https://github.com/aksonov/react-native-router-flux/blob/master/docs/MINI_TUTORIAL.md

I have set up my app with this command

create-react-native-app my-project

I start the app and see it in expo on my phone.

Then

npm i react-native-router-flux --save

I replace the contents of App.js with all the code from that tutorial. I also create the required PageOne.js and PageTwo.js.

I then get an immediate error on my phone.

[react-native-router-flux] props should be defined

assert c:\my path...\react-native-router-flux\src\Util.js@34:10

How do I define these props? What do I need to do to get this working?

Extras!

The code is exactly as in that tutorial,

App.js

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

import PageOne from './PageOne';
import PageTwo from './PageTwo';

export default class App extends Component {
  render() {
    return (
      <Router>
        <Scene key="root">
          <Scene key="pageOne" component={PageOne} title="PageOne" initial={true} />
          <Scene key="pageTwo" component={PageTwo} title="PageTwo" />
        </Scene>
      </Router>
    )
  }
}

PageOne.js

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

export default class PageOne extends Component {
  render() {
    return (
      <View style={{margin: 128}}>
        <Text onPress={Actions.pageTwo}>This is PageOne! </Text>
      </View>
    )
  }
}

PageTwo.js

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

export default class PageTwo extends Component {
  render() {
    return (
      <View style={{margin: 128}}>
        <Text onPress={Actions.pageOne}>This is PageTwo!</Text>
      </View>
    )
  }
}

Solution

  • I don't really have a conclusive answer. Perhaps just being new to a lot of different moving parts had caused something to get out of line.

    I updated some magic numbers in package.json and app.json according to the upgrade table on this page

    https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md

    and things started to work again.

    I suppose that some of my thrashing around installing various react things had gotten the installed versions out of step. Perhaps if I really understood the ecosystem it would seem clear to me but it feels like a bunch of string and bailing wire at the moment!