<TouchableOpacity onPress={() => navigation.navigate('Baslica')}> doesn't navigate any screen - react-native

Question

I tried to give an onPress action to one of my custom button made with TouchableOpacity. It is supposed to navigate me to another screen. I did how exactly i did at other screens but this time it doesn't work and don't get any error as well. On the Navigation.js, when i give initialRouteName manually, screen appears, but when i click on the button, nothing happens.
Home Screen:
import React from "react";
import { StyleSheet, View, StatusBar, Image, ImageBackground, TouchableOpacity} from "react-native";
const HomeScreen = ({ navigation }) => {
return (
<View>
<TouchableOpacity onPress={() => navigation.navigate('Baslica')}>
<ImageBackground
source={require("../../assets/HomeScreen/baslicaButton.png")}
resizeMode="contain"
style={styles.baslicaButton}
imageStyle={styles.baslicaButton_imageStyle}
>
<Image
source={require("../../assets/HomeScreen/baslicaText.png")}
resizeMode="contain"
style={styles.baslicaText}
></Image>
</ImageBackground>
</TouchableOpacity>
</View>
);
}
export default HomeScreen;
Navigation JS:
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import IntroScreen from './src/screens/IntroScreen';
import HomeScreen from './src/screens/HomeScreen';
import BaslicaScreen from './src/screens/BaslicaScreen';
const navigator = createStackNavigator(
{
Intro: IntroScreen,
Home: HomeScreen,
Baslica: BaslicaScreen
},
{
initialRouteName: "Intro",
}
);
export default createAppContainer(navigator);

Answer 1

You need to wrap your components between AppContainer tags in your root component similar with below so that the navigation object become aware of the react-navigation context.
import AppContainer from './navigation'; // your navigation.js file
export default class RootApp extends React.Component {
...
render() {
return <AppContainer>
// the rest of your other components here
</AppContainer>
}
}

Answer 2

you Should use navigation param like this:
this.props.navigation.navigate("yourScreen", { ParamName: Valu });
Edit Your code like This:
import React from "react";
import { StyleSheet, View, StatusBar, Image, ImageBackground, TouchableOpacity} from "react-native";
const HomeScreen = ({ navigation }) => {
return (
<View>
<TouchableOpacity onPress={() =>
this.props.navigation.navigate('Baslica')}>
<ImageBackground
source={require("../../assets/HomeScreen/baslicaButton.png")}
resizeMode="contain"
style={styles.baslicaButton}
imageStyle={styles.baslicaButton_imageStyle}
>
<Image
source={require("../../assets/HomeScreen/baslicaText.png")}
resizeMode="contain"
style={styles.baslicaText}
></Image>
</ImageBackground>
</TouchableOpacity>
</View>
);
}
export default HomeScreen;
and Edit this code like that :
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import IntroScreen from './src/screens/IntroScreen';
import HomeScreen from './src/screens/HomeScreen';
import BaslicaScreen from './src/screens/BaslicaScreen';
const navigator = createStackNavigator(
{
Intro: {screen:IntroScreen},
Home: {screen:HomeScreen},
Baslica: {screen:BaslicaScreen},
},
{
initialRouteName: "Intro",
}
);
export default createAppContainer(navigator);