CODEWITHSUNDEEP
androidiosreact-nativereact-native-router-flux
Eric Chan
Eric Chan

Reputation: 1222

how to make right button in navigation bar using react-native-router-flux?

I am tring to make right button on navigation bar using react-native-router-flux.

My code is

import React from 'React';
import { TouchableHighlight } from 'react-native';
import { Scene, Router, Actions } from 'react-native-router-flux';
...
const filterIcon = () => (
<TouchableHighlight onPress={()=>} style={{...}}>
<Icon name="filter" size={30}/>
</TouchableHighlight>
);
const MainRounter=()=>(
<Router>
<Scene
key="main"
component={mainPage}
initial={true}
renderRightButton={()=>filterIcon}
/>
</Router>
);

But I can't show right button on navigation bar. How can I make it?

Upvotes: 1

Views: 17700

Answers (6)

Mehul Patel
Mehul Patel

Reputation: 23053

Update for 2021:

This will remove the deprecation warning.

HomePage.navigationOptions = () => {
  return {
    headerRight: () => (
      <TouchableOpacity onPress={() => navigation.navigate('Create')}>
        <Feather name="plus" size={30} />
      </TouchableOpacity>
    )  };
};

Here Feather is a library to show icons in the application, it is available in Expo.

You can use this library by importing it like below.

import { Feather } from '@expo/vector-icons'

Upvotes: 1

Sunil Patel
Sunil Patel

Reputation: 265

RNRF4 I tried this code working fine

   <Scene 
         key="SignUp" 
         component={SignUp} 
         title="SignUp"
         onRight={()=>{}} 
         rightTitle={' Save'} />

//SignUp Component

export default class SignUp extends Component {
    componentWillMount() {
        this.props.navigation.setParams({
            'onRight': this.handleIconTouch
        })
    }

    handleIconTouch() {
        debugger;
    }

    render() {
        return ();
    }
}

Upvotes: 4

EnriqueDev
EnriqueDev

Reputation: 1247

UPDATE - 18 Oct 2017

With the last releases the methods described below have stopped working, again. So, my last solution for this is:

class MyAwesomeClass extends React.Component {


   componentWillMount() {
        Actions.refresh({ right: this._renderRightButton });
   }

   _renderRightButton = () => {
        return(
            <TouchableOpacity onPress={() => this._handleIconTouch() } >
                <Icon name="check" size={26} color='grey' />
            </TouchableOpacity>
        );
    };

    _handleIconTouch = () => {
        console.log('Touched!');
    }

}

UPDATE - 07 Aug 2017

As RNRF4 uses now ReactNavigation as navigation solution, the above solution stopped working. To make it work again I using the ReactNavigation API directly. This is my solution:

class MyAwesomeClass extends React.Component {
    static navigationOptions = ({ navigation }) => {
        headerRight: <TouchableIcon size={22} name="search" onPress={() =>    
                        navigation.state.params.handleIconTouch()} />,
    }

    componentWillMount() {
        this.props.navigation.setParams({ handleIconTouch: 
              this.handleIconTouch });

    }

    handleIconTouch = () => {
        console.log('Touched!');
    }

}

In navigationOptions the general navigation info is accesed in a class-level. As the context is static its impossible to access our Component methods and their params. To make it work a little workaround is needed.

So, first you need to define the function which will handle your touch, in this case handleIconTouch. In here you should define the action your button will perform when it's pressed. As this function is not static you can access props and state from here which gives you more functionality and options.

Then, in your componentWillMount() method, add the method to the navigation params with setParams() to be available in the static context of navigationOptions. As this method is not static either, you can pass any required params to your button here.

And finally, using the params, define your button inside navigationOptions/headerRight key using the component that suits you the most.

ORIGINAL I recommend you this approach:

  1. Create a method with your desired logic and images, for example:

    renderRightButton = () => {
    return(
        <TouchableOpacity onPress={() => null } >
            <Icon name="check" size={26} color='grey' />
        </TouchableOpacity>
    );
};

  2. In your componentWillMount() method add at the beginning:

    Actions.refresh({ renderRightButton: this.renderRightButton });

  3. Ready to go!

Tell me if you have any doubts.

Upvotes: 6

Kakashi
Kakashi

Reputation: 553

For RNRF4. Thank you Jacse.

import React from 'react';
import { View, Button, Alert } from 'react-native';

class MyScreen extends React.Component {
    static navigationOptions = ({ navigation }) => {
      const { params = {} } = navigation.state;
      return {
        headerRight: <Button title="Save" onPress={() => params.handleSave()} />
      };
    };

    _saveDetails() {
      Alert.alert('clicked save');
    }

    componentDidMount() {
      this.props.navigation.setParams({ handleSave: this._saveDetails });
    }

    render() {
      return (
        <View />
      );
    }
}
export default MyScreen;

Upvotes: 4

corasan
corasan

Reputation: 2754

You can use the onRight, rightTitle or rightButtonImage to add the right button to the navBar.

const MainRounter = return (
    <Router>
        <Scene
            key="main"
            component={mainPage}
            initial={true}
            onRight={ ()=> whatever you want to do }
            rightButtonImage={require('path/to/your/icon')}
        />
    </Router>
);

Let me know if it worked :)

Upvotes: 12

user2601376
user2601376

Reputation:

you should create a custom navBar take a look at this issue in github custom navBar

Upvotes: 0

Related Questions