react-native 9

[React-Native/오픈소스활동] issue#35639 KeyboardAvoidingView 관련 버그 해결 일지

개요 React Native는 키보드를 사용할 수 있도록 KeyboardAvoidingView 컴포넌트를 제공. KeyboardAvoidingView가 레이아웃을 조정하는 과정에서 불필요한 추가 공간이 영구적으로 발생하는 문제. 문제 분석 문제가 되는 컴포넌트 라이브러리 파일 내 각 함수 디버깅 및 Inspector를 사용해서 문제 원인을 분석. 문제 분석 결과 _relativeKeyboardHeight 함수 관련 문제임 _onLayout 함수 내 event.nativeEvent.layout 관련 문제임 네이티브에서 가져오는 레이아웃 너비 값 event.nativeEvent.layout 에 의한 문제 event.nativeEvent.layout 값을 이해할 수 없음 네이티브에서 레이아웃 너비 값을 계산하..

[React-Native] 깃허브 레포지토리 첫 업로드하기

프로젝트 생성 아래 명령을 통해 로컬 프로젝트를 생성합니다. npx react-native init 프로젝트명 깃허브 레포지토리 생성 로컬 환경에서 react native 프로젝트를 생성하는 동안 깃허브에 접속하여 레포지토리를 생성해 주세요. react-native cli 로 프로젝트 생성 시 자동으로 .gitignore이 생성되므로 생성 옵션 중 .gitignore 파일 추가를 선택하지 마세요. README 파일 추가도 선택하지 마세요. 깃 초기화 로컬 프로젝트 생성이 완료되었으면 로컬 프로젝트 디렉토리에서 깃 초기화를 해주세요. git init 깃 리모트 설정 깃허브에서 생성한 레포지토리와 로컬 프로젝트를 연결합니다. git remote add origin https://github.com/그룹또는회..

[React-Native] Watchman std::__1::system_error: Operation not permitted 접근 권한 버그 해결하기

RN 앱을 개발할 때 필요한 도구인 watchman, 프로젝트 디렉토리 접근 권한이 부여된 상태임에도 실행 시 접근 권한이 없다고 에러를 출력하는 문제가 있습니다. 이 문제를 해결해보겠습니다. ... { watchmanResponse: { error: 'std::__1::system_error: open: /Users/taegyeonglee/Documents/GitHub/Checked: Operation not permitted', version: '2023.01.16.00' } } 이 글은 watchman설치를 완료한 상태을 전제로 합니다. 부여된 권한 삭제 설정 -> 개인정보 보호 및 보안 -> 파일 및 폴더 에서 watchman을 모두 삭제해 줍니다. Watchman shutdown 실행 중인 wa..

[React-Native] Pressable 컴포넌트로 재사용 가능한 버튼 구성하기

Presssable 컴포넌트는 RN 앱 개발을 위해 반드시 알아야 하는 컴포넌트입니다. press 상호작용에 관한 기능을 제공하는 컴포넌트이기 때문에 적절히 커스텀해서 버튼 등의 기능을 대신할 수 있습니다. (RN 기본 컴포넌트 Button 컴포넌트는 너무 빈약합니다.) 구성 그러나 Pressable을 재사용 가능한 버튼으로 바로 사용하기에는 난감한 문제들이 있습니다. 버튼 뿐만 아니라 기타 press event에도 대응하기 위해(버튼 그 이상의 목적으로 광범위한 용도를 위해) 만들어졌기 때문입니다. import React from "react"; import { Pressable, Text } from "react-native"; const ButtonCustom = ({ onPress, text, t..

[React-Native] react-native-webview 안드로이드 플랫폼에서 웹뷰를 출력하지 않는 문제

앱 내 웹뷰를 이식하려고 했습니다. 웹뷰를 사용하기 위해 react-native-webview 라이브러리를 사용하려 했으나.. 안드로이드 플랫폼에서 정상적으로 출력이 되지 않았습니다. 빈 공간만 출력되었습니다. IOS 플랫폼에선 정상적으로 원하는 웹뷰가 출력되었습니다. 안드로이드 플랫폼에서만 발생하는 문제였습니다. 깃허브 issue 항목에 비슷한 문제에 대한 해결 방법을 찾을 수 있었습니다. 상위 컴포넌트 없이 리턴 View 나 ScrollView 같은 상위 컴포넌트가 존재할 때 리턴하는 경우 발생하는 문제였습니다. 잘못된 예) return ( ); 올바른 예) return ; 참고 : react-native-webview/issues/1426#issuecomment-1207378759 White bla..

