React-native-router-flux: native router flux custom back button

[pk2004]

Version

Tell us which versions you are using:

• react-native-router-flux v3.?.?
• react-native v0.?.?

Expected behaviour

Actual behaviour

Steps to reproduce

1.
2.
3.

[Amurmurmur]

This has been asked here so many times:
My personal choice is to use custom Back and right button components.

Simply go ahead and copy them from the react-native-router-flux src folder, and pass your new component as a prop when for example you create your scenes like so:

<Scene
   key="MyScene1"
   component={MySceneComponent}
   title="MyScene1"
   renderBackButton={() => 
            <LeftButton 
               leftButtonIcon={"arrow-back"} 
               onLeft={() => Actions.pop()} 
               leftButtonColor={"white"} 
               leftButtonIconSize={30} 
             />
   }
/>

You can do the above inside your Scene component/container component too like so, for example on component mount:

import {Actions} from 'react-native-router-flux'
import LeftButton from './leftbutton'

componentDidMount(){
Actions.refresh({renderBackButton: () => 
    <LeftButton 
     leftButtonIcon={"arrow-back"} 
     onLeft={() => Actions.pop()} leftButtonColor={"white"} 
     leftButtonIconSize={30} 
    />
})
}

And I simply use component inside my LeftButton component, that comes with 'react-native-vector-icons'

Hope this helps 👍

[pk2004]

Thank you.

[lucaslz2020]

I want to automatically get the title of the previous scene on the current scene and display the return title in the upper left corner of the current scene.

[Amurmurmur]

@lucasleelz Easy, just pass the title of the current scene to the next scene.
For example in your current scene of which you want to show the title of on the nextScene:
Actions.nextScene({title: this.props.title})

And in your nextScene (or whatever name you have), just use:

componentDidMount(){
Actions.refresh({backTitle: ()=> this.props.title})
}

Should do the job, obviously you can play around and have the title in the redux store if you use it, and or fire Actions.refresh in a different place for example when you get a response from the api or something.

Hope this helps, hit that thumbs up button 👍

[Hesamedin]

Thanks @Amurmurmur for your solusion. I am not able to find './leftbutton'. It is not in source folder of v3. Can you provide a link? thanks

[MilkBiscuit]

Did some modification based on @Amurmurmur 's answer because I don't have leftButton.js

Router.js
...

    <Scene
      key="customRepetition"
      component={CustomRepeatPicker}
      title="Custom"
      leftTitle="Back"
      onLeft={() => {
        console.log('is this one called?');
        Actions.pop();
      }}
    />

CustomRepeatPicker.js

class CustomRepeatPicker extends React.Component {
  componentDidMount() {
    Actions.refresh({
      onLeft: () => {
        console.log('it is overriden!');
      }
    });
  }

[shubhang93]

This has been asked here so many times:
My personal choice is to use custom Back and right button components.

Simply go ahead and copy them from the react-native-router-flux src folder, and pass your new component as a prop when for example you create your scenes like so:

<Scene
   key="MyScene1"
   component={MySceneComponent}
   title="MyScene1"
   renderBackButton={() => 
            <LeftButton 
               leftButtonIcon={"arrow-back"} 
               onLeft={() => Actions.pop()} 
               leftButtonColor={"white"} 
               leftButtonIconSize={30} 
             />
   }
/>

You can do the above inside your Scene component/container component too like so, for example on component mount:

import {Actions} from 'react-native-router-flux'
import LeftButton from './leftbutton'

componentDidMount(){
Actions.refresh({renderBackButton: () => 
    <LeftButton 
     leftButtonIcon={"arrow-back"} 
     onLeft={() => Actions.pop()} leftButtonColor={"white"} 
     leftButtonIconSize={30} 
    />
})
}

And I simply use component inside my LeftButton component, that comes with 'react-native-vector-icons'

Hope this helps 👍

You Might want to wrap it in a setTimeout