React Native Navigator Not Working - react-native

Question

I've been struggling with Navigator in React Native Web for a good 2 days now and can't figure out what the problem is. It is worth noting that before attempting to use the Navigator, everything was working fine, and this code is running on a browser. I have the following code below and keep getting the error message:
"bundle.js:784 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of Home."
Followed by:
"bundle.js:640 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of Home."
Basically, I have a component called "Home" and I am trying to renderScene using the Navigator fairly deeply nested in this component but it isn't working. I have used this same Navigator code on another app and it worked, minus a few changes in the props passed. Any help would be greatly appreciated!
const React = require('react-native-web')
const {
Text,
View,
StyleSheet,
Image,
Navigator,
TouchableHighlight,
Component
} = React;
var Home = React.createClass({
renderScene(route, navigator) {
if(route.name == 'Baseball') {
return <Baseball navigator={navigator} {...route.passProps} />
}
if(route.name == 'Football') {
return <Football navigator={navigator} {...route.passProps} />
}
},
render() {
return (
<View>
<View>
<Image
style={styles.homeImage}
source={require('./img/baseball.png')}>
<View style={styles.tagLineWrapper}>
<Text style={styles.tagLine}>
Real Sports.
</Text>
<Text style={styles.tagLine}>
Real Skill.
</Text>
<Text style={styles.tagLine}>
Real Prizes.
</Text>
</View>
</Image>
</View>
<View style = {styles.appStoreBar}>
<Text style={styles.darkText}>
Available Now!
</Text>
<View style={styles.appStoreButton}>
<Image
style={styles.button}
source={require('./img/app-store-button-yellow.png')}
/>
</View>
</View>
<Text style = {styles.instructionsHeader}>
How Pick a Play Works
</Text>
<View style = {styles.doubleIphoneWrapper}>
<View style = {styles.singleIphoneWrapper}>
<Text style = {styles.instructionsSubHeaderText}>
1. Pick a Contest
</Text>
<View style={styles.instructionsWrapper}>
<Text style={styles.instructions}>
Pick 5, 6, or 7 correctly and win the amount shown on the right.
</Text>
</View>
<View style={styles.iphoneAndChevronWrapper}>
<Image
style={styles.chevronIcons}
source={require('./img/chevron-left.png')}
/>
<View style={styles.iphoneAndScreenWrapper}>
<Image
style={styles.iphone}
source={require('./img/iphone5-vertical.png')} >
<Navigator
initialRoute={{name: 'Baseball'}}
renderScene={this.renderScene} />
</Image>
</View>
<Image
style={styles.chevronIcons}
source={require('./img/chevron-right.png')}
/>
</View>
</View>
<View style = {styles.singleIphoneWrapper}>
<Text style = {styles.instructionsSubHeaderText}>
1. Pick a Game
</Text>
<View style={styles.instructionsWrapper}>
<Text style={styles.instructions}>
Make sure it’s a game you are available to watch in real time.
</Text>
</View>
<View style={styles.iphoneAndChevronWrapper}>
<Image
style={styles.chevronIcons}
source={require('./img/chevron-left.png')}
/>
<Image
style={styles.iphone}
source={require('./img/iphone5-vertical.png')}>
</Image>
<Image
style={styles.chevronIcons}
source={require('./img/chevron-right.png')}
/>
</View>
</View>
</View>
</View>
)
}
})
var Baseball = React.createClass({
_navigate(name) {
this.props.navigator.push({
name: 'Football',
passProps: {
name: name
}
})
},
render() {
return (
<View style={[styles.screenView, {backgroundColor: 'blue'}]}>
</View>
)
}
})
var Football = React.createClass({
_navigate(name) {
this.props.navigator.push({
name: 'Baseball',
passProps: {
name: name
}
})
},
render() {
return (
<View style={[styles.screenView, {backgroundColor: 'green'}]}>
</View>
)
}
})
const styles = StyleSheet.create({
homeText: {
color: '#1C1C1C',
fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif'
},
homeImage: {
maxHeight: 350,
flex: 0
},
tagLineWrapper: {
alignSelf: 'flex-end',
marginRight: 200,
marginTop: 220
},
tagLine: {
fontSize: 20,
fontStyle: 'italic',
color: 'white',
alignSelf: 'flex-start',
marginTop: 10,
fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif'
},
instructionsHeader: {
fontSize: 27,
fontWeight: 'bold',
marginTop: 40,
color: '#1C1C1C',
alignSelf: 'center'
},
doubleIphoneWrapper: {
flexDirection: 'row',
justifyContent: 'center'
},
singleIphoneWrapper: {
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
margin: 40
},
instructionsSubHeaderText: {
fontSize: 18,
color: '#1C1C1C',
marginTop: 60,
alignSelf: 'center'
},
instructionsWrapper: {
width: 194,
height: 64,
alignSelf: 'center'
},
instructions: {
fontSize: 13,
padding: 20,
textAlign: "center"
},
appStoreBar: {
alignSelf: 'stretch',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
padding: 30,
backgroundColor: '#ededed'
},
darkText: {
fontSize: 24,
color: '#1C1C1C',
marginRight: 10
},
appStoreButton: {
width: 200,
marginLeft: 10
},
iphone: {
width: 300,
margin: 30
},
chevronIcons: {
height: 30,
alignSelf: 'center',
margin: 0
},
iphoneAndChevronWrapper: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center'
},
screenView: {
height: 338,
width: 192,
alignSelf: 'center',
marginTop: 100,
},
iphoneAndScreenWrapper: {
justifyContent: 'center',
alignItems: 'center',
}
})
module.exports = Home;

Answer 1

This might be late, but you should know that React Native Navigator does not work with React Native Web. But I guess there are some alternative solutions though. I don't remember at the top of my head at the moment.