trigger react-native-router-flux from presentational components or passing react native router flux functions to components as props

Question

I am using react native router flux for my navigation in an app, I have container folder and a components folder in which I created a button component.

This is my Register.js file in the container folder, I also have a Verify.js file which only renders a 'hello world'

import React, { Component } from 'react';
import { View, Text, TextInput,StyleSheet} from 'react-native';
import {Actions} from 'react-native-router-flux';

import Button from '../../components/button/Button';

import styles from '../../styles/styles';


export default class Register extends Component{

    constructor(){
        super();

        this.onPressButton = this.onPressButton.bind(this);
    }

    onPressButton(){
        return ()=>Actions.verify();
    }

    render() {
        return (
            <View style={styles.global}>

                <View style={styles.registerContainer}>
                    <Text style={styles.registerText}>Input your mobile number</Text>
                </View>

                <View style={styles.inputRow}>
                    <TextInput keyboardType={'numeric'} underlineColorAndroid={'transparent'} style={styles.zipCode}/>
                    <TextInput multiline={true} underlineColorAndroid={'transparent'} style={styles.number}/>
                </View>
                <Button text="REGISTER" onPressButton={this.onPressButton}/>
            </View>
        );
    }
}

The Button component is below

import React,{Component,PropTypes} from 'react';
import {View,Text,TouchableHighlight,StyleSheet} from 'react-native';

export default class Button extends Component{
    static propTypes={
        text: PropTypes.string.isRequired,
        onPressButton: PropTypes.func.isRequired
    };

    render(){
        return(

            <TouchableHighlight onPress={this.props.onPressButton}>
                <View style={styles.btn}>
                    <Text style={styles.btn_text}>{this.props.text}</Text>
                </View>
            </TouchableHighlight>
        );
    }
}

Also, below is my abridged app file for routing, just to show the scenes That I want to route from and to.

<Scene key="root">

        <Scene key="register" title="Register" hideNavBar component={Register} />
        <Scene key="verify" title="Verify" hideNavBar component={Verify} />

/>

How do I pass my navigation function as a prop to the Button component so that the onPressButton triggers the navigation?

Teddy McZieuwa · Answer 1 · 2017-03-31T20:43:17.363

Wow! I really feel dumb for asking this question. I was unnecessarily over-thinking things. I did not even need to make an extra function. All i needed to do was pass an {Actions.verify} to the onPressButton prop and kept the proptype validation as a function in the presentational component. a second way was to return Actions.verify() in my onPressButton function instead of returning ()=>Actions.verify().

Below I removed the onPressButton function completely and just passed in {Actions.verify} where verify is the key passed to my component scene.

import React, { Component } from 'react';
import { View, Text, TextInput,StyleSheet} from 'react-native';
import {Actions} from 'react-native-router-flux';

import Button from '../../components/button/Button';

import styles from '../../styles/styles';


export default class Register extends Component{

    constructor(){
        super();
    }


    render() {
        return (
            <View style={styles.global}>

                <View style={styles.registerContainer}>
                    <Text style={styles.registerText}>Input your mobile number</Text>
                </View>

                <View style={styles.inputRow}>
                    <TextInput keyboardType={'numeric'} underlineColorAndroid={'transparent'} style={styles.zipCode}/>
                    <TextInput multiline={true} underlineColorAndroid={'transparent'} style={styles.number}/>
                </View>
                <Button text="REGISTER" onPressButton={Actions.verify}/>
            </View>
        );
    }
}

In the presentational document, the proptype validation remains thesame.

import React,{Component,PropTypes} from 'react';
import {View,Text,TouchableHighlight,StyleSheet} from 'react-native';

export default class Button extends Component{
    static propTypes={
        text: PropTypes.string.isRequired,
        onPressButton: PropTypes.func.isRequired
    };

    render(){
        return(

            <TouchableHighlight onPress={this.props.onPressButton}>
                <View style={styles.btn}>
                    <Text style={styles.btn_text}>{this.props.text}</Text>
                </View>
            </TouchableHighlight>
        );
    }
}

The second way

import React, { Component } from 'react';
import { View, Text, TextInput,StyleSheet} from 'react-native';
import {Actions} from 'react-native-router-flux';

import Button from '../../components/button/Button';

import styles from '../../styles/styles';


export default class Register extends Component{

    constructor(){
        super();

        this.onPressButton = this.onPressButton.bind(this);
    }

    onPressButton(){
        return Actions.verify();
    }

    render() {
        return (
            <View style={styles.global}>

                <View style={styles.registerContainer}>
                    <Text style={styles.registerText}>Input your mobile number</Text>
                </View>

                <View style={styles.inputRow}>
                    <TextInput keyboardType={'numeric'} underlineColorAndroid={'transparent'} style={styles.zipCode}/>
                    <TextInput multiline={true} underlineColorAndroid={'transparent'} style={styles.number}/>
                </View>
                <Button text="REGISTER" onPressButton={this.onPressButton}/>
            </View>
        );
    }
}

trigger react-native-router-flux from presentational components or passing react native router flux functions to components as props

1 Answers1