onPress Navigation not navigating - react-native

Question

I've added the StackNavigator into the application via another separate AppNavigator.js file. Despite this the app still doesn't navigate but does however compile. The button is clickable but has no action.
Different versions of Expo and React-Native along with different Navigation plugins.
Here is a copy of the AppNavigator.js
import { StackNavigator } from 'react-navigation';
import Timer from './Timer';
import Main from './Main';
import Splash from './Splash';
const AppNavigator = StackNavigator({
Timer: {
screen: Timer
},
Splash: {
screen: Splash
},
Main: {
screen: Main
}
})
export default AppNavigator;
And here is my package.json
{
"name": "app",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-native-scripts": "1.13.1",
"jest-expo": "26.0.0",
"react-test-renderer": "16.3.0-alpha.1"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"expo": "26.0.0",
"react": "16.3.0-alpha.1",
"lodash": "^4.17.4",
"react-native": "0.54.0",
"react-navigation": "1.2.1",
"#builderx/tab-view": "^0.1.5",
"#builderx/icons": "^0.1.5",
"#builderx/utils": "^0.1.6",
"#builderx/react-native-swiper": "^0.1.5"
}
}
Here is also a copy of the Button responsible for navigation:
import React, { Component } from "react";
import { Center } from "#builderx/utils";
import Button13 from "../symbols/button13";
import Button5 from "../symbols/button5";
import { createAppContainer } from 'react-navigation';
import { View, StyleSheet, Text, Image } from "react-native";
export default class Timer extends Component {
render() {
return (
<View style={styles.root}>
<Button13 style={styles.button13} />
<Center horizontal>
<Button5
style={styles.button5}
onPress={() => {
alert("hello");
this.props.navigation.navigate("Main");
}}
/>
</Center>
<Center horizontal>
<Image
source={require("../assets/capture.jpg")}
style={styles.image}
/>
</Center>
<View style={styles.rect}>
<Text style={styles.text}>[Meditation Name]</Text>
<Text style={styles.text2}>00:00</Text>
</View>
</View>
);
}
}

Answer 1

First .
Don's use StackNavigator , is deprecated, use createStackNavigator from React-navigation 3.0 instead
Second
Please show the button code, you should call something like this.props.navigation.navigate('Main')

Answer 2

the button doesn't have access to the navigation props and you can't have onPress to a custom component. add the code below to the button file then add it to the button like this then just call this.props.navigation.navigate("Main"); on the nested button of that component
import { withNavigation } from 'react-navigation';
export default withNavigation(Button5)