코딩을 보라

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 추가 ..

해결책 Android SDK location path를 알맞게 변경해주면 된다. 검색 키워드 react native flipper not recognize android emulator 출처 https://stackoverflow.com/questions/71744103/android-emulator-unable-to-connect-to-flipper Android Emulator unable to connect to Flipper I followed the instructions here https://fbflipper.com/docs/getting-started/android-native/#diagnostics. I added the 3 dependencies in build.gradle, and a..

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

react native에서 apollo client를 이용한다. 클릭 이벤트가 발생할 때마다 특정 mutation을 호출하는데, 이 mutation이 호출될 때마다 재렌더링이 2번 되는 것을 발견했다. 바로 이 mutation이다. 62 line에서 return값 배열의 두번째 원소에는 loading, data 등이 들어가는데, mutation을 호출하면 이 loading과 data값이 업데이트되면서 총 2번의 렌더링이 더 진행되는 것이다. 그래서 결과값은 필요없다고 알려주고 재렌더링을 방지하는 옵션이 있지 않을까? 해서 찾아봤는데, 역시나 있었다. https://www.apollographql.com/docs/react/data/mutations/#ignoreresults Mutations in Apo..

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

https://github.com/zo0r/react-native-push-notification GitHub - zo0r/react-native-push-notification: React Native Local and Remote Notifications React Native Local and Remote Notifications. Contribute to zo0r/react-native-push-notification development by creating an account on GitHub. github.com 이 라이브러리를 사용할 때 주의점이 있다. 보다시피 id를 설정할 수 있는데, 한번 지정된 id는 다시 사용하지 않는 것이 좋다. 안그러면 이 푸시에 넣은 데이터를 꺼내올 때 예전 ..

작년에 촬영했던 React Native 강의에서는 파트1,2를 맡았다. https://fastcampus.co.kr/dev_online_renative/?utm_source=google&utm_medium=cpc&utm_campaign=hq%5E221101%5E213604&utm_content=react%20native%20module&utm_term=&gclid=Cj0KCQjwxYOiBhC9ARIsANiEIfa38W-r1gn6kZpiB9pzHCoM-LL_8vBzSpXDlOcZ4pBoWTLdG8lQfPMaAoEcEALw_wcB React Native를 활용한 빠르고 완성도 높은 앱 개발 with 21개 프로젝트 초격차 패키지 Online. | 패스 21개 프로젝트로 학습하는 'React Native로 만..

특정 페이지에 도달 할 수 있는 링크인 딥링크를 이용하고 있다. 앱이 완전히 닫힌 상태에서 딥링크로 앱을 열면, (Android의 경우) Linking.getInitialURL 로 (iOS의 경우) Linking.addEventListener('url', handleOpenUrl) 로 앱을 열게 한 url 장본인(?)을 알 수 있다. (이 글은 Android 기준으로 코드를 작성했습니다.) const url = "roubitapp://root-tab/setting" 위 url로 앱을 열면 SettingScreen이라는 화면으로 navigate해야한다고 가정해보자. 코드는 아래와 같이 짤 수 있다. (자세한 딥링크 세팅은 이곳을 참고) import React, { useEffect, useState } f..