Using Routing in react-native - reactjs

Question

I have button as mentioned below and I have an another page named JobDetails on the same folder in the project. When I click on the button "next" i need to display that JobDetails page. I have added onButtonPress with alert function and it works fine. I'm not sure on how to bring the next page on clicking the button using routing.
onButtonPress(){
alert("Prem")
}
<TouchableOpacity onPress={this.onButtonPress.bind(this)} style={styles.buttonStyle} >
<Text style={styles.nextPage}>
Next
</Text>
</TouchableOpacity>

Answer 1

It's very simple for react-native-router-flux, just do:
import { Actions } from 'react-native-router-flux';
onButtonPress(){
Actions.JobDetails();
}
Make sure your Scene key is correct (JobDetails in your case).
<Scene key="JobDetails" component={JobDetails} />

Answer 2

You can achieve this using Stack Navigator from react-navigation
Installation:
npm install --save react-navigation
Example:
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { StackNavigator } from 'react-navigation';
class MyHomeScreen extends React.Component {
static navigationOptions = {
title: 'Home'
}
onButtonPress(){
this.props.navigation.navigate('JobDetails'); // navigate to JobDetails screen!
}
render() {
return (
<TouchableOpacity onPress={this.onButtonPress.bind(this)} style={styles.buttonStyle} >
<Text style={styles.nextPage}>
Next
</Text>
</TouchableOpacity>
);
}
}
class JobDetailsScreen extends React.Component {
static navigationOptions = {
title: 'Job Details'
}
render() {
return (
<View>
<Text>I'm job screen!</Text>
</View>
);
}
}
const ModalStack = StackNavigator({
Home: {
screen: MyHomeScreen
},
JobDetails: {
screen: JobDetailsScreen
}
});
export default ModalStack;