@livelike/react-native/src/hooks/useCustomFontStyle.ts

LiveLike React Native package

import { useMemo } from 'react';
import { Platform, StyleProp, StyleSheet, TextStyle } from 'react-native';
import { useFonts } from './useFonts';
import { useFontFamily } from './useFontFamily';

export type UseCustomFontStyleArgs = {
  style: StyleProp<TextStyle>;
};

/**
 * @description useCustomFontStyle hook returns an evaluated styles for Text based Component
 * based on fontWeight and fontStyle, these tweaked style are needed because of platform (IOS & Android)
 *  limitation for custom fonts
 * @returns styles
 */
export function useCustomFontStyle({ style }: UseCustomFontStyleArgs) {
  const { fontFamily, fontFamilyType } = useFontFamily({ style });
  const { fonts } = useFonts();
  const styles = useMemo(() => {
    const _styles = StyleSheet.flatten([style, { fontFamily }]);
    // Android has limitation for custom fonts where if custom font is used
    // and fontWeight/fontStyles is set, it doesn't render the expected font
    // so skipping fontWeight (& fontStyle) styles for Android platform
    // for more context refer https://stackoverflow.com/a/55717885/4317128
    const isCustomFont = !!fonts[fontFamilyType];
    if (Platform.OS === 'android' && isCustomFont) {
      const { fontWeight, fontStyle, ...restStyles } = _styles;
      return restStyles;
    }
    return _styles;
  }, [fontFamily, style, fontFamilyType]);

  return styles;
}