How to set multi line header in react native?
up vote
1
down vote
favorite
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
react-native
asked Nov 8 at 16:51
benda
466
add a comment |
up vote
1
down vote
favorite
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
react-native
asked Nov 8 at 16:51
benda
466
Do you meanheaderTitleinstead oftitle?
– Pritish Vaidya
Nov 8 at 16:56
Yes. I want my header title to be a multi line title
– benda
Nov 8 at 16:59
1
I meant that you should try replacingtitlewithheaderTitle
– Pritish Vaidya
Nov 8 at 17:00
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
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
react-native
asked Nov 8 at 16:51
benda
466
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
react-native
react-native
asked Nov 8 at 16:51
benda
466
asked Nov 8 at 16:51
benda
466
asked Nov 8 at 16:51
benda
466
asked Nov 8 at 16:51
benda
466
asked Nov 8 at 16:51
benda
466
466
Do you meanheaderTitleinstead oftitle?
– Pritish Vaidya
Nov 8 at 16:56
Yes. I want my header title to be a multi line title
– benda
Nov 8 at 16:59
1
I meant that you should try replacingtitlewithheaderTitle
– Pritish Vaidya
Nov 8 at 17:00
add a comment |
Do you meanheaderTitleinstead oftitle?
– Pritish Vaidya
Nov 8 at 16:56
Yes. I want my header title to be a multi line title
– benda
Nov 8 at 16:59
1
I meant that you should try replacingtitlewithheaderTitle
– Pritish Vaidya
Nov 8 at 17:00
Do you mean
headerTitle instead of title?– Pritish Vaidya
Nov 8 at 16:56
Do you mean
headerTitle instead of title?– Pritish Vaidya
Nov 8 at 16:56
Yes. I want my header title to be a multi line title
– benda
Nov 8 at 16:59
Yes. I want my header title to be a multi line title
– benda
Nov 8 at 16:59
1
1
I meant that you should try replacing
title with headerTitle– Pritish Vaidya
Nov 8 at 17:00
I meant that you should try replacing
title with headerTitle– Pritish Vaidya
Nov 8 at 17:00
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
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>
)
}
}
answered Nov 8 at 17:05
Pritish Vaidya
11.6k21338
1
Thanks! it works
– benda
Nov 8 at 17:08
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
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>
)
}
}
answered Nov 8 at 17:05
Pritish Vaidya
11.6k21338
1
Thanks! it works
– benda
Nov 8 at 17:08
add a comment |
up vote
1
down vote
accepted
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>
)
}
}
answered Nov 8 at 17:05
Pritish Vaidya
11.6k21338
1
Thanks! it works
– benda
Nov 8 at 17:08
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
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>
)
}
}
answered Nov 8 at 17:05
Pritish Vaidya
11.6k21338
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>
)
}
}
answered Nov 8 at 17:05
Pritish Vaidya
11.6k21338
answered Nov 8 at 17:05
Pritish Vaidya
11.6k21338
answered Nov 8 at 17:05
Pritish Vaidya
11.6k21338
answered Nov 8 at 17:05
Pritish Vaidya
11.6k21338
11.6k21338
1
Thanks! it works
– benda
Nov 8 at 17:08
add a comment |
1
Thanks! it works
– benda
Nov 8 at 17:08
1
1
Thanks! it works
– benda
Nov 8 at 17:08
Thanks! it works
– benda
Nov 8 at 17:08
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53212475%2fhow-to-set-multi-line-header-in-react-native%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Do you mean
headerTitleinstead oftitle?– Pritish Vaidya
Nov 8 at 16:56
Yes. I want my header title to be a multi line title
– benda
Nov 8 at 16:59
1
I meant that you should try replacing
titlewithheaderTitle– Pritish Vaidya
Nov 8 at 17:00