ReactNative

iOS와 Android의 status bar 설정이 다르다..SafeAreaView에 backgroundColor를 주면 StatusBar까지 색이 들어간다\-> 상태바가 분리된 영역이 아니라 root 영역에 아이콘만 들어간 느낌\-> 상태바에 색을 주려면 전체 영역에

기본 사용react native의 Image 컴포넌트 속성인 resizeMode를 이용하면이미지를 쉽게 resizing 할 수 있다resizeMode='contain'contain으로 설정 시 전체 이미지 크기를 바깥 영역 크기에 fit하게 맞춘다resizeMode='

https://medium.com/@hr.hseyin_80381/8-steps-to-get-rid-of-error-nw-connection-get-connected-socket-connection-has-no-connected-handler-1bf622ca23

프로젝트 root 폴더에 react-native.config.js 생성 후npx react-native-assetinfo Linking otf assets to iOS project 이런 메시지와 함께 link 등록이 완료된다

Tab.screen 에 전달되는 컴포넌트는 default 로 route props 를 받을 수 있다type 잘 맞춰주고.. 사용하면 된다사용하다보면 약간의 props drilling 을 하게 되는데 전역으로 관리해야할지 고민된다..

지금까지 경로 설정을 tsconfig 에서 해줬는데metro 서버에서 해줄 수 있었다...metro.config.js 파일에서위와 같이 설정 해주면파일명 변경 등 ide 에서 자동으로 경로를 잘라주는 것에 대응 가능..@/경로/경로 골뱅이 안붙여도 된다..경로/경로 식

그냥 구현하려면 꽤 까다로울 것 같아서 라이브러리 사용함..https://www.npmjs.com/package/react-native-text-ticker이런걸 text-ticker 라고 부르는 것 같다

info.plist추가했는데도 안된다..AppDelegate.m

react native 0.69 버전에는 키보드 메서드가addListener 와 dismiss 뿐인 것 같다..dismiss 는 키보드 내리는 메서드안드로이드에서 Android 10 를 사용하거나android:windowSoftInputMode 속성의 값을 adjust

ios 에서 시뮬레이터 특정 기기에서만 코드 실행이 안되는 이슈 발생simulator 의 맥 설정으로 가서 device - Erase clean all data를 하여 디바이스의 데이터를 초기화한 후 실행하니 잘 된다..

android 에서 백버튼으로 앱 종료를 구현했는데종료되지 않고 백그라운드에서 계속 실행중인 이슈가 있었다BackHandler.exitApp()이후에 return true 를 주어 해결https://stackoverflow.com/questions/522559

React Native Modal 을 중첩으로 사용하기 위해서는첫 번째 모달 안에 두 번째 모달이 속해있어야 한다아니라면 둘 중 하나씩만 사용 가능..

react native typescript template 라는 서드 파티 라이브러리가 있어서 편하게 사용했지만앞으로는 리액트 네이티브와 타입스크립트를 각각 설치하는 방향으로 가는 편이 좋겠다버전 이슈를 매번 대응해야 하는 점이 서드 파티의 치명적인 단점 같음..npx

지금가지 조건부 렌더링 시에Platform.OS === 'android' 등으로 if 문을 사용했는데Platform.select({ios:, androd: })이렇게 각 OS 별 코드를 작성할 수도 있다

os별 상태바 설정을 safeAreaView 와 statusBar 높이를 구하는 라이브러리로 구현했었는데react-native-safe-area-context 라는 라이브러리가 있었다장점은 iOS 의 SafeAreaView 를 상 하 좌 우 각각 설정할 수 있다는 점과

assets, svg 를 사용해야 할 때src 만 기본 경로로 설정할 때

FlatList 의 ListHeaderComponent 속성에 Props 로 child 를 받아서넣어주면 리스트의 위쪽에 child 컴포넌트가 생성된다