[React-Native] react-native-google-singin 앱 심사에 통과하기 위한 앱 서명 인증서(SHA-1) 키 적용하기

debug 빌드에서 잘 기능하는 구글 소셜 로그인이 동작하지 않아 플레이 스토어 심사에서 승인받지 못했습니다. 찾아보니 앱 서명 인증서 SHA-1 키를 파이어베이스 콘솔에 추가해야 한다고 합니다. (디버그 환경에서는 상관이 없으니) 귀찮다고 추가 안했던 기억이 나네요... SHA-1 키 복사 구글 플레이 콘솔 -> 앱 선택 -> 설정 -> 앱 무결성 -> 앱 서명에서 앱 서명 인증서(SHA-1) 지문을 복사합니다. 파이어베이스 콘솔 적용 파이어베이스 콘솔 -> 프로젝트 선택 -> 프로젝트 설정 -> 디지털 지문 추가를 클릭합니다. 복사한 SHA-1 키를 붙여넣은 후 저장합니다. (선택) Release 빌드 SHA-1키 콘솔에 적용하기 구글 로그인이 Release 빌드에서도 정상적으로 기능하도록 Relea..

[React-Native] 개발할 때 알면 좋은 팁

RN 플랫폼을 통해 모바일 앱을 개발할 때 잊어버리기 쉬운 좋은 팁이 여럿 있습니다. 한 포스트로 쓰기에는 사소하지만 까먹을 때마다 보기 좋은 팁들을 모아봤습니다. 제 블로그를 찾아주신 다른 분들에게도 도움이 되었으면 좋겠습니다. 팁 서드파티 라이브러리 사용을 최대한 지양하세요. 그 중 제대로 관리되는 라이브러리는 소수입니다. 나중에 의존성 지옥에 갇혀요 (저처럼) 가벼운 라이브러리는 컴포넌트로 스스로 구현하는 것이 좋습니다. 하나라도 의존성에서 벗어나게 하세요. 지금 제공되는 기본 컴포넌트로도 충분합니다. Button보다 TouchableOpacity 및 TouchableWithoutFeedback 컴포넌트를 사용하세요. Button컴포넌트는 기능이 정말 빈약합니다. 네이티브 버튼을 구현하고 싶다면? ..

[React-Native] 안드로이드 커스텀 폰트 출력 문제 IncludeFontPadding 해결하기

커스텀 폰트 문제가 android에서 발생했습니다. 추가 마진(아니면 패딩)이 모든 커스텀 폰트에 적용되어 있습니다. 문제 이해 구글링하여 이 문제에 관한 많은 글을 찾을 수 있었습니다. React Native Android Text Component extra padding android:includeFontPadding React Native - Text Style Props - IncludeFontPadding 안드로이드 TextView 기본값이 참인 includeFontPadding 속성이 적용된 것이 문제였습니다. 적용 includeFontPadding 속성이 거짓임을 명시해줍니다. include-font-padding: false; 적용 예 1: import styled from "styled..

[React-Native/오픈소스활동] gradle unsupported claass file major verion 62 error 해결하기

개요 IOS 빌드에 성공한 프로젝트를 안드로이드 빌드하였을 떄 에러가 출력되며 빌드에 실패했습니다. 이는 gradle이 지원하지 않는 jdk 버전을 사용하여 발생하는 문제입니다. FAILURE: Build failed with an exception. * Where: Settings file '/Users/taegyeonglee/Documents/GitHub/Checked/android/settings.gradle' * What went wrong: Could not compile settings file '/Users/taegyeonglee/Documents/GitHub/Checked/android/settings.gradle'. > startup failed: General error during c..