CODEWITHSUNDEEP
javascriptreact-nativeex-navigation
john doe
john doe

Reputation: 816

Pass dynamic title to route in ex-navigation used in react native

I am using a single component for handling multiple tasks(say, Bring the food/Clean the room).I pass task title as props to the component and it renders accordingly.This component will be called with different props multiple times.I am using ex-navigation to render my navigation bar in my task component as follows:

    static route = {
      navigationBar: {
        backgroundColor: '#0096ff',
        tintColor: '#fff',
        title: 'Clean' //Need to do make this dynamic based on props value
      }
    }

Now I want title to be dynamic and be using value from the props (title:this.props.title). Now since this is a static variable, how can I use props value (which only comes after constructor is initialised) in the static routes variable to make my title dynamic based on props passed to the component.

Upvotes: 2

Views: 821

Answers (2)

Vinod Reddy
Vinod Reddy

Reputation: 81

title property within navigationBar can be a function receiving params as an argument like so

title(params) {
        return `Greeting for ${params.name}`;
      },

check https://github.com/exponent/ex-navigation#passing-params-to-a-route for more way of doing it

Upvotes: 2

Fran Rios
Fran Rios

Reputation: 821

If you are using redux and you have configured ex-navigator to work with it, you should have navigator as a prop. When you push your main route you can pass the title that you want:

this.props.navigator.push(Router.getRoute('MainRoute', {title: 'WhateverYouWant'}))

As it is your main route and you will reuse it, you can update the title udateCurrentRouteParams().

     this.props.navigator.updateCurrentRouteParams({
      title: 'NewTitle',
    })

Upvotes: 0

Related Questions