Nativebase: Subtitle fontSize in Header not working

Created on 5 May 2017 · 7Comments · Source: GeekyAnts/NativeBase

Seems like the fontSize set in native-base-theme/components/Header.js isn't being passed down to the Subtitle component in Headers. I also tried ejecting the Theme files again.

React-Native v0.44
Native-Base v2.1.3

screen shot 2017-05-05 at 2 34 48 pm

bug

Source

fhadsheikh

All 7 comments

Seems like the whole subtitle style is not working in my case,
same issue as #675

    "native-base": "2.1.3",
    "react": "16.0.0-alpha.6",
    "react-native": "0.43.4",

Tae69 on 6 May 2017

@fhad-getmaple

<Header hasSubtitle>
   <Left>
        <Button transparent>
           <Icon name='arrow-back' />
         </Button>
   </Left>
   <Body>
        <Title>Title</Title>
        <Subtitle style={{fontSize: 20, color: 'red'}}>Subtitle</Subtitle>
   </Body>
    <Right />
</Header>

try the above code will work for you.

GeekRishabh on 8 May 2017

Hi @GeekRishabh,

Thanks for the work around. Do you have any word if the bug itself will be fixed in an update?

Thanks.

fhadsheikh on 8 May 2017

package.json

    "native-base": "^2.1.4",
    "react": "16.0.0-alpha.6",
    "react-native": "^0.44.0",

This works fine, with default components, without inline style

screen shot 2017-06-01 at 4 52 04 pm

SupriyaKalghatgi on 1 Jun 2017

Subtitle doesn't seem to work. Here is my package.json

"react": "16.2.0",
"react-native": "0.52.2",
"native-base": "^2.3.7"

It doesn't seemed to be displaying anything.

I see a definition for Title, but not for Subtitle (t with a lower case). But I see SubTitle, but if I use that I get the following error.

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a 
class/function (for composite components) but got: undefined. You likely forgot to export your 
component from the file it's defined in, or you might have mixed up default and named imports.

Here is what I see in the definition -

screen shot 2018-03-18 at 5 42 02 pm

screen shot 2018-03-18 at 5 43 17 pm

I'm using it exactly the way it says in the example in the docs. Something like this -

<Container>
  <Header>
    <Left>
      <Button transparent>
        <Icon name='arrow-back' />
      </Button>
    </Left>
    <Body>
      <Title>Title</Title>
      <Subtitle>Subtitle</Subtitle>
    </Body>
    <Right />
  </Header>
</Container>

EDIT: I tried adding hasTabs and hasSubtitle. It didn't work. Here is what I see in the definition for Header

screen shot 2018-03-18 at 5 49 54 pm