App.tsx

interface Props {
    navigation: NavigationScreenProp<any, any>;
}

class Home extends React.Component<Props> {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: "space-around", alignItems: "center" }}>
                <Text style={{ fontSize: 48, fontWeight: "bold" }}>Home Screen</Text>
                <Button title="Profile" onPress={() => this.props.navigation.navigate("Profile")} />
                <Button title="Settings" onPress={() => this.props.navigation.navigate("Settings")} />
            </View>
        )
    }
}

class Profile extends React.Component<Props> {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: "space-around", alignItems: "center" }}>
                <Text style={{ fontSize: 48, fontWeight: "bold" }}>Profile Screen</Text>
                <Button title="Home" onPress={() => this.props.navigation.navigate("Home")} />
                <Button title="Settings" onPress={() => this.props.navigation.navigate("Settings")} />
            </View>
        )
    }
}

class Settings extends React.Component<Props> {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: "space-around", alignItems: "center" }}>
                <Text style={{ fontSize: 48, fontWeight: "bold" }}>Settings Screen</Text>
                <Button title="Home" onPress={() => this.props.navigation.navigate("Home")} />
                <Button title="Profile" onPress={() => this.props.navigation.navigate("Profile")} />
            </View>
        )
    }
}