CODEWITHSUNDEEP
reactjsreact-nativeroutesreact-native-router-flux
PremKumar
PremKumar

Reputation: 1354

Using Routing in react-native

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>

Upvotes: 2

Views: 612

Answers (2)

Ahsan Ali
Ahsan Ali

Reputation: 5135

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;

Upvotes: 1

Val
Val

Reputation: 22807

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} />

Upvotes: 1

Related Questions