I have been trying to implement react-navigation to my project to very little success.
Every time i import a screen to the navigator it comes up as "undefined".
I have tried loading just the screen to the top level and it seems to work but when i put it inside the navigation it returns to being undefined.
Heres my code:
index.js:
import React, { Component } from 'react';
import Root from './navigator/router';
//import Home from './screens/Home';
export class App extends Component {
render() {
return <Root />;
}
}
Home.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Slider,
Image,
ListView,
ScrollView,
TouchableOpacity
} from 'react-native';
import HeatingSliderComponent from '../components/HeatingSliderComponent';
export default class Home extends Component {
_onPressDial = () => {
this.props.navigation.navigate('DialScreen');
};
render() {
return (
<View style={styles.container}>
{/* Navigation bar */}
<View style={styles.navBarOuter}>
<View style={styles.navBarInner}>
{/* item 1 */}
<TouchableOpacity flex = {1}>
<Image
//style={styles.button}
source={require('../../images/menu_logout.png')}
/>
</TouchableOpacity>
{/* item 2 */}
<Image
flex = {3}
style = {{resizeMode: 'contain'}}
source={require('../../images/background_text.png')}
/>
{/* item 3 */}
<TouchableOpacity flex = {1}>
<Image
//style={styles.button}
source={require('../../images/menu_about.png')}
/>
</TouchableOpacity>
</View>
</View>
<View style = {styles.oneFlexGap}/>
{/* Main Dial Button */}
<View style={styles.dialButton}>
<TouchableOpacity onPress={this._onPressDial}>
<Image
//figure out how to make this work and maybe look into making a custom wheel of some kind.
//probably by writing in native android
style={styles.button}
source={require('../../images/menu_edit_4.png')}
/>
</TouchableOpacity>
</View>
{/*<View style = {styles.oneFlexGap}/>*/}
{/* Vertical Slider */}
{/*<View style = {styles.vertSliderContainer}>
<HeatingSliderComponent
step={1}
minimumValue={0}
maximumValue={100}
value={0}
/>
</View>*/}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 5,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
navBarInner: {
flex: 1,
flexDirection: 'row',
height: '5%',
width: '100%',
alignItems: 'center',
},
navBarOuter: {
flex: 2,
alignItems: 'center',
},
vertSliderContainer: {
flex: 2,
alignItems: 'center',
},
dialButton: {
flex: 2,
alignItems: 'center',
},
button: {
flex: 1
},
oneFlexGap: {
flex: 1
},
});
AppRegistry.registerComponent('Home', () => Home);
router.js:
import React from 'react';
import { StackNavigator } from 'react-navigation';
import DialScreen from '../screens/DialScreen';
import Home from '../screens/Home';
export const Root = StackNavigator({
HomeScreen: {
screen: Home,
},
DialScreen: {
screen: DialScreen,
navigationOptions: {
title: 'DialScreen',
},
},
});
I have tried a multitude of things to try and get it to work including making the project again in a new location.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
UPDATE: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
I am still facing these errors but now i am facing the error "Route 'HomeScreen' should declare a screen error.
With my last change i did this to the router.js
// import DialScreen from '../screens/DialScreen';
// import Home from '../screens/Home';
var DialScreen = require('../screens/DialScreen');
var Home = require('../screens/Home');
and then structured the objects like this
DialScreen: {
screen: DialScreen.DialScreen,
navigationOptions: {
title: 'DialScreen',
},
from these changes i seem to get this error instead.
Route 'DialScreen' should declare a screen. For example:
import MyScreen from './MyScreen';
...
DialScreen: {
screen: MyScreen,
}
<unknown>
C:\Users\Dell\Documents\DSMReact\node_modules\react-navigation\src\routers\validateRouteConfigMap.js:22:6
validateRouteConfigMap
C:\Users\Dell\Documents\DSMReact\node_modules\react-navigation\src\routers\validateRouteConfigMap.js:18:21
default
C:\Users\Dell\Documents\DSMReact\node_modules\react-navigation\src\routers\StackRouter.js:36:25
default
C:\Users\Dell\Documents\DSMReact\node_modules\react-navigation\src\navigators\StackNavigator.js:44:29
loadModuleImplementation
C:\Users\Dell\Documents\DSMReact\node_modules\react-native\packager\src\Resolver\polyfills\require.js:174:12
guardedLoadModule
C:\Users\Dell\Documents\DSMReact\node_modules\react-native\packager\src\Resolver\polyfills\require.js:119:45
_require
C:\Users\Dell\Documents\DSMReact\node_modules\react-native\packager\src\Resolver\polyfills\require.js:110:24
_accept
C:\Users\Dell\Documents\DSMReact\node_modules\react-native\packager\src\Resolver\polyfills\require.js:274:12
<unknown>
C:\Users\Dell\Documents\DSMReact\node_modules\react-native\Libraries\Utilities\HMRClient.js:121:27
onmessage
C:\Users\Dell\Documents\DSMReact\node_modules\react-native\Libraries\Utilities\HMRClient.js:101:26
dispatchEvent
C:\Users\Dell\Documents\DSMReact\node_modules\event-target-shim\lib\event-target.js:172:43
<unknown>
C:\Users\Dell\Documents\DSMReact\node_modules\react-native\Libraries\WebSocket\WebSocket.js:148:27
emit
C:\Users\Dell\Documents\DSMReact\node_modules\react-native\Libraries\EventEmitter\EventEmitter.js:182:12
__callFunction
C:\Users\Dell\Documents\DSMReact\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:245:47
<unknown>
C:\Users\Dell\Documents\DSMReact\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:101:26
__guard
C:\Users\Dell\Documents\DSMReact\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:213:6
callFunctionReturnFlushedQueue
C:\Users\Dell\Documents\DSMReact\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:100:17
<Root />
in the return statement rather than the<Home />
in theindex.js
file. Try that, let's see – Chiamaka Nwolisa Jun 27 '17 at 15:49<Root navigation={this.props.navigation}/>
– Chiamaka Nwolisa Jun 27 '17 at 15:55console.log
in the home render() to see if the navigation prop lives there – Chiamaka Nwolisa Jun 27 '17 at 16:09