There is spacing under text

Expo SDK
1

Please provide the following:

  1. SDK Version: 37
  2. Platforms(Android/iOS/web/all): iOS

Hi, Expo Team
I’m using SF Pro Text font now.
But there is spacing under Text.
How do I remove it?

IMG_0069.PNG
IMG_0069.PNG1242×2208 114 KB

2

Can you show some of the code and styles you’re using?

3

Hello,
Thanks for you reply
This is my code
<BoldText style={{fontSize: 32}}>携帯番号を入力

export function BoldText(props) {
return <Text {…props} style={[{ fontFamily: ‘sf-pro-bold’}, props.style]} />;
}

await Font.loadAsync({

      ...Ionicons.font,

      'sf-pro': require('../assets/fonts/SFProText-Regular.ttf'),

      'sf-pro-bold': require('../assets/fonts/SFProText-Bold.ttf'),

    });
4

This may have to do with your styling of the TextInput (if that is an input like I assume). Can you see if the spacing persists when it’s wrapped in a standard view?

5

The spacing only shows on iPhone 7 Plus.
There isn’t any spacing on iPhone x & iphone 5

How can I fix this?

6

This may be an issue specific to the custom font. Can you try seeing if the default font renders the unwanted spacing as well?

7

If I don’t specific any font, it works fine.
But if I set the fontFamily, there is spacing

8

IMG_0075.PNG
IMG_0075.PNG1125×2436 552 KB

As you can see, some characters are working.
But some characters have spacing under text

9

Why there is spacing when using custom font?
If I don’t set any font, it works fine.
What’s the problem?

10

I’m not entirely sure. I’m curious if it’s related to that specific custom font or any custom font. Can you try a different custom font and see if you’re getting the spacing?

11

Please check this link.
I followed this and change the ascender and descender, but the result is same.
How do I fix it?

12

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.