REACT-NATIVE - 아이폰 기본 폰트 사이즈 문제

시뮬레이터를 통해서 앱을 개발하다가 알람 기능을 추가하려고 실기기로 연결했는데

갑자기 모든 폰트가 엄청 엄청 작게 보이는 문제가 발생했다. 

시뮬레이터랑 실기기랑 차이가 있나 싶어서 이리저리 확인해봤는데

 

실제로 디자인이랑 실기기랑 사이즈 크기가 너무 많이 났다ㅠㅠ 

다른 건 다 괜찮은데 왜 ,, 폰트 사이즈만 이러지?

 

회사 사람들 다 불러서 다 같이 고민했는데 답이 안 나와서 한참을 우울해하고 있었는데 

문득 아이폰 기본 폰트 설정이 떠올랐고 확안해 보니 그것 때문이었다!!!! ㅠㅠㅠㅠㅠㅠ세상에나 

 

사람들 마다 각자 아이폰 기본 폰트 설정을 다르게 하는걸 잠시 망각,,,,

그래서 구글링 해보니까 

 

기본적으로 리액트 네이티브 에서 사용하는 <Text>는 allowFontScaling 프로퍼티가 true로 되어있어서 

설정된 폰트 사이즈에 맞게 우리 앱의 내의 폰트 사이즈가 바뀌는 문제였던 것이었다!!!!!!

 

 

✔️ 해결 방안

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);

 

 

- 참고 사이트

https://kosick.tistory.com/3

리액트 네이티브 - 기본 폰트 크기 문제