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







share|improve this question






















  • 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






  • 1




    I meant that you should try replacing title with headerTitle
    – Pritish Vaidya
    Nov 8 at 17:00















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







share|improve this question






















  • 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






  • 1




    I meant that you should try replacing title with headerTitle
    – Pritish Vaidya
    Nov 8 at 17:00













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







share|improve this question













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






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 8 at 16:51









benda

466




466












  • 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






  • 1




    I meant that you should try replacing title with headerTitle
    – Pritish Vaidya
    Nov 8 at 17:00


















  • 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






  • 1




    I meant that you should try replacing title with headerTitle
    – 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












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>

    )

  }

}





share|improve this answer

















  • 1




    Thanks! it works
    – benda
    Nov 8 at 17:08











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














 

draft saved


draft discarded


















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

























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>

    )

  }

}





share|improve this answer

















  • 1




    Thanks! it works
    – benda
    Nov 8 at 17:08















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>

    )

  }

}





share|improve this answer

















  • 1




    Thanks! it works
    – benda
    Nov 8 at 17:08













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>

    )

  }

}





share|improve this answer












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>

    )

  }

}






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 8 at 17:05









Pritish Vaidya

11.6k21338




11.6k21338








  • 1




    Thanks! it works
    – benda
    Nov 8 at 17:08














  • 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


















 

draft saved


draft discarded



















































 


draft saved


draft discarded














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





















































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







-

Popular posts from this blog

how to define a CAPL function taking a sysvar argument

Image
up vote 0 down vote favorite In Vector CANoe, is it possible to define a function that takes a system variable argument like the system function TestWaitForSignalMatch() ? For my use case it is not sufficient to supply the current value of the system variable because I want to pass the system variable to TestWaitForSignalMatch() or similar system functions. The CANoe help seems to show examples: long TestWaitForSignalMatch (Signal aSignal, float aCompareValue, dword aTimeout); // form 1 long TestWaitForSignalMatch (sysvar aSysVar, float aCompareValue, dword aTimeout); // form 3 I tried like this void foo(sysvar aSysvar) {} ^ or this void foo(sysvar *aSysvar) {} ^ but I get a parse error at the marked position of the sysvar keyword in both cases. I successfully created functions that take a...
Read more

How do I alter this code to allow abstract classes or interfaces to work over identical auto generated...

Image
up vote 0 down vote favorite Explanation I use the xsd.exe tool to generate a class API based upon an XSD (defines a schema for XML files) from which to interact with XML files. This tool works well, but this issue is that I have a few schemas which are by-and-large identical with small tweaks, so I want to create interfaces or abstract classes that allow me to reuse code elsewhere. In my example below I've simplified the generated code for purposes of sharing it here but the principle still holds. Example Non-Functioning Code Program.cs public static void Main() { BaseColor baseColor = new Color1 { ColorDescription = "Red" }; BaseShape baseShape = new Shape1 { Content = baseColor }; } Models.cs //Auto generated models - I have no control over these but they are partial classes //First s...
Read more

Augusta Treverorum

Image
Treveris ist eine Weiterleitung auf diesen Artikel. Zum abgegangenen Gebäude in Trier ähnlichen Namens siehe Katholisches Vereinshaus Treviris. Stadtplan Triers in der römischen Kaiserzeit Augusta Treverorum (lateinisch für „Stadt des Augustus im Land der Treverer“) war eine römische Stadt an der Mosel, aus der das heutige Trier hervorgegangen ist. Der Zeitpunkt der Stadtgründung wird angesetzt zwischen dem Bau der ersten Trierer Römerbrücke (18/17 v. Chr.) und der späten Regierungszeit des Augustus († 14 n. Chr.). In der Kaiserzeit bildete Trier den Hauptort der civitas der Treverer, in dem mehrere zehntausend Menschen lebten, und gehörte zur Provinz Gallia Belgica . Besondere Bedeutung erlangte das römische Trier in der Spätantike, als zwischen dem späten 3. und dem ausgehenden 4. Jahrhundert mehrere Herrscher, darunter Konstantin der Große, die Stadt als eine der westlichen Kaiserresidenzen nutzten, wovon Monumentalbauten wie die Kaiserthermen oder die Konstantinbasi...
Read more