React Native 사용기

AsyncStorage WebStorage GPS 정보 사용하기 사용자의 위치를 알아내고 싶어서 GPS를 사용하고 싶었다. 설치 사용 예시 스크린이 열릴때 위도 경도를 알아내어 화면에 띄운다. Button에는 스타일이 없다! 리액트 네이티브에서 ` 컴포넌트는

pretendard 폰트를 reactnative 프로젝트에 적용시켰다.

metro.config.js 파일을 추가해서 해결

이 포스팅은 스토리북 깃허브의 내용을 따라하며 정리한 글입니다. storybook 시작하는 방법 storybook 과 app을 바꿔서 사용하는 방법 시작하기 react native 프로젝트를 시작하기 전이라면 시작할때, 스토리북을 설정해줄 수 있다. expo 로 시작한다면 React Native CLI로 시작한다면 으로 시작할 수 있다. 나는 exp...

공식문서 설치 음성 녹음 , 재생 예제

안드로이드에서 그림자를 표현하려면 elevation 속성만 사용할 수 있다. 그림자 색과 위치등을 조절할 수 없고, 3D상에서 Z축으로 얼마나 올라갔는지를 계산해서 그림자를 만들게 된다.하지만 나는 View안에 innerShadow를 만들어야 했다. 디자이너의 요구사항

React Native에서 Navigation의 Tab과 Stack은 각각 다른 방식으로 화면 전환을 관리하는 두 가지 주요 네비게이션 패턴입니다. 이 두 가지는 사용자 경험을 향상시키기 위해 다양한 방식으로 사용됩니다.개념:Stack Navigation은 화면을 카드

nativewind 는 2.0.11 버전,react-native-reanimated 는 3.10.1 버전,tailwindcss 는 3.3.2 버전으로 받아야한다.그 이상의 버전을 사용하면 에러가 난다.을 통해 tailwind.config.js생성,그리고 아래와

EXPO의 경우, EXPO ROUTER를 사용할 수 있다. create-pages navigating-pages

https://navermaps.github.io/android-map-sdk/guide-ko/1.html@mj-studio/react-native-naver-map를 install 하여 사용한다. 주의할점naver cloud console 에서 앱 패키지명을

시작,단색 스플래시 시작 라이브러리 사용함 react-native-splash-screen 블로그 보고 따라함 기본 스플래시 없애기 안드로이드 12 부터 기본 스플래시가 강제적으로 들어가게됨 → 투명하게 만들어서 안보이게 함 안드로이드 12부터 SplashScre

https://velog.io/@chloedev/React-native-Splash-Screen-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-iOS-android이 블로그를 따라하면 ios 빌드시 에러가 난다. \[!] No podspec

이미지 태그<Image/>를 통해 이미지를 로드할때, 전달한 uri가 올바름에도 이미지가 화면에 나타나지 않을 때가 있다. 그럴때는 로깅을 추가하여 에러를 확인할 수 있다.

.

admob.google.com으로 접속하여 가입한다. 앱/모든앱에서 app-ads.txt를 받아 도메인에 넣는다. 나는 회사사이트를 vite + react 로 만들었기에 root/public/app-ads.txt 파일을 만들어서 넣어주었다.

,

ANDROID - Google Play Store 첫 배포 React Native CLI 앱 앱 빌드 준비하기 android/app/build.gradle 파일에서 versionCode와 versionName을 적절히 수정 앱 아이콘, 스플래시 화면 등 리

react native cli 어플을 인스타그램에 광고하기위한 과정 라이브러리 설치 Android/iOS 연동 필수 단계 Android android/app/src/main/res/values/strings.xml에 Facebook App ID(Client Token 포함) 추가 AndroidManifest.xml의 `` 태그에 앱 ID/토큰 met...

s

reactnative 프로젝트에서 여러개의 테마를 적용시켜야했다. 프로젝트에서 tailwind(nativewind) 설정(v4.x.x)이 되어있는 상태에서의 설명을 작성한다.변수를 사용하고 싶은 부분에 아래와 같이 var로 변수 설정을 한다.tailwind.config

ios widget activate process옵션 (이미지에서 왼쪽 창)Live Activity: 진행률 바와 같은 동적 UI를 원할때Control: 위젯에서 뭔가 직접 조작(체크, 버튼 등)을 해야할 때Configuration App Intent: 사용자가 위젯

https://github.com/mkuczera/react-native-haptic-feedbacknpm install react-native-haptic-feedback --saveXcode에서 프로젝트 열기Xcode를 실행한 뒤, 왼쪽 프로젝트 네비게이터

저는 IOS 시뮬레이터에서 ReactNative 코드를 수정하며 앱 개발을 하고 있었습니다. Native코드를 건들지도 않았고, JS코드만 작성했기에 당연히 Android에서도 잘 작동할 것이라고 예상했습니다. 하지만 Android에서 앱을 빌드하자 크래시가 나서 앱이

공식문서 블로그 참고

IOS 1.App Store Connect에서 인앱 구매 항목을 생성 2. XCode - Capabilities에서 In-App Purchase를 활성화합니다. 3. Info.plist 파일에 아래 내용을 추가합니다. 위 설정은 Apple의 SKAdNetwork

보통 Firebase Analytics의 데이터는 수집 후 대시보드에 뜨기까지 약 1시간 정도 지연이 발생하는데, 개발 중에는 바로바로 확인해야 하므로 이 설정을 통해 'DebugView'에서 실시간으로 로그를 볼 수 있게 만드는 것입니다.Xcode에서 프로젝트를 엽니

Zustand에서 상태를 가져오는 방식에 따라 리렌더링 빈도와 성능이 달라진다.핵심은 selector가 무엇을 반환하느냐다.각 값이 독립적으로 구독해당 값이 바뀔 때만 리렌더링성능 이슈 없음selector가 매번 새 객체를 반환Zustand 기본 비교는 참조 비교(Ob

안드로이드에서 알림을 보낼때,small icon을 설정하는 것은 필수이다. 설정하지 않으면 appicon이 자동으로 선택되어 적용된다. (위 사진 참고)small icon을 설정하면 아래처럼 표현할 수 있다.mipmap-hdpi,mdpi...에 크기별로 아이콘 이미지를

sentry react-native 공식문서 블로그 참고 1. 기본 사용 철학: “자동 수집 + 필요 시 수동 보강” React Native에서 Sentry는 다음을 자동으로 잡아준다: JS 런타임 에러 Promise unhandled rejection React render 중 발생한 오류 Native crash (Android / iOS) Bre...

딥링크란?, 딥링크의 종류딥링크 구현(URL Scheme)

공식문서를 보고 사전 설정을 해준다.안드로이드 설정IOS 설정번호만 보고 따라하면 되도록 작성함터미널에서 brew install fastlane 로 fastlane을 설치한다.rn프로젝트의 android,ios폴더에서 fastlane init를 실행한다.fastlane

https://hyoon.dev/posts/rn-firebase-messaging

공식문서

Google Cloud Console 접속프로젝트 선택좌측 메뉴 → API 및 서비스 → 사용자 인증 정보여기서 google-services.json과 GoogleService-Info.plist에 있는 API 키 2개가 보일 겁니다.Android 키 제한Android

info.plist 내 아래 항목 추가

| 파라미터명 | 허용 값 및 상세 설명 | 기본값 (Default) | | :--- | :--- | :--- | | track | 배포 대상 그룹 선택• internal: 내부 테스트용 (최대 100명)• alpha: 클로즈 베타 테스트용• beta: 오픈 베타 테스트용• production: 일반 사용자용 정식 출시• prealpha: 초기 알파 단계용...

| 파라미터명 | 허용 값 및 상세 설명 | 기본값 (Default) | | :--- | :--- | :--- | | submitforreview | 심사 제출 여부• true: 업로드 후 자동으로 심사(Review)를 요청합니다.• false: 업로드만 하고 심사 제

이 문서는 React Native(bare) 앱에서 Android Health Connect를 통해 “오늘 소모 칼로리(kcal)” 를 가져와 화면에 표시하는 방법을 정리한 튜토리얼입니다. 핵심 요약 칼로리는 readRecords()만 쓰면 0이 나올 수 있어(UI

이 문서는 React Native(bare) 앱에서 iOS HealthKit을 통해 "오늘 소모 칼로리(kcal)" 를 가져와 화면에 표시하는 방법을 정리한 튜토리얼입니다.핵심 요약iOS HealthKit은 activeEnergyBurned(활동 칼로리)와 basalE

동일한 Wi-Fi 연결: PC와 안드로이드 기기가 반드시 같은 네트워크에 연결되어 있어야 합니다.개발자 옵션 활성화: 설정 > 휴대전화 정보 > 소프트웨어 정보 > 빌드 번호를 7번 연속 클릭합니다.ADB 설치: PC에 Android SDK Platform-Tools가