Dahee's Solution Hub

React Native는 webp를 지원하지만 , 애니메이션이 있는 webp는 지원하지 않는다.라이브러리의 힘을 빌리자. 1. react-native-webp-format 설치  2. Android 추가 설정 Add the following dependencies to android/app/build.gradle:dependencies { ... implementation 'com.facebook.fresco:webpsupport:2.5.0' // Optionally, to display animated WebP images, you have to add: implementation 'com.facebook.fresco:animated-webp:2.5.0' ...} 3. iOS 추가 ..

React Native에서 Next.js로 웹뷰 이동을 할 때, React Native에 미리 세팅된 언어를 Next.js에도 똑같이 적용을 하고 싶다. 1) localStorage에 저장해서 클라이언트 렌더링 때 context 등의 전역변수로 관리한다. - 클라이언트 렌더링 할 때서야 언어를 감지하므로 UX 상 좋지 않다. 2) Next.js는 서버사이드 렌더링이기 때문에 서버에서 미리 유저의 언어를 알아낸다. - 이거다! HTTP Aceept-Language 헤더에 기반해 사용자의 local을 감지하면 된다. // RN 코드 import WebView from "react-native-webview"; // next.js 코드 // next-18next.config.js /** @type {impor..

React Native에서 폰트 사이즈는 어떻게 관리할까? 그냥 피그마에서 본 폰트크기가 10이라면, fontSize: 10 으로 하면 될까? 기기에 맞게 대응해주는 방법이 있다. 물론 더 세세하게 나누자면, 디바이스의 가로가 (a~b)px: 8, (b~c)px: 10, (c~d)px: 12 이런식으로 나눌 수도 있겠다. 그러나 그렇게까지는 세세하게 나눈 상황은 아니라서, 우리는 폰트사이즈르 계산할 때 하나의 함수를 통하고, 그 안에서 PixelRatio를 이용하기로 한다. PixelRatio란? 글꼴 크기에 대한 축척 비율을 반환합니다. 이 비율은 절대적인 글꼴 크기를 계산하는 데 사용되므로 이에 크게 의존하는 모든 요소는 이 비율을 사용해서 계산해야 합니다. 안드로이드: Settings > Displ..

너무나도 완벽한 블로그가 있어 그대로 첨부하였다.  https://yong-nyong.tistory.com/46#--%--env-d-ts

import { getStatusBarHeight } from 'react-native-status-bar-height'; const statusBarHeight = getStatusBarHeight(false); // skip android = false; const deviceHeight = Dimensions.get('screen').height; const windowHeight = Dimensions.get('window').height; deviceHeight: 기기 전체 세로길이 windowHeight: 앱이 차지하는 만큼의 세로길이 statusBarHeight는 상태바의 세로길이 공식문서 링크: https://reactnative.dev/docs/dimensions 문제는 windowHei..

채팅화면을 구성하는 2가지 방법에 대해 알아봅시다!(FlatList의 inverted, onContentSizeChange) 1. FlatList의 inverted prop 사용const data = [ "안녕하세요! 채팅을 입력해주세요", "안녕", "반갑습니다!", "나는 보라야",] inverted prop을 사용하면data는 위가 아닌 아래부터 배치가 됩니다. (좌)이 상태라면, data가 추가될 때마다 위에 쌓이게 됩니다.따라서 data.reverse()를 통해 data의 순서를 역으로 세팅해줍니다. (우) 아주 간단하죠! 그런데 data의 첫원소인 "안녕하세요! 채팅을 입력해주세요"가 빨간박스의 좌상단이 아닌, 파란박스의 좌상단부터 배치되게 할 수는 없을까요? 그렇다면 inverted는 포..

상황 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..

// 👍 Good Case @ReactMethod public void getAppName(Promise promise) { promise.resolve("Roubit"); } // 👎 Bad Case @ReactMethod public String getAppName(Promise promise) { return "Roubit"; } 항상 promise 처리 해줘야 한다. 참고: https://stackoverflow.com/questions/68213584/native-module-in-react-native-function-returns-undefined

- 문제가 아직 많아 추적용으로 메모해둠. https://mrousavy.com/react-native-vision-camera/docs/guides/troubleshooting#android https://issuetracker.google.com/issues/242699117

android/app/src/main/res/values/styles.xml 파일을 수정하면 된다. datepicker: 날짜 선택 -> android:datePickerDialogTheme timepicker: 시간 선택 -> android:timePickerDialogTheme 참고: https://github.com/react-native-datetimepicker/datetimepicker/issues/20#issuecomment-602776708