썬이의 IT세상

프로젝트 진행중에 페이징 처리로 API를 호출해야 하는 업무를 진행중에 있어, 기존에 ScrollView 안에 map 함수로 랜더링하던 부분을 flatlist로 변경하게 되었는데, 문제는 ScrollView의 헤더 컴포넌트가 있었는데, Scrollview와 Flatlist를 같이 쓰게 되면 에러같은 Warning이 뜨므로 굉장히 불편했다. 방법을 찾아보던 중, 이런 고민을 싹 날리게 되는 FlatList의 props가 있었는데 바로 ListHeaderComponent와 ListFooterComponent였다. `key-${index}`} ListHeaderComponent={() => ( ...Some components those need to be on top of the list )} ListFoo..

회사에서 프로젝트 막바지에 이르러 이제 APP_DEBUG 이름을 버리고 앱에 아이콘과 이름을 넣는 작업을 하게 되었다. https://velog.io/@dody_/React-Native-%EC%95%B1-%EC%95%84%EC%9D%B4%EC%BD%98-%EB%B0%94%EA%BE%B8%EA%B8%B0 [RN] 앱 아이콘 바꾸기 안녕하세용 도디예용 오늘은 react native 프로젝트의 앱 아이콘을 바꿔봅시당 아이콘 사이즈 받아오기 일단 로고를 몇개 추출해놨습니당 둘중에 뭘 해볼까 이 로고는 1024x1024 사이즈인데, Android에 velog.io 아이콘/이름 변경은 간단했는데, 문제는 변경 후 Android 디버깅이 99%에서 멈춰 실행이 안되는 것이었다.. 해결 방법은 단순히 \android\..

React Native 앱을 개발할 때 페이스북에서 개발한 디버깅 툴이 있다. RN을 개발한 팀에서 만든것이라 호환적인 부분이나 UI적인 부분에서도 보기 쉬운 장점도 있고, React-Query나 로컬 스토리지 데이터를 볼수있는 장점도 있다. Flipper는 기본적으로 설치 후 sdk 경로를 맞추고, Watchman 등을 연동한 뒤 npm run android만 해주면 바로 붙는데, 자동으로 붙지 않을 경우 이 부분을 확인해보기 바란다. 1) 패키지명 확인 만약 패키지명이 com.sample.app 이라면 android\app\src\main\java\com\sample\app 경로의 MainApplication.java 파일에 Filpper Init 관련 코드에 com.sample.app 으로 되어있는..

react-native-lineargradient 라이브러리로 UI 작업을 했을 때, margin값을 음수(-)로 주어 다른 컴포넌트 위에 텍스트나 이미지를 겹쳐보이게 작업하는데, 안드로이드에서는 타 컴포넌트 위에 잘 그려지지만 IOS에서는 아무리 z-index값을 주어도 겹쳐지지 않을 때, 간단하게 해결하는 방법을 적어본다. ... {...props} 위의 코드 예시와 같이, LinearGradient 태그의 style 속성에 overflow : 'visible' 만 추가해주면 해결된다.

React Native 앱에서 TextInput 을 사용할 때, Focus 상태에서 페이지 각 요소 Flex가 Keyboard 사이즈에 밀리는 현상이 생기는 경우가 있다. IOS에서는 이런 경우가 발생하지 않고 AOS에서만 생긴다고 하는데, 이럴 경우 간단하게 Keyboard창이 뜨는 유무에 상관없이 해결하는 방법이 있다.

react-native-modal을 사용하다 보면, Modal 태그 안의 View Width를 100%로 해도 약 10px정도 margin 되어있는 현상이 있다. 이럴 경우 해결 방법은 매우 간단하다. 위 코드 예시처럼 margin:0 스타일 속성을 주면 간단히 해결된다.

ReactNative로 앱을 개발하다보면 앱을 디버깅할 때 원래는 잘되었는데 갑자기 컴파일 에러가 뜬다는 등 알 수 없는 에러를 맞닥뜨리게 되는 경우가 많은데, 이 경우에 주로 터미널을 보면 어디서 원인이 되었는 지 알 수 있지만, 그래도 가끔은 Metro Server의 Cache를 초기화 하거나, gradlew를 초기화 함으로써 에러가 간단하게 해결되는 경우가 있다. 그래서 이번 포스팅에는 위 두 가지의 경우에 따른 명령어를 정리해보고자 한다. ✔ Metro Server Cache Reset npm start --reset-cache 위 명령어는 말 그대로 npm 으로 metro server를 시작할 때 서버의 cache를 초기화 시켜주는 명령어이다. ✔ Gradlew clean cd android g..

Execution failed for task ':app:mergeDexDebug'. react native 에서 안드로이드 앱 디버깅 시 위의 메시지가 출력되며 빌드가 되지 않는다면, android\app\build.gradle 파일에서 buildscript { ext { buildToolsVersion = "30.0.2" minSdkVersion = 21 compileSdkVersion = 30 targetSdkVersion = 30 ndkVersion = "21.4.7075529" } defaultConfig { multiDexEnabled true } repositories { google() mavenCentral() } dependencies { classpath("com.android.too..

React Native로 앱을 만들고, npx react-native run-android 명령어를 통해 Android로 앱을 빌드할 때, 개발 환경도 다 조성하고 Android virtual device도 연결이 되었지만 NDK Version이 안맞다며 빌드 에러가 날 때가 있는데, 이런 경우에는 주로 Android SDK 버전 문제일 확률이 높다. 먼저, android\build.gradle 내에서 ext { ... ndkVersion = "xx.x.xxxxxx" ... } 로 되어있는 부분과 동일한 버전의 NDK를 설치해 주어야 하는데, 안드로이드 스튜디오 - Tools - SDK Manager 에서 SDK Tools 탭에 들어간 후 하단의 Show Package Details 를 눌러주면 하단 이..

평소와 같이 RN 앱 개발을 하던 중, 어제까지는 잘되던 react-native run-android 명령어에서 를 뱉어내며 에러가 나던 것이었다. 해결 방법은 매우 간단했다. 에뮬레이터에 설치된 디버깅 전용 앱을 삭제하고 다시 react-native run-android 명령어를 사용해 설치해주면 된다.