Develop/React & React Native 88

[ReactNative] KeyboardAvoidingView 안에 여러 TextInput을 사용할 때 offset 맞지 않는 문제 해결

[ReactNative] KeyboardAvoidingView 안에 여러 TextInput을 사용할 때 offset 맞지 않는 문제 해결 하나의 KeyboardAvoidingView 안에서 여러 TextInput을 사용하면 keyboardVerticalOffset이 첫 TextInput에 맞춰 세팅되어, 키보드 높이가 다른 TextInput을 만나게 되면 KeyboardAvoidingView 본래의 목적을 충족시키지 못하는 현상이 발생한다. 코드는 이렇고, {isStep1 && ( )} {isStep2 && ( )} {isStep3 && ( )} 현상은 이렇다. 분명 공식문서 에는

[React Native] 가로의 길이가 바뀌는 디바이스(폴드) 대응: Dimensions -> useDimensions

루빗(루틴 관리 서비스 어플) 유저중에는 당연히 갤럭시 폴드 사용자도 있다. 종종 해당 유저들로부터 버그제보가 들어온다. 디바이스를 접거나 펴면 화면이 그에 맞게 대응되지 않는다는 것. 직접 버그를 재현해보았다. 정말이었다. 접은 상태: A / 편 상태: B 라고 하겠다. A에서 B로 바뀌었는데, 하단 탭바는 여전히 A에 맞게 대응되어 있다. 이유가 무엇일까? 바로 Dimensions에 있다. /* 👎 Bad */ import { Dimensions, View } from 'react-native'; const width = Dimensions.get('screen').width; const TabContainer = () => { return ( ... ) } 이렇게 사용하면 A에서 B 또는 B에서 A..

Apollo Client query 시 주의점 (variables)

상황 query에 요구되는 variables가 있는데, 항상 같은 값으로 보내면 refetch되지 않는다. 같은 값으로 보냈던 이유: readQuery로 캐시 사용 위해 -> 캐시 사용을 포기하고 variables를 항상 다른 값으로 보낸다. 1️⃣ : 값이 항상 동일해서 refetch해도 query call 처리가 안된다? 2️⃣ : 값이 항상 달라지기 때문에 refetch하면 query call 처리가 잘 된다. 원인 1. apollo 라이브러리의 결함 또는 2. 프로젝트 내 apollo 설정 문제? (cache도 가끔 제대로 업데이트되지 않는데, 다른 프로젝트에서는 cache가 잘만 동작한다.) 어쨌든, 2️⃣로 하니까 해결됐음! const [query, { loading, data }] = use..

[Error] NDK at ~/Library/Android/sdk/ndk~~~~ did not have a source.properties file

react-native-vision-camera 라이브러리에서 요구하는 ndk가 깔려있지 않아도 yarn install 하면서 깔리는데, 만약 해당 ndk 가 로컬에서 꼬여있거나 손상되어 있으면 빌드에 문제를 줌. -> 해당 ndk 폴더 삭제하면 됨. [파인더 - cmd+shift+. 숨김 폴더 보기 - ~/root/라이브러리/Android/sdk/ndk/ - 문제있는 버전 폴더 삭제] 참고) https://stackoverflow.com/questions/64372383/ndk-at-library-android-sdk-ndk-bundle-did-not-have-a-source-properties-file

[iOS/Firebase/RN] iOS 개발자 계정 이전 이후 파이어베이스 푸시알람이 안올 때

배경 개발자 계정을 개인에서 법인으로 전환할 일이 생겨서 전환했는데, 그 이후 파이어베이스에서 보내는 푸시알람이 가지 않는 오류가 발생했습니다. 해결 APN 인증서를 재업로드하면 됩니다. 1. https://developer.apple.com/account/ 계정 - Certificates, Identifiers & Profiles - Keys - +버튼 클릭 - APN 선택 2. 다운로드 및 키 ID 인지 3. FIrebase console - 프로젝트 설정 - 일반 - ios 앱 - 팀 ID 변경 * 팀 ID는 developer 페이지 우상단에서 알 수 있습니다. 4. Firebase console - 프로젝트 설정 - 클라우드 메시징 - APN 인증키 삭제 후 다운로드 받은 파일로 재업로드 이 때 ..

[React Native] TextInput 부분 스타일 적용하는 방법

[따라해볼 예제] - Tick Tick 이라는 어플에서 TextInput에 해시태그와 제목의 스타일이 달라서 어떻게 구현하는지 궁금했다. - 그래서 따라해보기로 했다! [소스코드] ... import React, { useState } from 'react'; ... interface ValueInfo { str: string; isHT: boolean; idxArr: number[]; } const getValueInfos = (value: string): ValueInfo[] => { if (value.length === 0) { return []; } const splitedArr = value.split(" "); let idx = 0; const valueInfos: ValueInfo[] = s..

[React Native] v9 Facebook SDK 적용하기

최근 Facebook SDK를 9로 업데이트하라는 메일이 날라와서 업데이트를 해보려 한다! 환경 react-native: 0.63.4 react-native-fbsdk-next: 4.0.0 FB SDK 9 이상을 사용하려면 위 라이브러리를 사용해야 한다. 9 미만 버전을 사용하려면 react-native-fbsdk를 이용하면 된다. https://www.npmjs.com/package/react-native-fbsdk-next 설치 yarn add react-native-fbsdk-next yarn remove react-native-fbsdk // 이 라이브러리가 설치되어있다면. cd ios && pod install Configure projects 추가설명 참고 링크: https://github.c..