How to navigate from a component class in React Native - react-native

Question

I want to simply navigate from Home Screen to Creator Screen. I can easily navigate between them if i place the link directly in my Home Class, but I have created a Cards component class for all my creators, now I can't navigate from my Cards Class. Any idea how? The code in below is not working. I got error said that Can't find variable: navigation.
my Home scree screenshot
Any one would help? Big thanks.
I tired to make my Cards Class like this, but then my imageUri became a new problem. So i removed it, the current Cards Class is in below.
const Cards = ({navigation}) => (
<View style={{padding: 30, flexDirection: 'row', borderBottomColor: '#6a6a6a', borderBottomWidth: 0.4}}>
<View>
<Image source={this.props.imageUri} style={styles.profileIcon} />
<Image source={images.broShakeLogo} style={styles.broShakeLogo} />
</View>
<View style={{paddingLeft: 40, flexDirection: 'column'}}>
.....
<TouchableOpacity
onPress={() => navigation.navigate('creator')} >
.....
);
Here's my stack navigator
const HomeStack = createStackNavigator ({
home: {
screen: HomeScreen,
},
creator: {
screen: CreatorScreen
},
},
{
headerMode: 'none'
});
And here's my Home Class
class Home extends Component {
return (
<View style={styles.container}>
<ScrollView>
<View style={styles.welcomContainer}>
{/* so this one in here actually works fine but i want them wrap inside my Cards Class */}
<TouchableOpacity onPress={() => this.props.navigation.navigate('creator')}>
<CT.ReadmoreText/>
</TouchableOpacity>
</View>
<Cards imageUri={require('../assets/images/cprofile_2.jpg')} distance="30" navigation={this.props.navigation}/>
<Cards imageUri={require('../assets/images/cprofile_1.jpg')} distance="34" />
<Cards imageUri={require('../assets/images/cprofile_1.jpg')} distance="20" />
<Cards imageUri={require('../assets/images/cprofile_3.jpg')} distance="10" />
</ScrollView>
</View>
);
}
}
export default Home;
Here's my Cards class
class Cards extends Component {
render() {
<View style={styles.container}>
<View style={{padding: 30, flexDirection: 'row', borderBottomColor: '#6a6a6a', borderBottomWidth: 0.4}}>
<View>
<Image source={this.props.imageUri} style={styles.profileIcon} />
<Image source={images.broShakeLogo} style={styles.broShakeLogo} />
</View>
<View style={{paddingLeft: 40, flexDirection: 'column'}}>
<Icon name="location-arrow" type="FontAwesome"
style={{ color: "#00d278" ,fontSize: 18 }} >
<Text style={styles.distanceText}> {this.props.distance} m</Text>
</Icon>
<Text style={styles.locationText}>Atomica</Text>
<Text style={styles.cityText}>MELBOURNE</Text>
<View style={{paddingTop: 18}}>
<TouchableOpacity
onPress={() => navigation.navigate('creator')}
>
<CT.ReadmoreText/>
</TouchableOpacity>
</View>
</View>
</View>
</View>
);
}
}

Answer 1

Your can try this
import {withNavigation} from 'react-navigation'
class Home extends React.Component{
return (
<View style={styles.container}>
<ScrollView>
<View style={styles.welcomContainer}>
{/* so this one in here actually works fine but i want them wrap inside my
Cards Class */}
<TouchableOpacity onPress={() =>
this.props.navigation.navigate('creator')}>
<CT.ReadmoreText/>
</TouchableOpacity>
</View>
<Cards imageUri={require('../assets/images/cprofile_2.jpg')} distance="30"
/>
<Cards imageUri={require('../assets/images/cprofile_1.jpg')} distance="34"
/>
<Cards imageUri={require('../assets/images/cprofile_1.jpg')} distance="20"
/>
<Cards imageUri={require('../assets/images/cprofile_3.jpg')} distance="10"
/>
</ScrollView>
</View>
);
}
}
export default withNavigation(Home);
const Cards = () => (
<View style={{padding: 30, flexDirection: 'row', borderBottomColor: '#6a6a6a',
borderBottomWidth: 0.4}}>
<View>
<Image source={this.props.imageUri} style={styles.profileIcon} />
<Image source={images.broShakeLogo} style={styles.broShakeLogo} />
</View>
<View style={{paddingLeft: 40, flexDirection: 'column'}}>
.....
<TouchableOpacity
onPress={() => this.props.navigation.navigate('creator')} >
.....
);

Answer 2

You have passed navigation as props,
<Cards imageUri={require('../assets/images/cprofile_2.jpg')} distance="30" navigation={this.props.navigation}/>
So, you need to use it as this.props.navigation.navigate('....');
but you have used it as navigation.navigate('....');
change it and it will work.