[React Native Error] Your Ruby version is 2.6.10, but your Gemfile specified 2.7.6
2023. 9. 18. 20:26
프로그래밍/React Native
Your Ruby version is 2.6.10, but your Gemfile specified 2.7.6 원인 맥에 기본적으로 루비가 깔려있는데, 그 버젼과 react-native에서 요구하는 루비 버젼이 다를 경우 에러 발생 해결 방법 아래 명령어 순서대로 입력 # brew 업데이트 brew update # ruby-build 설치 brew install ruby-build # rbenv 설치 brew install rbenv # rbenv 2.7.6 버전 설치 rbenv install 2.7.6 # 전역 설정 rbenv global 2.7.6 # 환경 변수 설정 echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.zshrc echo 'eval "$(rbenv..
[React Native Error] PLEASE REPORT: Excessive number of pending callbacks: 501
2023. 3. 21. 20:35
프로그래밍/React Native
PLEASE REPORT: Excessive number of pending callbacks: 501 나의 경우 Touchable 컴포넌트를 사용하면서 이러한 warning이 발생하였음 warning이기에 큰 문제가 아니라고 생각될 수 있으나 이러한 콜백이 계속 쌓이면 응용 프로그램의 성능이 저하되거나 동작이 중단될 수 있음 발생 원인 이 warning은 불필요한 콜백이 계속해서 호출되어 생성되는 에러임 해결 방법 해결법은 여러가지가 있고 나는 Touchable 대신 Pressable을 사용하여 문제를 해결함 그렇지만 아래와 같이 다양한 방법이 있음 1. 콜백 함수 내에서 setState()를 호출하지 말고, useRef()를 사용하여 변수를 업데이트 하기 2. 콜백 함수 내에서 비동기 작업이 발생하는..
[React Native] Pressable vs Touchable
2023. 3. 20. 20:34
프로그래밍/React Native
Pressable과 Touchable 공통점과 차이점 버튼과 같은 UI 요소를 만들 때 사용하는 컴포넌트 두 컴포넌트는 모두 터치 이벤트를 처리하며, 사용자의 버튼 클릭을 감지하는데 사용 공통점 모바일 앱에서 버튼과 같은 UI 요소를 만들 때 사용 터치 이벤트 처리 onPress나 onPressIn 등의 콜백 함수를 등록하여 터치 이벤트에 대한 동작을 처리할 수 있음 차이점 Pressable Touchable Pressable 컴포넌트 내부에서 발생하는 터치 이벤트에만 반응 여러 종류의 터치 이벤트를 처리 스타일 변경 가능 스타일 변경 불가 애니메이션 지원 애니메이션 지원 안함 결론적으로, Pressable은 스타일과 애니메이션을 지원하는 더 유연한 버튼 컴포넌트임 Touchable은 여러 종류의 터치 ..
[React Native] SafeAreaView 적용
2023. 3. 14. 21:22
프로그래밍/React Native
react-native-iphone-x-helper SafeAreaView를 위해 react-native-iphone-x-helper 설치하여 위 아래 영역 잡아주기 🚫 더이상 지원이 없을 예정이여서 react-native-safe-area-context로 대체 npm i react-native-iphone-x-helper --save # or yarn add react-native-iphone-x-helper --save react-native-safe-area-context 대체 라이브러리인 react-native-safe-area-context 설치 npm install react-native-safe-area-context # or yarn add react-native-safe-area-cont..
[React Native] 라디오 버튼 구현하기(react-native-radio-buttons-group)
2023. 3. 10. 20:25
프로그래밍/React Native
react-native-radio-buttons-group로 라디오 버튼 구현하기 📍 Installation npm i react-native-radio-buttons-group --save # or yarn add react-native-radio-buttons-group 📍 사용법 App.js 예시 import React, { useState } from 'react'; import RadioGroup from 'react-native-radio-buttons-group'; export default function App() { const [radioButtons, setRadioButtons] = useState([ { id: '1', // acts as primary key, should be ..
[React Native Error] unable to find utility "simctl", not a developer tool or in PATH
2023. 3. 8. 20:45
프로그래밍/React Native
unable to find utility "simctl", not a developer tool or in PATH error 내용 xcrun: error: unable to find utility "simctl", not a developer tool or in PATH error Could not get the simulator list from Xcode. Please open Xcode and try running project directly from there to resolve the remaining issues. Error: Command failed: xcrun simctl list --json devices xcrun: error: unable to find utility "simct..
[React Native Error] Error: spawnSync adb ENOENT
2023. 3. 6. 20:25
프로그래밍/React Native
Android 실행 builde하려고 할때 Error: spawnSync adb ENOENT 에러가 뜨는 경우 해결 방법 brew install --cask android-platform 위의 명령어로 설치 후 adb version 확인해보기 adb --version
[React Native error] error Failed to install the app. Make sure you have the Android development environment
2023. 3. 3. 20:04
프로그래밍/React Native
React Native 프로젝트 빌드 오류 내용 error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081 FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:installDebug'. > com.android.builder.testing.api.Devi..