React Native (in iOS): undefined is not an object (evaluating '_navigationStore2.default.router.getStateForAction')

[baldeweb]

Versions

• react version: 16.3.1
• react-native-router-flux ^v4.0.0-beta.28
• react-native v0.55.2

I'm trying to make an action button (my button is a TouchableOpacity), when the user touche in the Login Button, it open a new Screen XPTO

But my onPress, on the Login is getting an error, like in this screenshot:

My project structure is like this:

Follow my codes:

index.js (root)

import { AppRegistry } from 'react-native';
import App from './src/Login';

AppRegistry.registerComponent('XPTO', () => App);

index.js (.src/)

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

import { Login } from './Login';
import { SearchProduct } from './SearchProduct';
import { DetailProduct } from './DetailProduct';

export default class App extends React.Component {
    render (){
        return (
            <Router>
                <Stack key="root">
                    <Scene 
                        key="login"
                        component={ Login }
                        title="Login"
                        hidenavbar
                        initial />
                    <Scene 
                        key="search_product"
                        component={ SearchProduct }
                        title="Login"
                        hidenavbar />
                    <Scene 
                        key="detail_product"
                        component={ DetailProduct }
                        title="Login"
                        hidenavbar />
                </Stack>
            </Router>
        );
    }
}

Login.js (.src/Login)

import React from 'react';
import { StyleSheet, Text, View, StatusBar, Button, Image, TouchableOpacity, Alert, TextInput, ImageBackground } from 'react-native';
import { Router, Stack, Scene, Actions } from 'react-native-router-flux';

export default class Login extends React.Component {
  render() {    
    return (  
      <View style={Style.container}>
       <StatusBar
        backgroundColor="#212121"
        barStyle="light-content" />
     
        <ImageBackground source={require('../imgs/etc/img_login_bg.png')} style={{width: null, height: null, flex: 1, alignSelf: 'stretch'}}>
          <View style={Style.baseLogin} >
            <Image source={require('../imgs/logos/logo_img.png')} style={Style.imgLogo} />
            <TextInput style={Style.inputFields} placeholder={'Usuário'} placeholderTextColor={'#9E9E9E'}/>
            <TextInput style={Style.inputFields} placeholder={'Senha'} placeholderTextColor={'#9E9E9E'}/>
            <TouchableOpacity style={Style.btnLogin} onPress={() => Actions.push('search_product')} activeOpacity={0.8}>
              <Text style={Style.txtBtnLogin}>LOGIN</Text>
            </TouchableOpacity>
          </View>
        </ImageBackground>
        
      </View>
    );    
  }
}

[Blapi]

Downgrade to RNRF .27 and try Actions.search_product() instead please

[baldeweb]

@Blapi it does not work for me

[Blapi]

Can you show your package.json please?

[baldeweb]

{
  "name": "XPTO",
  "version": "0.1.0-ALPHA",
  "private": true,
  "devDependencies": {
    "babel-preset-react-native-stage-0": "^1.0.1",
    "jest": "^22.4.3",
    "jest-react-native": "^18.0.0",
    "react-test-renderer": "16.3.1"
  },
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "test": "jest"
  },
  "jest": {
    "preset": "react-native"
  },
  "dependencies": {
    "react": "16.3.1",
    "react-native": "~0.55.2",
    "react-native-layout-provider": "^1.2.1",
    "react-native-router-flux": "^4.0.0-beta.27",
    "react-navigation": "^1.5.12",
    "recyclerlistview": "^1.3.4",
    "watchman": "^1.0.0"
  }
}

[Blapi]

As I was expecting.. you should have a look at this https://docs.npmjs.com/files/package.json#dependencies

Then, after you had a look and clearly understand this part, do the following steps :

• Replace "react-native-router-flux": "^4.0.0-beta.27" by "react-native-router-flux": "4.0.0-beta.27"
• rm -rf node_modules
• rm yarn.lock
• yarn cache clean
• yarn install
• re-run / re-install

