Nativebase: Text height auto not work

[emirdeliz]

Hello, people!

I have a problem with text height. When use:

import { Icon, View, Text } from 'native-base'

<View style={{flex: 1, flexDirection: 'row', alignItems: 'center'}}>
    <View style={{backgroundColor: 'powderblue'}}>
        <Icon style={ { fontSize: 12 } } name="ios-timer" />
    </View>
    <View style={{backgroundColor: 'skyblue', padding: 0}}>
        <Text style={ { fontSize: 10 }}>{ item.description }</Text>
    </View>
</View>

The align vertical not works.

I found the problem in code of Text.js

var type = {
    color: this.getContextForegroundColor(),
    fontSize: this.getTheme().fontSizeBase,
    lineHeight: this.getTheme().lineHeight, /* This is a problem */
    fontFamily: this.getTheme().fontFamily
}

The lineHeight fixed the height of Text

Is there another alternative to fix my problem?

[sankhadeeproy007]

Whenever you change fontSize in react-native, you have to adjust the lineHeight accordingly as well.

[emirdeliz]

When use the react-native Text does not exist spacing as shown in picture

[sankhadeeproy007]

That is because the lineHeight has been explicitly mentioned in native-base. So you have to set if you change the fontSize.

[emirdeliz]

Look my code now

<ListItem iconLeft>
    <View>
        <View style={{
            flex: 5,
            flexDirection: 'row',
            alignItems: 'center'
        }}>
            <Icon style={{
                fontSize: 13,
                backgroundColor: '#F03'
            }} name={ 'logo-usd' } />
            <Text style={{
                fontSize: 13,
                backgroundColor: '#FF1'
            }}>Test</Text>
        </View>
    </View>
</ListItem>

Same with fontSize not working

[sankhadeeproy007]

Please use lineHeight to adjust to your liking.

[emirdeliz]

But when content is dynamic and higher than lineHeight defined?

[emirdeliz]

This works fine!

<ListItem iconLeft>
   <View>
      <View style={{
          flex: 5,
          flexDirection: 'row',
          alignItems: 'center'
       }}>
            <Icon style={{
                 fontSize: 13,
                 backgroundColor: '#F03',
                 lineHeight: 15
            }} name={ 'logo-usd' } />
           <View>
              <Text style={{
                 fontSize: 13,
                 backgroundColor: '#FF1',
                 lineHeight: 15
                 }}>{ item.description }
             </Text>
         </View>
      </View>
   </View>
</ListItem>

With large content

Thanks @sankhadeeproy007

[rahulsapkal23]

try this
{
fontSize: 35,
lineHeight: 35 * 0.75,
paddingTop: 35 - (35 * 0.75), // <-- Add this
},

[lekeCoder]

@rahulsapkal23 your last code only increase line spacing not the fontsize. What esle can l do? I need to increase text size