묻고 답해요
158만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결React Native with Expo: 제로초에게 제대로 배우기
여기서 디벨롭먼트고 프리빌드 앱을 써도 에러가 발생합니다.
npm ls react npm ls react-nativenpm ls expo버전을 알려주시면 질문자분과 동일한 환경에서 답변 드릴 수 있습니다. ERROR Warning: Error: The package '@react-native-kakao/user' doesn't seem to be linked. Make sure: - You rebuilt the app after installing the package- You are not using Expo Go
-
미해결React Native with Expo: 제로초에게 제대로 배우기
진짜에요..?
flutter도 써봤고, react/next도 다 쓰고 있는데요... expo의 라우팅 구조가 진짜 번잡하고 혼란스럽다고 느껴지네요. 혹시 현업에서도 알려주신 라우팅 방법(group 폴더, index.tsx, layout.tsx 등 활용)이 최선인가요? 뭐랄까.. 이상한 스킬들로 겨우겨우 원하는 결과물을 만들어내는 느낌이에요 ㅠㅠ
-
미해결React Native with Expo: 제로초에게 제대로 배우기
expo-location 문제
강의 내용을 진행하던 중 android 시뮬레이터에서 expo-location을 import할 수 없다는 에러가 뜨고 있습니다. expo-go를 통해서 진행하였습니다.이전 질문도 같은 문제가 있어보여서 해결 방법으로 expo 버전을 조정해도 해결되지 않습니다..ㅠㅠ버전은 아래와 같습니다.package.json{ "name": "threads", "main": "expo-router/entry", "version": "1.0.0", "scripts": { "start": "expo start", "reset-project": "node ./scripts/reset-project.js", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web", "lint": "expo lint" }, "dependencies": { "@expo/vector-icons": "^14.1.0", "@react-navigation/bottom-tabs": "^7.3.10", "@react-navigation/elements": "^2.3.8", "@react-navigation/native": "^7.1.6", "expo": "53.0.9", "expo-blur": "~14.1.4", "expo-constants": "~17.1.6", "expo-font": "~13.3.1", "expo-haptics": "~14.1.4", "expo-image": "~2.1.7", "expo-linking": "~7.1.5", "expo-router": "~5.0.6", "expo-splash-screen": "~0.30.8", "expo-status-bar": "~2.2.3", "expo-symbols": "~0.4.4", "expo-system-ui": "~5.0.7", "expo-web-browser": "~14.1.6", "react": "19.0.0", "react-dom": "19.0.0", "react-native": "0.79.2", "react-native-gesture-handler": "~2.24.0", "react-native-reanimated": "~3.17.4", "react-native-safe-area-context": "5.4.0", "react-native-screens": "~4.10.0", "react-native-web": "~0.20.0", "react-native-webview": "13.13.5", "expo-dev-client": "~5.1.8", "expo-location": "~18.1.5" }, "devDependencies": { "@babel/core": "^7.25.2", "@types/react": "~19.0.10", "typescript": "~5.8.3", "eslint": "^9.25.0", "eslint-config-expo": "~9.2.0" }, "private": true }
-
미해결React Native with Expo: 제로초에게 제대로 배우기
탭제거
href:null을 추가해도 제일 우측 탭이 계속 안없어지는데 이유가 뭘까요..
-
미해결웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크
iOS 가상키보드 대응
iOS 디바이스에서 input 요소에 포커스가 되면 가상키보드가 나타나면서 다음과 같은 문제가 발생합니다:문제 상황:가상키보드가 올라오면서 웹뷰의 전체 document가 위로 이동position: fixed로 설정한 헤더, 바텀 버튼 등의 엘리먼트들이 함께 올라가면서 고정 위치를 유지하지 못함시도해본 해결방법:가상 인풋(virtual input) 방식 적용 → 효과 없음Visual Viewport API 활용 → 해결되지 않음질문: 이 문제를 해결할 수 있는 효과적인 방법이 있을까요? 특히 iOS Safari 웹뷰 환경에서 position: fixed 엘리먼트가 가상키보드의 영향을 받지 않고 제자리를 유지할 수 있는 방법을 찾고 있습니다.
-
미해결React Native with Expo: 제로초에게 제대로 배우기
제가 빌드한 앱이 실행되지 않아요
npm ls react "react": "19.0.0",npm ls react-native"react-native": "0.79.2",npm ls expo = "expo": "~53.0.9",문제:expo go 앱에서 제가 빌드한 앱을 실행하면 로딩이 계속되다가 위와 같은 화면이 뜹니다.터미널에서도 에러를 찾을 수 없어서 이렇게 질문 드립니다.
-
미해결React Native with Expo: 제로초에게 제대로 배우기
EAS서비스 없이 로컬에서 빌드할 수 있을까요?
EAS서비스 없이 react native처럼 로컬에서 빌드해서 사용 할 수 있는 방법이 있는지 궁금합니다.
-
미해결React Native with Expo: 제로초에게 제대로 배우기
13강 AnimatedTabBarButton type 질문
13강 강의 예제로 진행중 AnimatedTabBarButton에서 type을 BottomTabBarButtonProps로 사용했을때, <Pressable {...restProps} /> 부분에서 PressableProps type과 불일치 에러가 발생해요.type assertion으로 {...restProps as PressableProps} 처리를 하면 에러 표기는 안나긴하지만 찝찝해서요.강사님의 IDE와는 다르게 에러가 발생하는데 의존성 version 달라서 발생할 수도 있을까요?
-
미해결React Native with Expo: 제로초에게 제대로 배우기
eas build가 원래 엄청 오래걸리나요?
eas build --platform android --profile development위 eas 빌드 명령어를 실행했는데 거의 30분째 Build in progress... 문구만 보이네요, 좀 찾아봤더니 Free Tier라 큐에 대기시간때문인 것 같은데.. 원래 이런건가요?
-
미해결React Native with Expo: 제로초에게 제대로 배우기
expo-location 설치문제
안녕하세요 강사님강의 15회차입니다.npx expo install 명령어를 통해서 expo-location 설치했고, 정상적으로 import * as Location from "expo-location"으로 정상 import 되었고 Node_modules의 expo-location으로도 잘 이동됩니다. Node_modules도 전부 삭제했다가 깔아보고 빌드도 다시 해봤는데 ERROR Error: Cannot find native module 'ExpoLocation', js engine: hermes 에러가 발생하고, 이 에러발생시에 WARN Route "./modal.tsx" is missing the required default export. Ensure a React component is exported as default. warn도 함께 나옵니다.(import가 제대로 되지않아 코드 하단부를 expo에서 안읽는것 같습니다) 해결방법좀 부탁드립니다.
-
미해결React Native with Expo: 제로초에게 제대로 배우기
22강 딥링크, 유니버셜 링크 관련 질문(스토어 이동)
앱이 설치되지 않은 경우, 설치 안내 웹페이지가 아닌 스토어로 이동시키려면 어떻게 해야할지 알 수 있을까요?
-
미해결React Native with Expo: 제로초에게 제대로 배우기
expo go에 threads-clone이 없어요
왜 expo go에 threads-clone 클론이 없을까요?그냥 아래 이미지처럼만 있습니다.
-
미해결React Native with Expo: 제로초에게 제대로 배우기
punycode 에러
(node:49559) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead. (Use `node --trace-deprecation ...` to show where the warning was created)설치할 때 터미널에 이러한 오류가 발생해서 시키는대로 node --trace-deprecation 를 입력했더니 아래 처럼 뜹니다. 그냥 무시해도 되겠죠? ➜ threads git:(master) ✗ node --trace-deprecation Welcome to Node.js v22.9.0. Type ".help" for more information. > punycode { version: '2.1.0', ucs2: { decode: [Function: ucs2decode], encode: [Function: ucs2encode] }, decode: [Function: decode], encode: [Function: encode], toASCII: [Function: toASCII], toUnicode: [Function: toUnicode] } > (node:51239) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead. at node:punycode:3:9 at BuiltinModule.compileForInternalLoader (node:internal/bootstrap/realm:399:7) at BuiltinModule.compileForPublicLoader (node:internal/bootstrap/realm:338:10) at loadBuiltinModule (node:internal/modules/helpers:108:7) at Module._load (node:internal/modules/cjs/loader:1099:17) at TracingChannel.traceSync (node:diagnostics_channel:315:14) at wrapModuleLoad (node:internal/modules/cjs/loader:217:24) at Module.require (node:internal/modules/cjs/loader:1339:12) at get (node:internal/modules/helpers:223:33) at REPL1:1:1
-
미해결React Native with Expo: 제로초에게 제대로 배우기
수강노트는 어디에서 볼수있나요?
수강노트는 어디에서 볼수있나요?깃에는 최종코드만 있어서 에러가 발생해가지구요실행시키기 위해 npx expo를 많이했는데도 에러가 발생하더라구요 ERROR Error: Cannot find native module 'ExpoLocation', js engine: hermes ERROR Error: Cannot find native module 'ExponentImagePicker', js engine: hermes
-
해결됨아바타 커뮤니티앱 만들기 (React Native Expo)
자꾸 SDK를 업데이트하라구 해서 했는데 그래도 잘 안되네요
❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다.에러 잘라서 올리시면 안됩니다!https://github.com/Banana-Master/expo-community/issues/1 제 깃허브인데 한번만 봐주시면 안될까요 ㅠㅠ 자료 다운로드해서 실행해봐도 같은 오류라서 진행이 안됩니다.
-
해결됨웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크
인스펙터가 웹뷰 내부의 웹을 못잡습니다.
안녕하세요 시뮬레이터 실습하고 있는 수강생입니다.아래 사진처럼 시뮬레이터로 사파리에 접속하면 맥북의 사파리 인스펙터에서 시뮬레이터 속 웹을 인지하는데요, 엑스포 앱을 통해 웹뷰 내부의 웹은 읽지 못하는 것 같아요따로 설정해야하는 것이 있을까요 ?
-
미해결따라하며 배우는 리액트 네이티브 기초
getStatusBarHeight () 화면UI적용
getStatusBarHeight의 값이 콘솔에 찍히는데 그 값이 화면에 적용되지 않습니다. import { View, StyleSheet, StatusBar, Image, Text, TouchableOpacity, Animated, Platform, } from 'react-native'; import {getStatusBarHeight} from 'react-native-status-bar-height'; import React, {useEffect, useRef} from 'react'; import {SafeAreaView} from 'react-native-safe-area-context'; import Ionic from 'react-native-vector-icons/Ionicons'; const Status = ({route, navigation}) => { const {name, image} = route.params; const statusBarHeight = getStatusBarHeight(); const topMargin = Platform.OS === 'ios' ? statusBarHeight : 0; console.log('statusBarHeight', statusBarHeight); console.log('topMargin', topMargin); // Animated.Value(0)의 값을 직접 변경하면 안되기 때문에 useRef를 사용 const progress = useRef(new Animated.Value(0)).current; const progressAnimation = progress.interpolate({ inputRange: [0, 5], outputRange: ['0%', '100%'], }); useEffect(() => { Animated.timing(progress, { toValue: 5, duration: 5000, useNativeDriver: false, }).start(); }); useEffect(() => { let timer = setTimeout(() => { navigation.goBack(); }, 5000); return () => { clearTimeout(timer); }; }); return ( <SafeAreaView style={styles.statusContainer}> <StatusBar barStyle="light-content" backgroundColor="black" /> <View style={[styles.topGreyLineContatiner, {top: 18 + topMargin}]}> <Animated.View style={{ backgroundColor: 'white', height: '100%', width: progressAnimation, }} /> </View> <View style={[styles.headerContainer, {top: 12 + topMargin}]}> {* ... /*} </View> <Image style={styles.storyImage} source={image} /> </SafeAreaView> ); }; export default Status; const styles = StyleSheet.create({ statusContainer: { backgroundColor: 'black', height: '100%', justifyContent: 'center', }, topGreyLineContatiner: { height: 3, width: '95%', borderWidth: 1, backgroundColor: 'grey', position: 'absolute', }, headerContainer: { padding: 15, flexDirection: 'row', alignItems: 'center', position: 'absolute', top: 12, left: 0, width: '90%', }, headerImageContainer: { width: 30, height: 30, justifyContent: 'center', alignItems: 'center', }, //.... }); console.log('statusBarHeight', statusBarHeight); console.log('topMargin', topMargin);이렇게 했을경우 statusBarHeight 20 , topMargin 20값이 모두 정상적으로 디버깅 툴에 출력됩니다. 그러나 화면상에 ui에 적용되지 않아요.일부로 const 에 넣어서 사용해봤고, margintTop과 top이 같이 있을경우 가끔 문제가 된다는 글을 봐서 아예 top에 값을 따로 추가하는 방식도 해보았습니다. 그리고 마지막으로 예제 코드를 그대로 가져와서 사용해보았지만 여전히 화면에서 적용이 되지 않습니다. 값이 찍히는 걸 보면 getStatusBarHeight가 동작하긴 하는건데 화면상에서 적용이 안되는 이유가 뭔지 알 수 있을까요?
-
미해결
TypeError: Cannot read property 'bubblingEventTypes' of null
react-native 프로젝트 개발중인데, android studio 애뮬레이터에서 expo go로 실행시켰을 때는 제대로 동작하는데 eas build를 통해 apk 파일로 만들어서 실제 기기 혹은 android studio 애뮬레이터에서 다운 받아서 실행만 하면 TypeError: Cannot read property 'bubblingEventTypes' of null 에러가 뜹니다. stack overflow나 github 커뮤니티에 있는 방법들 모두 해봤는데 소용이 없었습니다. 제발 도움주시면 감사하겠습니다. 더 필요한 정보 있으시면 제공해드리겠습니다. "dependencies": { "@gorhom/bottom-sheet": "^5.1.1", "@react-native-async-storage/async-storage": "1.23.1", "@react-navigation/bottom-tabs": "^7.2.1", "@react-navigation/native": "^7.0.15", "@react-navigation/stack": "^7.1.2", "@supabase/supabase-js": "^2.49.1", "@tanstack/react-query": "^5.40.0", "base64-arraybuffer": "^1.0.2", "buffer": "^6.0.3", "expo": "^52.0.41", "expo-auth-session": "^6.0.3", "expo-clipboard": "~7.0.1", "expo-constants": "^17.0.8", "expo-image-picker": "^16.0.6", "expo-linking": "^7.0.5", "expo-location": "^18.0.8", "expo-status-bar": "~2.0.1", "expo-updates": "~0.27.4", "npm": "^11.1.0", "react": "18.3.1", "react-hook-form": "^7.54.2", "react-native": "0.76.7", "react-native-geocoding": "^0.5.0", "react-native-gesture-handler": "^2.20.2", "react-native-get-random-values": "^1.11.0", "react-native-image-zoom-viewer": "^3.0.1", "react-native-maps": "^1.18.0", "react-native-reanimated": "^3.16.7", "react-native-url-polyfill": "^2.0.0", "zustand": "^5.0.3" }, "devDependencies": { "@babel/core": "^7.25.2", "@babel/plugin-transform-class-properties": "^7.25.9", "@babel/plugin-transform-private-methods": "^7.25.9", "@babel/plugin-transform-private-property-in-object": "^7.25.9", "@types/react": "~18.3.12", "@types/react-native-vector-icons": "^6.4.18", "metro-react-native-babel-preset": "^0.77.0", "react-native-dotenv": "^3.4.11", "typescript": "^5.3.3" }, "private": true } android studio 로그캣에서 아래와 같이 뜨고 앱이 꺼집니다. com.facebook.react.common.JavascriptException: TypeError: Cannot read property 'bubblingEventTypes' of null This error is located at: in RNSScreen in Unknown in Suspender in Suspense in Freeze in DelayedFreeze in InnerScreen in Unknown in MaybeScreen in RNSScreenContainer in ScreenContainer in MaybeScreenContainer in RCTView in Unknown in CardStack in RNCSafeAreaProvider in SafeAreaProvider in SafeAreaProviderCompat in RNGestureHandlerRootView in GestureHandlerRootView in StackView in PreventRemoveProvider in NavigationContent in Unknown in StackNavigator in AuthNavigator in ThemeProvider in EnsureSingleNavigator in BaseNavigationContainer in NavigationContainerInner in _QueryClientProvider in RNGestureHandlerRootView in GestureHandlerRootView in RCTView in Unknown in App in RCTView in Unknown in AppContainer, stack:
-
미해결배달앱 클론코딩 [with React Native]
강의 외 질문입니다!
안녕하세요 제로쵸님리액트 네이티브로 이번에 처음으로 앱을 개발해서 출시를 했습니다. 그런데 도저히 해결이 안되는 문제가 있어서 질문을 남깁니다!import * as Application from "expo-application"; export const getUserAppVersion = () => { return Application.nativeApplicationVersion ?? null; };안드로이드에서 앱버전을 가져오는 곳에서 에러가 생기고 있는데...개발 과정에선 expo go 앱의 버전이 뜸 (정상)프로덕션 배포 IOS의 경우 앱의 버전이 정상적으로 뜸 (정상)내부 앱공유로 배포한 안드로이드의 경우 앱의 버전이 정상적으로 뜸 (정상)프로덕션 배포 안드로이드의 경우 앱 버전이 안뜸 (문제) 참고로 버전은 아래와 같습니다."react-native": "0.76.7""expo": "~52.0.31" 혹시 이런 이슈의 원인이 짐작가시나요? ㅜㅜ 빌드까지 해서 테스팅 했을 때도 문제가 없었는데 프로덕션 배포 후에 정상적으로 작동을 안하니 어떻게 디버깅을 해야할지도 너무 난감하더군요...
-
미해결따라하며 배우는 리액트 네이티브 기초
navigation쓸때 오류
Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager.이런 오류가 나.아마 호환성문제인거 같은데 어떻게 해결해?