[baldeweb]

@Blapi Still not working :(

[Blapi]

Try removing the {} in

import { Login } from './Login';
import { SearchProduct } from './SearchProduct';
import { DetailProduct } from './DetailProduct';

[baldeweb]

@Blapi Hahaha nothing... I'm almost losing my hope in this...

[Blapi]

Check the version of RNRF in node_modules, it should be .27 and .27 isn't supposed to break.
Check that the imports are correct where you create the Router
Show me how you navigate through your app. Also, is it breaking only when you press on the TouchableOpacity ?

[baldeweb]

Check the version of RNRF in node_modules, it should be .27 and .27 isn't supposed to break.

• Yes, it's in 4.0.0-beta.27

Check that the imports are correct where you create the Router

• Yes, they are correct

Show me how you navigate through your app. Also, is it breaking only when you press on the TouchableOpacity ?

• Yes, it only breaks when I tap the TouchableOpacity. I trying to navigate from Login to SearchProduct (next Screen that I created),

[Blapi]

<TouchableOpacity style={Style.btnLogin} onPress={() => Actions.push('search_product')} activeOpacity={0.8}>

Is it still this ?

[baldeweb]

Yes, But I also tried to change to ...onPress={() => Actions.search_product()}... but the error is still here

[Blapi]

What is you SearchProduct Component ? Is it the same behavior when you navigate to any other screen?

[Blapi]

Also, it is hideNavBar and not hidenavbar, but it should not fix your issue

[baldeweb]

The code of my SearchProduct:

import React from 'react';
import { StyleSheet, Text, View, StatusBar, Button, Image, TouchableOpacity, Alert, TextInput, ImageBackground } from 'react-native';

export default class SearchProduct extends React.Component {
  render() {
    return (      
      <View style={Style.container}>
       <StatusBar
        backgroundColor="#212121"
        barStyle="light-content" />

        {/* CAMPO DE LOGIN */}        
        <ImageBackground source={require('../imgs/etc/busca_bg.png')} style={{width: '100%', height: '100%'}}>
          <View style={Style.baseSearch} >
            <View style={Style.baseLogos}>
                <Image source={require('../imgs/logos/logo_img.png')} style={Style.imgLogo} />
                <Image source={require('../imgs/logos/logo_cent_peq.png')} style={Style.imgLogo} />
            </View>

            <TextInput style={Style.inputSearch} placeholder={'Código do produto'} placeholderTextColor={'#9E9E9E'} multiline={false} numberOfLines={1}/>
            <TouchableOpacity style={Style.btnSearch} onPress={onSearch} activeOpacity={0.8}>
              <Text style={Style.txtBtnSearch}>BUSCAR</Text>
            </TouchableOpacity>
          </View>
        </ImageBackground>

      </View>
    );
  }
}

[baldeweb]

What is you SearchProduct Component ? Is it the same behavior when you navigate to any other screen?

• I'm only trying to make the action in Login -> SearchProduct, the other screen there's not an action button

Also, it is hideNavBar and not hidenavbar, but it should not fix your issue

• I changed this too, but nothing

[Blapi]

Oh, I just realized you had the react-navigation dependency in your package.json, could you remove it please and retry with a fresh install ?

[baldeweb]

I removed, and... Same thing :/

[daviscabral]

@baldeweb please try this:

watchman watch-del-all
yarn cache clean --force
npm cache clean --force # optional - in case you also have used npm
rm -rf node_modules/
rm yarn.lock
rm package-lock.json # optional - in case you also have used npm
rm -rf $TMPDIR/metro-*
rm -rf $TMPDIR/haste-*
yarn 
yarn start --reset-cache

This will make sure you are not with any wrong dependency being loaded there.

[daviscabral]

Just in time, also update to the most recent version with a few updates related to the react-navigation (4.0.0-beta.31).

[aksonov]

Closed due inactivity.