"react": "16.3.1",
"react-native": "~0.55.2",
"react-native-router-flux": "^4.0.0-beta.31"
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>
)
}
}
you need to import Actions as an object, like this:
import {Actions} from "react-native-router-flux";
Most helpful comment
you need to import Actions as an object, like this:
import {Actions} from "react-native-router-flux";