React Native: побеждаем lineHeight кроссплатформенно

React Native вызывает споры, но он определённо хорош двумя вещами: быстрый старт для веб-разрабов и кроссплатформенностью, то есть, пишете один раз - получаете приложение для Android и iOS сразу же.

Конечно, иногда требуются доработки под определённую платформу, но, в целом, вы можете быть уверены, что результат будет плюс-минус одинаковым.

Проблемы начинаются вместе с кастомизацией. Мало того, что добавить свой шрифт в RN-приложение непросто, ещё и начинаются проблемы с тем, как текст с этим шрифтом выглядит.

А как вообще использовать свой шрифт?

Про добавление самого файла шрифта есть много публикаций в Интернете (к примеру, хорошо написано вот тут).

Но просто добавить файлы недостаточно. Здесь стоит сказать следующее: React Native немного ломает привычный флоу работы с HTML и CSS, что вполне логично. Лично мне это показалось диким и непривычным, но, чем раньше вы поймёте, что иначе никак - тем лучше :)

Самый простой вариант - написать свой компонент, наследуемый от Text. Я в своём проекте использую библиотеку компонентов Native Base, так что покажу на её примере.

Итак, я добавил файлы шрифта Gotham Pro, теперь время написать компонент:

import React from 'react'
import { Text } from 'native-base'

export const MyText = (props) => {
  const style = {
    fontFamily: 'GothamPro',
  }
  return <Text {...props} style={style} />
}

Смотрим - шрифт правильный. Однако в дальнейшей работе вы увидите, что высота строки на iOS и Android различается.

Исправляем высоту строки

Это происходит из-за того, что дефолтные величины, используемые для настройки таких свойств, как lineHeight, на iOS и Android с виду одинаковые, но работают чуть-чуть по-разному. Значит, нам нужно явно указать, какой lineHeight должен использоваться сейчас.

Обновим компонент:

import React from 'react'
import { Text } from 'native-base'

export const MyText = (props) => {
  const fontSize = props?.style?.fontSize ?? 16
  const lineHeight = props?.style?.lineHeight ?? fontSize
  const style = {
    ...props.style,
    fontFamily: 'GothamPro',
    fontSize,
    lineHeight
  }
  return <Text {...props} style={style} />
}

Минуточку, зачем fontSize? К сожалению, без этого не обойтись. Нам нужно знать, какая должна быть высота строки, а для этого нужно знать, какой размер шрифта у текста. Если никакой - то мы должны понимать, какой размер у нас по-умолчанию.

Этот компонент позволяет нам “пробрасывать” стили, а также вручную управлять высотой строки и размером шрифта. Однако, если же мы хотим просто вывести текст - наш не ждёт никаких разочарований: текст будет выглядеть одинаково и на iOS, и на Android.

Не очень красиво…

Вам тоже показалось, что решение не очень-то изящное? Что ж, React Native - костыльная штука, которая позволяет делать многое, зная что-то одно. За то, что я ленюсь изучить нативную разработку, я плачу костылями. Пока что мне это подходит. А вам? :)