react native 의 TextInput 태그에 비밀번호를 입력하기 위해secureTextEntry 속성을 사용하면 비밀번호 입력 시 화면이 깨지는 이슈가 있다textContentType='oneTimeCode' 속성을 함께 사용하면 해결된다textContentTy

numColumns 가 2 이상인 경우columnWrapperStyle 을 between 으로 주고renderItem 의 width 를 조절하여 간격을 맞춰준다

No Permission handler detected 에러 발생 시에뮬레이터 내의 해당 app 제거DerivedData 제거workspace 폴더 제거podfile.lock 파일 제거ios 폴더 내의 pods 폴더 제거 이걸 꼭 해야한다..pod deintegrate

KeyBoardAvoidingView 적용 시 해당 페이지가 있는 Navigator 상단에 걸어주면화면 길이가 잘 반영된다

day.js 를 설치하면 tsconfig 설정을 해줘야 한다import \* as dayjs from 'dayjs' 로 사용해도 된다면tsconfig 설정을 해주지 않아도 된다initialDate 에 state 의 날짜를 string 형식으로 넣어주고date 를 변경하

react-native 에는 토글 버튼이 Switch 라는 컴포넌트로 구현되어 있다개꿀..ㅎtrackColor: toggle on/off 시 배경 색 (iOS 의 경우 false 색상이 안먹는 것으로 보인다)ios_backgroundColor: trackColor fa

react native 에서 음성 파일을 쓰려면react-native-sound 를 사용한다ios 의 경우 XCode 의 project 명으로 된 최상위 폴더에 우클릭을 하여Add Files to "project 명" 을 선택 후 음성 파일을 선택하여 추가한다

React Native 에서 제공하는 Modal 컴포넌트가 Android 의 경우 페이지에 소속된 것이 아니다modal 은 페이지 렌더링에 관계 없이 앱이 동작하면 함께 렌더링이 된다따라서 특정 페이지에서 모달을 사용자 인터랙션에 관계 없이제공해야 하는 경우 modal

그라데이션 색상을 주기 위해 서드파티 라이브러리를 사용했다react-native-linear-gradient처음 react-native 를 접할 때는 이것도 무서워서 망설여졌던 것 같은데지금은 그냥 해보고 아니면 지우지 라는 마인드..ㅎ색상을 예쁘게 주는 것도 좋긴한데

Apple Developer 가 등록된 아이디로 Appstore 로그인 후 https://appstoreconnect.apple.com/appstoreconnect 에서나의 앱 - 등록할 앱 선택 - 앱 내 추가 기능 - 앱 내 구입버튼으로 아이템 추가소모품인

이름: Apple Developer 에서 보여줄 이름언어: 한국어번들 ID: XCode 에 등록되어있는 앱 id com.\~~SKU: 고유 식별자 (번들 id 로 했음..)keys 선택 후Apple Push Notifications service (APNs)이거 선택

rm -rf ./android/app/src/main/res/drawable-\*rm -rf ./android/app/src/main/res/rawpng 파일 compile 을 실패하는것 같다\-> jpeg 형식 파일인데 파일 확장자가 .png 로 되어있었음

react-native-config 를 사용하여 env 를 관리할 경우 ios 는 따로 설정이 필요하지 않지만 derived 파일을 지워줘야 한다android

INSTALL_FAILED_VERSION_DOWNGRADE기존에 설치되어있는 App 과 어플리케이션 이름이 다르다거나 하면 발생하는 에러로기존 에뮬레이터의 앱을 지우고 다시 빌드를 하면 해결된다

React Native Video 로 방송 송출을 시도했으나안드로이드에서는 괜찮았는데iOS 에서는 앱이 튕기는 현상이 있었다코드나 설정을 다 완료하였음에도 되지 않아버전 문제가 아닐까 했는데 아니었다....답은 Video 에서 iOS 랑 뭔가 맞지 않아 튕기는 것이었는

첫 프로젝트를 개시하였을 때 cocoapods 에러가 발생한다면 m1 맥 이슈일 가능성이 있다

