Vertical center custom font in React native iOS

Question

Using React Native with Expo. Having difficulties centering custom imported font, at iOS. Android rendering with no issues, the text is vertically centered perfectly. Using iOS it is slightly upper than the center.

(Native Font centering well on both emulators - Android and iOS).

Any ideas how this could be solved?

Code below:

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Font } from 'expo';

export default class  extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isReady: false
    };
  }

  async componentDidMount() {
    await Font.loadAsync({
      'KlavikaBold': require('./KlavikaBold.otf'),
    });
    this.setState({ isReady: true });
  }

  render() {
    if (!this.state.isReady) {
      return <Expo.AppLoading />;
      }
    return (
      <View style={styles.container}>
        <Text style={styles.content}>Home!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  content: {
    backgroundColor: 'green',
    color: 'white',
    padding: 10,
    textAlignVertical: 'center',
    fontFamily: 'KlavikaBold',
    fontSize: 20,
  }

})

could you please attach an image, how it looks like and how you would like to have it ? — Tim, Aug 09 '18 at 12:33

score 10 · Answer 1 · answered Feb 08 '19 at 11:16

10

Here's an easy solution that worked for me...

Download Font Tools for Xcode

In Terminal run $ ftxdumperfuser -t hhea -A d pathtoyourfont.ttf

Edit dumped pathtoyourfont.hhea.xml and set lineGap="0"

If lineGap was 200 and ascender="800", set ascender to the sum ot these two 1000

In Terminal run $ ftxdumperfuser -t hhea -A f pathtoyourfont.ttf

Done. Your new values are fused back the font file.

Repeat steps 4 and 5 until the rendering is OK. Do not change other values. Those should be OK.

Value that finally worked for me was ascender="1050". Try to change the sum until Android and iOS render the component the same height.

Source: https://medium.com/@martin_adamko/consistent-font-line-height-rendering-42068cc2957d

answered Feb 08 '19 at 11:16

David Smith

141
2
6

I downloaded Font Tools for XCode but I'm unable to use it due to `command not found: ftxdumperfuser`. Did you have the same issue? – Gus Sep 30 '19 at 19:18
3

@Gus you may need to add the installed commands to your PATH for your shell configuration. > The command-line utilities are installed in /Library/Apple/usr/bin/. [...] Make sure you have removed such copies (if necessary), or that in your $PATH environment variable starts with /Library/Apple/usr/bin/. https://coolestguidesontheplanet.com/add-shell-path-osx/ – David Oct 07 '19 at 20:47

score 6 · Answer 2 · answered Aug 09 '18 at 13:12

6

On iOS textAlignVertical: 'center' has no effect, but you can achieve a similar result when setting the lineHeight to the doubled height of the fontSize.

We only need to apply the doubled lineHeight on iOS, therefore we import Platform

import { StyleSheet, Text, View, Platform } from 'react-native';   // add Platform at the beginning

and then change the following:

<Text style={[styles.content, {lineHeight: Platform.OS === 'ios' ? 40 : 20 }]}>Home!</Text>

answered Aug 09 '18 at 13:12

Tim

10,459
4
36
47

Thank you for your answer. `lineHeight` did not centered perfectly. However I liked your idea with `Platform`. – Rukala Aug 10 '18 at 04:40
@Rukala You’re welcome. The above lineHeight rule works well with the standard font. Because your are using an imported font, you probably have to adapt the values to perfectly center your Text. Hope it will help you. – Tim Aug 10 '18 at 05:08
This is not the best way to handle it. If you change the device the alignments will change – Mitul Verma Jul 31 '19 at 08:05

score 1 · Answer 3 · answered Sep 18 '20 at 09:26

1

you can make vertical center using following 2 style

...Platform.select({ios: {lineHeight: verticalScale(55)}, android: {textAlignVertical: 'center',}}),
    height: verticalScale(55),

here height and lineHeight must be same.

answered Sep 18 '20 at 09:26

Rajesh N

6,198
2
47
58

score 0 · Answer 4 · answered Sep 26 '19 at 03:39

Same concept as detailed above but I found that using Glyphs was easy as well. Simply open the custom font you are working with and then once opened in Glyphs hit the "info" icon to bring you to a screen that allows you to adjust the ascender, descender, and lineGap properties. Export the new settings and keep adjusting until you get it to look as needed.

score -1 · Answer 5 · answered Aug 26 '20 at 16:20

-1

answered Aug 26 '20 at 16:20

Dharmik

2,325
3
27
37

Vertical center custom font in React native iOS

5 Answers5

Linked