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,
  }

})

Answer 1

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>

Answer 2

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

1. Download Font Tools for Xcode
2. In Terminal run $ ftxdumperfuser -t hhea -A d pathtoyourfont.ttf
3. Edit dumped pathtoyourfont.hhea.xml and set lineGap="0"
4. If lineGap was 200 and ascender="800", set ascender to the sum ot these two 1000
5. 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