현재 하려는 빌드 버전보다 높은 버전이이미 에뮬레이터에 깔려있음기존 앱을 에뮬레이터에서 삭제 후 빌드하거나AndroidManifest.xml 의 VersionCode 를 올려주어 버전을 맞춰준다

react native 에서 react router 를 사용할 수 있다그치만 react navigation 처럼 애니메이션을 주거나 앱에만 적용되는 편의 기능은 따로 제공하지 않는것으로 보인다react native screens 는 따로 사용할 수 없고어떤 패키지에 귀

안드로이드는 실기기에서 확인을 해봐야겠지만iOS 에서는 보이지 않는다시뮬레이터에서는 잘 보임

react native video 사용 시다른 어플리케이션에 다녀왔을 때 비디오가 멈춘다면paused={false} 을 준다알림 혹은 제어 센터 창을 열었다 닫았을 때 비디오가 멈춘다면playWhenInactive={true} 를 주어 해결

Android 결제 프로필 등록 후 테스트를 하려 보니API 수준 타겟팅 최소 Android13 (API 33) 이상으로 변경되어업데이트를 해줘야 사용할 수 있다는 경고 문구가 떴다기존에는 API 31 수준이었는데 1년 만에 접속해보니 쉽지 않다\[project] -

이전에 글로벌 react-native-cli패키지를 설치한 경우 예상치 못한 문제가 발생할 수 있으므로 제거하세요.npm uninstall -g react-native-cli @react-native-community/clinpx @react-native-communi

tsconfig.json babel.config.js

Build Phase의 'Bundle React Native code and images' 페이즈를 실행하려고 보니 니가 설정한 path에 파일이나 폴더를 찾지 못하겠다는 내용No such file or directory 라는 에러가 났지만 실제 파일이 존재했다존재하는

apple developer 사이트에서 애플 개발자 계정 구독오래된 계정 or 결제 방식 이슈로 애플 개발자 계정 구독 실패 -> 새로운 애플계정 생성 새로운 애플 계정 생성 후 애플 개발자 계정 구독료 결제 -> 등록까지 하루 걸렸음고유 아이디 만들기XCode - T

is not assignable to type StyleProp<TextStyle>StyleProp<TextStyle>에 정의되어 있는 타입이 ColorValue 를 제외하고 모두 원시 타입의 유니온 타입으로 작성되어 있어 스타일에 대한 개별 정의가 어렵다사

라떼는 expo 쓰면 RN 하는거 아니라고 했었는데expo 도 꾸준히 발전해서 요즘에는 스타트업프로덕션에서도 가끔 쓰이는 것 같다blank-typescript 템플릿 특징 • TypeScript 사용: 프로젝트가 TypeScript로 설정되어 있어, 타입 안전성을 제공

React Native 와 Webview 간 서로 소통하기 위에메시지 통신을 사용한다webview mount 시 한 번만 메시지를 보내고 싶다면WebView 의 onLoadEnd 속성을 사용할 수 있다웹뷰에서 받기window.ReactNativeWebView.postM

https://docs.expo.dev/build/setup/expo 에서 지원하는 클라우드 빌드 서비스귀찮은 설정들도 대신 해주는 것 같다..iOS 는 개발자 계정 필요당장 알림 기능이 필요 없지만 native 기능을 최대한 많이 활용해야 한다니 넣어보기로

app.jsonBannerAds.tsx

Expo Router 는 파일 기반 라우팅으로app 폴더 밑의 모든 파일에 라우팅이 적용된다Next.js 처럼 기본 파일이 제외되거나, 특정 이름으로 예외처리는 아직 안되는 것 같다다만 app 하위의 index.tsx 는 / 경로에 매칭된다폴더로 생성하려면 폴더 하위에

npx @react-native-community/cli init MyAppnpm install @react-navigation/native @react-navigation/native-stacknpm install react-native-screens react-na