Trouble with Stack Navigator - react-native

Question

I am new to react native. I tried using the createStackNavigator module. However, I do not know why my onClick function is not directing me to the required screen. Here are my codes are shown below:
mySpaceRouter.js
import {createStackNavigator} from 'react-navigation'
import SubscriptionScreen from './subscribed'
import MySpaceScreenRT from './myspace'
import React, {Component} from 'react'
const RootStack = createStackNavigator(
{
MySpace : MySpaceScreenRT,
subscribed : SubscriptionScreen,
navigationOptions:{
header:{ visible:false }
}
},
{
initialRouteName : 'MySpace',
},
)
class MySpaceScreen extends Component{
render(){
return(
<RootStack />
)
}
}
export default MySpaceScreen;
mySpace.js
import React, { Component } from 'react'
import { StyleSheet, Text, View, ScrollView, TouchableOpacity } from 'react-native'
import { Avatar, Button, Icon } from 'react-native-elements'
import MyButton from '../Button'
class MySpaceScreenRT extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.header}>
<View style={styles.textHolder}>
<Text style={styles.headerText}>My Space</Text>
</View>
</View>
<View style={styles.boxContainer} >
<ScrollView style={styles.scrollContainer}>
<View style={styles.profileContainer}>
<Avatar
large
rounded
title="CR"
onClick={() =>this.props.navigation.navigate('subscribed')}
activeOpacity={0.7}
/>
<Text style={styles.profileName}>Christaino Ronaldo </Text>
</View>
<MyButton text='Subscribed' icon='ios-play' />
<MyButton text='Downloads' icon='ios-folder-open' onPress ={() => console.log('Works!')} />
<MyButton text='History' icon='ios-timer-outline' />
<MyButton text='Rate Our App' icon='ios-star-half' />
</ScrollView>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'column',
flex: 1,
},
header: {
height: 70,
backgroundColor: '#780c1c',
elevation: 5,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center'
},
boxContainer: {
flex: 1,
flexDirection: 'column',
},
textHolder: {
},
headerText: {
fontSize: 20,
color: 'white'
},
profileContainer: {
height: 150,
borderColor : '#696969',
borderBottomWidth: 0.5,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'transparent',
},
profileName: {
position: 'relative',
zIndex: 1,
fontSize: 16,
color: '#000000',
alignSelf: 'center',
marginTop: 10,
marginLeft: 10
},
scrollContainer: {
flexDirection: 'column',
},
icons: {
marginTop: 10
},
Text: {
fontSize: 18,
alignSelf: 'center',
padding: 10
}
})
export default MySpaceScreenRT;
subscribed.js
import React, {Component} from 'react'
import {StyleSheet, Text, View} from 'react-native'
class SubscriptionScreen extends Component {
render(){
return(
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>SubscriptionScreen!</Text>
</View>
)
}
}
export default SubscriptionScreen;
Thank you.

Answer 1

With react-native you use onPress() not onClick().
onPress={() =>this.props.navigation.navigate('subscribed')}

Answer 2

For each screen in the stack you have to create an entry so you should do something like this:
const RootStack = createStackNavigator({
MySpace: {
screen: MySpace,
navigationOptions: ({ navigation }) => ({
title: "My Space" ,
header:{ visible:false }
}),
},
subscribed: {
screen: SubscriptionScreen,
navigationOptions: ({ navigation }) => ({
title: "" ,
header:{ visible:false }
}),
}
},{
initialRouteName : 'MySpace',
})
in addition to that you have to change onClick to onPress