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);
<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.