[리액트 네이티브(React Native, RN)] 기기 글자 크기 조정 제한하는 방법

의존성 버전 (dependencies version)

• "expo": "~36.0.0",
• "react": "~16.9.0",
• "react-dom": "~16.9.0",
• "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",

리액트 네이티브 앱을 개발하다보면 디바이스에서 설정하는 글자 크기와 스타일에 따라서 애플리케이션 폰트 사이즈가 조정되는 것을 볼 수 있습니다. 우리가 사용하는 디바이스는 디바이스 별로 설정에서 글자 크기와 스타일을 조정할 수 있는 기능을 제공합니다.

갤럭시노트8 디바이스에서 OS 글자 크기와 스타일을 조정하는 설정페이지

문제는 글자 크기와 스타일에서 조정하는 크기들이 애플리케이션의 폰트 사이즈까지 반영이 된다는 점입니다. (물론 폰트 크기 조정을 제한하는 것은 좋은 방법은 아닙니다.) 리액트 네이티브에서는 이러한 기기 글자 크기 조정하는 기능을 제한하는 방법이 존재합니다.

글자 크기와 스타일을 조정하면 이와 같이 텍스트 사이즈가 조정됩니다.

Text 컴포넌트의 allowFontScaling을 false로 강제 지정하면 애플리케이션의 글자 크기를 제한할 수 있습니다. 프로젝트에서 사용하는 모든 Text에 해당 속성을 적용해야됨으로 최상단 파일에서 해당 기능을 정의해야합니다. 저와 같은 경우에는 Expo로 프로젝트를 구성해서 사용하고 있고, 프로젝트의 최상단은 App.js임으로 여기서 Text의 기본 속성을 정의합니다.

Text.defaultProps = Text.defaultProps || {};
Text.defaultProps.allowFontScaling = false;

// example, Expo root/App.js
import React from "react";
import { Provider } from "mobx-react";
import { StyleSheet, Text, View, Image } from "react-native";
import * as Font from "expo-font";
import "react-native-gesture-handler";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { mainRoutes } from "./screens";
import RootStore from "./stores";
// import "./assets/css/reset.css";
const Tab = createBottomTabNavigator();
const stores = new RootStore();

Text.defaultProps = Text.defaultProps || {};
Text.defaultProps.allowFontScaling = false;
...

정상적으로 글자 크기 조정이 제한된 예시