Search code examples
react-nativereact-native-router-flux

How to set the title of the scene that's a child of a tab using react-native-router-flux


I've this route:

    export default props => (
        <Router>
            <Stack key="root" hideNavBar>
                <Tabs key='tabs'
                      tabs={true}
                      initial
                      tabBarStyle={{backgroundColor: THEME_NAVBAR_AND_TABBAR}}
                      showLabel={false}>
                    <Scene key='events' component={Events} title='Events' icon={TabIcon}/>

                </Tabs>
            </Stack>
        </Router>
    )

On my Events components, I've this:

 import React from 'react'
 import {View, Text, ScrollView, TouchableWithoutFeedback, 
 TouchableOpacity} from 'react-native'
 import {connect} from "react-redux"

 import style from './style'
 import {Actions} from "react-native-router-flux";

class Events extends React.Component {
constructor(props) {
    super(props)
    this.state = {
        loaded: false
    }
}
componentDidMount() {
    Actions.refresh({ title: 'xxxx' })
}
render() {
    return (
        <ScrollView style={style.scene}>

        </ScrollView>
    )
}
}

const mapStateToProps = state => (
{
    events: state.ContentReducer.events
}
)

export default connect(mapStateToProps,
{

})(Events)

But it's being ignored. Probably because the scene is a child of the Tabs. How to make this change ? (it must me inside the component - cannot be on the router)


Solution

  • After many research and trial/errors, I found a solution:

    this.props.navigation.setParams({
                title: 'xxxx'
            })