Can't change title

[dnish]

Hey,
I'm having an issue when I try to change the title of the header. For example my app component looks like this:

class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            headerName:'Erster Aufruf'
        };
    }






    componentDidMount() {
        setTimeout(() => {
            this.setState({headerName:'New title'});
        },5000);


    }


    componentWillUpdate() {
        alert('Will update');
    }
    render() {

        return (

        <Router
            firstRoute={{

            component:Dashboard,
            headerStyle: {backgroundColor: '#48cfad'},
            name:this.state.headerName
            }}
        />
        );
    }
}

After changing the state, componentWillUpdate fires but the title in the header still remains the same.

[dnish]

Even if I add an own Title component and try to set the props via this.props.setTitleProps, nothing changes.

[charpeni]

At this time, we can't easily update the title of the current route.

PRs are welcome :)

[dnish]

Yeah, I am using an own title component. This works without problems :)

[charpeni]

Can you share with us how you do that for further question? :)

[dnish]

Yeah, I'll post tomorrow the code here. In my case I am using a ScrollView slider and change the title if I've slided to the next component.

[charpeni]

Oh cool.

Related to #122.

[dnish]

Here's my answer:

index.js

     <View style={{flex:1}}>
            <Router
                firstRoute={{
                component:Dashboard,
                titleComponent:Title}}

            />

        </View>

title.js

export class Title extends React.Component {

constructor(props) {
    super(props);
}




render() {
    return (<View><Text>{this.props.name}</Text></View>);
 }
}

dashboard.js

export class Dashboard extends React.Component {

   constructor(props) {
    super(props);
  }


  componentDidMount() {

    //Here we change/set the title
    this.props.setTitleProps({name:'Latest post'});

 }


 render() {
   <View>...</View>
  }


}

So in this case we can easily set the title via property and change it whenever we want.