[알게된 것] React Native 시스템 글꼴

😀문제 상황

안드로이드 사용자의 시스템 글꼴 크기가 달라지며, 모바일 앱의 UI가 비정상적으로 출력됨

😁해결 방법

index.js에 글꼴이 깨지는 요소의 defaultProps.allowFontScaling을 false로 할당함 (기본값은 true)

import 'react-native-reanimated';
import {Text, TextInput, AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

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

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

AppRegistry.registerComponent(appName, () => App);

😂아쉬운 점

allowFontScaling이 모든 태그의 시스템 글꼴 크기 제한을 막을 수 없다. 가장 대표적인 예시로 Alert가 있음
추가로, 해당 방법은 시각적인 불편함이 있는 사용자에게 예상치 못한 경험을 주기 때문에 사용해서는 안되나

모든 레이아웃을 다시 생각하여 개발할 수 없는 상황인 사람들에게 잠시 도움이 되었으면 좋겠다.