Programing/React-Native

[RN] 인생이 지루하다면 react-native upgrade (0.66.3 -> 0.72.5)

* 업그레이드 방법에 대해 깊게 다루고 있지 않습니다. 업그레이드를 고민 중이거나 낮은 rn 버전을 사용하는 분들께 도움이 되었으면 해서 작성하는 회고글입니다. Histroy 회사에서 사용하던 rn 버전은 0.66.3이다. 오래된 버전으로 인한 이슈가 잔잔하게 있었지만 먼저 해야 할 일들을 쳐내는라 급한 불만 끄면서 업그레이드를 미루고 있었는데 이제는 정말 올려야 할 것 같아 업그레이드하기로 결심했다. '이제는 정말 올려야'했던 이유는 이렇다. xcode 이슈 특정 xcode 버전에서 버그를 발생시키는 코드들이 존재한다. 예를 들어 rn 0.69.0 이하 버전에 xcode 14.3 이상 버전을 사용한다면 yoga.cpp에서 에러가 발생한다. 유사한 이슈가 몇 개 더 존재하지만 보통 xcode에서 코드 한..

[RN] Node 업그레이드 후 빌드 오류 (error:0308010C:digital)

History 기존에 사용하던 node 버전은 v16.16.0 인데 꽤 지난 버전이기도 하고 협업과정에 node 버전 차이가 문제가 되기도 해 이번 기회에 업그레이드하기로 했다. node 버전관리는 nvm을 사용하고 있기 때문에 lts 버전을 다운로드하여 버전을 바꿔주었다. nvm install --lts 설치가 끝난 후 사용할 node 버전을 바꿔주고 별다른 이유가 없다면 default 버전도 변경해준다. nvm use --lts nvm alias default v18.17.1// 여기는 --lts 옵션이 듣질 않으니 직접 버전을 입력해줘야 한다,,, // 변경사항 확인 nvm ls node -v node 버전을 올리는 것까지는 문제없으나 metro를 실행하면 이런 에러를 받는다. Failed to c..

[RN] 플로팅 버튼 아래로 스크롤 할 때만 나오게 구현(feat. reanimated)

How to 간단하게 Y값 조절로 버튼을 화면 아래 숨겨뒀다가 아래로 스크롤할 때만 나오게 하면 된다. 화면 상단에 헤더, 카테고리 버튼 등이 이미 있을 때 하단 버튼까지 만들어두기엔 스크린이 좁게 느껴져서 유저가 스크롤을 올릴 때는 버튼을 숨기고 싶었다. 자세히 보기 reanimated를 사용해서 ScrollView와 하단 버튼을 만들었다. '자세히 보기' 버튼의 경우 translateY값을 한참 높게 줘서 스크린 하단을 넘겨버리면 버튼을 숨길 수 있다. 스크롤을 내렸다는 게 감지되면 translateY의 값을 0으로 줘서 제위치로 돌아오게 하면 버튼이 아래에서 위로 올라오게 될 것이다. const translateY = useSharedValue(1000); const actionBarStyle = ..

[RN] reanimated로 flipCard 만들기

Layout export default function FlipCard() { const { width } = useWindowDimensions(); const cardLayout = useMemo(() => { return { position: 'absolute', backfaceVisibility: 'hidden', alignItems: 'center', justifyContent: 'center', width: width - 48, height: 300, borderWidth: 2, borderRadius: 16, borderColor: '#eee', }; }, []); return } View 두개를 absolute로 겹친 후 interpolate를 사용해 서로 반대로 회전 시키면 된다. 이 ..

[RN] zsh에서 gradle 에 맞는 Java 버전변경 ( version 62 )

version 62 error gradle 공식문서에는 gradle 버전에 적합한 java 버전에 대해 설명해주고 있다. (https://docs.gradle.org/current/userguide/compatibility.html) 진행 중인 프로젝트의 gradle 버전이 6.9인데, 작업 중인 맥의 java 버전은 18이라 android 빌드시 에러가 발생한다. unsupported class file major version 62 권장사항에 따르면 java 15 쯤 다운 받아 해결해 볼 수 있었지만 에러 해결 중 gradle은 java11 버전이 안정적이라 해서 설치해 봤다. Java 11 install https://www.oracle.com/kr/java/technologies/downloads..

[RN] android 빌드 실패 No connected devices

FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:installDebug'. > com.android.builder.testing.api.DeviceException: No connected devices! yarn으로 metro 서버를 켜고 안드로이드 시뮬레이터를 켜려 하면 위 메세지를 뱉으며 빌드 실패한다. 해결한 방법 1. 디바이스 연결 확인 adb devices 프로젝트 폴더에서 터미널에 입력하면 연결된 안드로이드 디바이스를 확인할 수 있다. 위 사진처럼 List of devices attached 다음 라인에 디바이스 이름이 나오지 않는다면 연결된 기기가 없는 것이다. 2. 디바이스..