CODEWITHSUNDEEP
react-nativereact-navigation
Jonas
Jonas

Reputation: 355

React-Navigation: Dynamic Title in TabNavigator. Undefined in not an object

I'm just getting started with React Navigation and TabNavigator.

I have 2 Tabs: ChannelScreen & ListScreen. When I click on one of the Channels in the ListScreen the Title of ChannelScreen is supposed to be replaced.

ChannelScreen:

export default class ChannelScreen extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    title: `${navigation.state.params.title}`,
  })

ListScreen:

export default class ListScreen extends Component {
  handlePress = (channelKey, channelName) => {
    console.log('change channel', channelKey, channelName)
    this.props.navigation.navigate('ChannelScreen', { title: channelName });
  }
render() {
    return(
    <View style={styles.container}>
    <TouchableOpacity
    style={styles.channelCard}
    onPress={() => {
        this.handlePress('01','Channel 1')
      }}
    >
       <Text>Channel 1</Text>
    </TouchableOpacity>
    </View>
    )
  }
}

(I simplified my code a litte - hope I didn't mess anything up)

If I pass the params in my StackNavigator, everything works fine. Though when I try to pass on the Title through the TabNavigator, I get this Error:

Undefined in not an object (evaluating 'navigation.state.params.title')

I also tried setParams- I don't get it to work in the TabNavigator either. Do you have any pointers or suggestions for me?

Upvotes: 2

Views: 821

Answers (1)

Rizal Sidik
Rizal Sidik

Reputation: 989

it happens because the params is not set from first render, so you need to add conditional rendering to do that,i have tried your code, and got this solution, you can try to change your ChannelScreen to be like this :

export default class ChannelScreen extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    title: navigation.state.params ? `${navigation.state.params.title}` : 'Default Title in Here',
  })

i hope it can help you, please notice me if you have an error thanks :)

Upvotes: 3

Related Questions