🐹

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

2021/07/10に公開

React Native

TypeScript

Expo

tech

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

結論

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

allowFontScaling={false}

Textコンポーネントのデフォルト値として設定したい場合は、以下をApp.tsxに設定

import { Text } from 'react-native';
export default function App() {
  if (Text.defaultProps == null) {
    Text.defaultProps = {};
    Text.defaultProps.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

結論

コンポーネント共通化

参考資料

Discussion