Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can't change title #133

Open
dnish opened this issue May 13, 2016 · 7 comments
Open

Can't change title #133

dnish opened this issue May 13, 2016 · 7 comments

Comments

@dnish
Copy link

dnish commented May 13, 2016

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
Copy link
Author

dnish commented May 13, 2016

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

@charpeni
Copy link
Contributor

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

PRs are welcome :)

@dnish
Copy link
Author

dnish commented May 30, 2016

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

@charpeni charpeni removed the Question label May 30, 2016
@charpeni
Copy link
Contributor

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

@dnish
Copy link
Author

dnish commented May 30, 2016

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
Copy link
Contributor

Oh cool.

Related to #122.

@dnish
Copy link
Author

dnish commented May 31, 2016

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants