React router jumps over desired target screen

Question

I'm new to react and routing. I have a home page with a video thumbnail, when the thumbnail is clicked I want the app to route straight to the video page, however, it involuntarily jumps to Home -> Video -> Profile. Thus I have to click the back button to end on the screen that I want.

Demonstration below:

Clearly I am not understanding routing properly, here is my router.js The Auth key stack is for login registration and that works as intended. The Main key stack is where my issues persist

render() {
    if (!this.state.isReady)
        return <Splash/>

    return (
        <Router>
            <Scene key="root" hideNavBar
                    navigationBarStyle={{backgroundColor: "#fff"}}
                    titleStyle={navTitleStyle}
                    backButtonTintColor={color.black}
            >
                <Stack key="Auth" initial={!this.state.isLoggedIn}>
                    <Scene key="Welcome" component={Welcome} title="" initial={true} hideNavBar/>
                    <Scene key="Register" component={Register} title="Register" back/>
                    <Scene key="CompleteProfile" component={CompleteProfile} title="Select Username" back={false}/>
                    <Scene key="Login" component={Login} title="Login"/>
                    <Scene key="ForgotPassword" component={ForgotPassword} title="Forgot Password"/>
                </Stack>
                <Stack key="Main" initial={this.state.isLoggedIn}>
                    <Scene key="Home" component={Home} title="Home" initial={true} type={ActionConst.REPLACE}/>
                    <Scene key="Video" component={Video} title="Video"/>
                    <Scene key="Profile" component={Profile} title="Profile"/>
                </Stack>
            </Scene>
        </Router>
    )
}

On my home page, I have a TouchableHighlight with an onPress function that runs: Actions.Video() to try and move to the Video page. But as you can see it skips right over that page to the Profile page. On my video page, I do have a Button element with an onPress action of Actions.Profile() (which is where I end up after clicking the touchable highlight) but that should only be triggered when I click that grey 'Account' button right?

Edit: Adding Video.js component:

import React, { Component } from 'react';
var { 
    View, 
    StyleSheet, 
    Alert, 
    Platform,
    Text,
    ScrollView,
    TouchableOpacity,
    PixelRatio,
    Dimensions,
    Image,
    TouchableHighlight,
    Linking,
    StatusBar } = require('react-native');

import { Button } from 'react-native-elements'
import {Actions} from 'react-native-router-flux';
import {connect} from 'react-redux';

import styles from "./styles"

import { actions as auth, theme } from "../../../auth/index"
const { video } = auth;

const { color } = theme;

//import YouTube, { YouTubeStandaloneIOS, YouTubeStandaloneAndroid } from 'react-native-youtube';

class Video extends Component {
    static navigationOptions = ({ navigation }) => {
        return {
            title: 'Video',
            headerStyle: { 
            backgroundColor: '#232323',
            borderBottomWidth: 0,
            },
            headerTitleStyle: { 
                color: 'white',
            },
        } 
    }
    state = {
      isReady: false,
      status: null,
      quality: null,
      error: null,
      isPlaying: true,
      isLooping: true,
      duration: 0,
      currentTime: 0,
      fullscreen: false,
      containerMounted: false,
      containerWidth: null,
    };
    onButtonPress = () => {
      //this.props.navigation.navigate('SpotifyLogin')
    }
  render() {
    const { navigate } = this.props.navigation;
    return (
      <ScrollView
        style={styles.container}
        onLayout={({ nativeEvent: { layout: { width } } }) => {
          if (!this.state.containerMounted) this.setState({ containerMounted: true });
          if (this.state.containerWidth !== width) this.setState({ containerWidth: width });
        }}
      >        
        <View style={styles.videoMetaContainer}>
            <Text style={styles.videoMetaTitle}>Louis the Child - Better Not (Lyrics) feat. Wafia</Text>
        </View>
        <View style={styles.watchYTBtnContainer}>
        <Button 
          onPress={Actions.Profile()}
          title='Account'
        >
        </Button>

        </View>
        <View style={styles.recentViewerList}>
        <ScrollView
            horizontal={true}
        >
            <View style={styles.recentViewer}></View>
            <View style={styles.recentViewer}></View>
        </ScrollView>
        </View>


      </ScrollView>
    );
  }
}

export default connect(null, {})(Video);

Answer 1

   <Button 
      onPress={Actions.Profile()}
      title='Account'
    >

The onPress prop should be a function. In this case you have declared a function call, which gets executed as soon as the component renders.

You should declare it as onPress={() => Actions.Profile()} or onPress={Actions.Profile} so that the function is only called when the onPress event is triggered.