728x90
앱을 개발하다보니 안드로이드 기기에 따라 디자인에 맞춰 제작한 폰트 크기가 이상하게 크게 나타나는 현상을 발견하였다. 스택오버플로우를 검색해본 결과 기본적으로 사용하는 <Text> 컴포넌트에 allowFontScaling 프로퍼티가 다음과 같이 default: true 로 되어있는 것을 알 수 있었다.
생각보다 많은 고객들이 폰 설정의 폰트 크기를 크게 쓰는 사람들이 있었고, 이로인해 전반적인 앱 디자인이 우스꽝스럽게 나오는 이슈를 겪게 되었다.
앱 전반적으로 쓰이는 모든 Text 컴포넌트의 allowFontScaling 을 계속 false 로 꺼주는데에는 문제가 있으므로 앱 전반적으로 기본 property 를 변경해주는 defaultProps 방식을 사용하여 이를 해결해주었다.
다음과 같이 React Native에서 기본적으로 앱의 최상단 루트파일인 index.js 파일을 수정해주었다.
import { ScrollView, AppRegistry, Text, TextInput, TouchableOpacity } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
// 안드로이드에서 텍스트 크기를 크게 설정해준 경우 너무 크게 나오는 문제가 있어서 수정.
// 참고) https://stackoverflow.com/questions/41807843/how-to-disable-font-scaling-in-react-native-for-ios-app/51414341#51414341
Text.defaultProps = Text.defaultProps || {};
Text.defaultProps.allowFontScaling = false;
TextInput.defaultProps = TextInput.defaultProps || {};
TextInput.defaultProps.autoCorrect = false;
TextInput.defaultProps.allowFontScaling = false;
AppRegistry.registerComponent(appName, () => App);참고로 TextInput (입력 form) 에서 자동 맞춤법 검사라던지 폰의 기본 글자크기를 따라가는 것을 막기 위해 위와 같이 TextInput 에도 defaultProps 를 지정해주었다.
참고) Stackoverflow