React-native-router-flux: undefined is not an object (evaluating '_reactNativeRouterFlux2.default.newScreen')

Created on 7 Jul 2018  路  1Comment  路  Source: aksonov/react-native-router-flux

Version

"react": "16.3.1",
"react-native": "~0.55.2",
"react-native-router-flux": "^4.0.0-beta.31"

Actual behaviour

I'm trying to get started with React Native. And right from the start I came across the problem. I can't figure out what I'm doing wrong. After click on <Text onPress={newScreen}>Test text press.</Text> i got an exception:

undefined is not an object (evaluating '_reactNativeRouterFlux2.default.newScreen')
newScreen
C:\React\OldApp\HomeScreen.js:8:40
touchableHandlePress
C:\React\OldApp\node_modules\react-native\LibrariesTextText.js:134:57
_performSideEffectsForTransition
C:\React\OldApp\node_modules\react-native\Libraries\ComponentsTouchableTouchable.js:744:34
_receiveSignal
C:\React\OldApp\node_modules\react-native\Libraries\ComponentsTouchableTouchable.js:662:44
touchableHandleResponderRelease
C:\React\OldApp\node_modules\react-native\Libraries\ComponentsTouchableTouchable.js:431:24

C:\React\OldApp\node_modules\react-native\LibrariesTextText.js:158:49
invokeGuardedCallback
C:\React\OldApp\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:39:15
invokeGuardedCallback
C:\React\OldApp\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:221:34
invokeGuardedCallbackAndCatchFirstError
C:\React\OldApp\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:245:48
executeDispatch
C:\React\OldApp\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:572:4
executeDispatchesInOrder
C:\React\OldApp\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:603:20
executeDispatchesAndRelease
C:\React\OldApp\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:761:29
executeDispatchesAndReleaseTopLevel
C:\React\OldApp\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:772:37
forEachAccumulated
C:\React\OldApp\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:740:16
runEventsInBatch
C:\React\OldApp\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:927:6
runExtractedEventsInBatch
C:\React\OldApp\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:952:19

C:\React\OldApp\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:2703:6
batchedUpdates
C:\React\OldApp\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:13724:16
batchedUpdates
C:\React\OldApp\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:2565:27
_receiveRootNodeIDEvent
C:\React\OldApp\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:2701:17
receiveTouches
C:\React\OldApp\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:2777:28
__callFunction
C:\React\OldApp\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:351:47

C:\React\OldApp\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:116:26
__guardSafe
C:\React\OldApp\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:314:6
callFunctionReturnFlushedQueue
C:\React\OldApp\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:115:17

App.js

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

import HomeScreen from './HomeScreen';
import NewScreen from './NewScreen';

export default class App extends React.Component {
  render() {
    return (
      <Router>
        <Scene key="root">
          <Scene key="homeScreen" component={HomeScreen} title="HomeScreen" initial={true} />
          <Scene key="newScreen" component={NewScreen} title="NewScreen" />
        </Scene>
      </Router>
    );
  }
}

HomeScreen.js

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

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

export default class HomeScreen extends React.Component {
    render() {
        const newScreen = () => Actions.newScreen(); 

      return (  
        <View style={styles.container}>
          <Text>Open up App.js to start working on your app!</Text>
          <Text>Changes you make will automatically reload.</Text>
          <Text>Shake your phone to open the developer menu.</Text>
          <Text onPress={newScreen}>Test text press.</Text>
        </View>
      );
    }
  }

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
  });

NewScreen.js

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

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

export default class NewScreen extends React.Component {
    render() {
        return (
            <View>
                <Text>New Screen text</Text>
            </View>
        )    
    }    
}

Most helpful comment

you need to import Actions as an object, like this:
import {Actions} from "react-native-router-flux";

>All comments

you need to import Actions as an object, like this:
import {Actions} from "react-native-router-flux";

Was this page helpful?
0 / 5 - 0 ratings

Related issues

booboothefool picture booboothefool  路  3Comments

VictorK1902 picture VictorK1902  路  3Comments

maphongba008 picture maphongba008  路  3Comments

rafaelcorreiapoli picture rafaelcorreiapoli  路  3Comments

sylvainbaronnet picture sylvainbaronnet  路  3Comments