【React Native】端末で設定している文字サイズによる影響を制限したい

がーみ未分類

以下Zennで投稿した内容と同様です

https://zenn.dev/garmi/articles/6bdab5527ca325

React Nativeでアプリを開発している際に、スマートフォンの端末で文字サイズを大きく設定している場合に文字サイズによってはレイアウトが崩れてしまうことがありました。一旦文字サイズを端末に影響されないよう固定にしたいと思ったのでそのときの調査メモです。

結論

TextコンポーネントのPropsに以下の項目を設定

allowFontScaling={false}

Expo環境で実装しているので、app.jsonにフォントサイズの固定の設定などはあるか調べてみたましたが見当たらないので、Textコンポーネントのpropsを修正して、対応する形が良さそうです。

共通の設定になるかと思うのでTextコンポーネントをラップして共通利用するコンポーネントとして用意してあげる形で使うようにしてます。

import React from 'react';
import { Text, TextStyle } from 'react-native';

type TextProps = {
  text: string;
  size: number;
  color: string;
  fontWeight: TextStyle['fontWeight'];
  lines: number;
  textAlign: TextStyle['textAlign'];
};

export const AppText = ({
  text,
  size = 16,
  color = 'black',
  fontWeight = 'normal',
  lines = 0,
  textAlign = 'auto',
}: TextProps) => {
  return (
    <Text
      style={{
        fontSize: size,
        color: color,
        fontWeight: fontWeight,
        textAlign: textAlign,
      }}
      numberOfLines={lines}
      allowFontScaling={false}
    >
      {text}
    </Text>
  );
};

参考資料
https://reactnative.dev/docs/text