CODEWITHSUNDEEP
react-native
benda
benda

Reputation: 141

How to set multi line header in react native?

I try to add a multi line title to my header like this:

    Title
  Subtitle

I tried the code below. It doesn't work, I got an error "title must be string or null"

 static navigationOptions = ({ navigation }) => {
    return {
    title: 
    <View>
    <Text>{navigation.getParam('client') }</Text>
    <Text>{navigation.getParam('ref') }</Text>
    </View>,

I followed this issue on github https://github.com/react-navigation/react-navigation/issues/2430

Upvotes: 5

Views: 6558

Answers (1)

Pritish Vaidya
Pritish Vaidya

Reputation: 22189

You need to replace title with headerTitle in order to provide the Custom Component.

The title prop accepts string values whereas the headerTitle defaults to a Text component that displays the title.

Therefore use it as 

static navigationOptions = ({ navigation }) => {
  return {
    headerTitle: (
      <View>
        <Text>{navigation.getParam('client')}</Text>
        <Text>{navigation.getParam('ref')}</Text>
      </View>
    )
  }
}

Upvotes: 12

Related Questions