inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

피그마 스타일링 질문

미해결

아바타 커뮤니티앱 만들기 (React Native Expo)

안녕하세요, 3-0 공통컴포넌트 다시보고있는데요 커스텀버튼의경우 라지가 width 100% height 44로 지정했는데 핸드폰 디바이스마다 전체 길이가 다를텐데 dip기준으로 적용되는지 궁금합니다 또한 실무에서도 flexBox로 만들어서 flex 사이즈를 지정하는게 아닌 대부분 width , height로 지정하나요? 폰트사이즈의경우도 휴대폰 시스템에서 텍스트 크기를 키우니까 UI가 깨져버리는데 실무에서는 어떤식으로 진행하는지 궁금합니다

  • react-native
  • typescript
  • expo
  • react-hook-form
  • react-query
나마스테 댓글 2 좋아요 0 조회수 31

miragejs 강의 건

미해결

React Native with Expo: 제로초에게 제대로 배우기

강의데로 했는데, 계속 엠뮬레이터에서는 로딩만 나오고 앱 첫화면 은 안나오고있는데, 무슨 문제 일깡요? "name": "threads", "main": "index.ts", "version": "1.0.0", "dependencies": { import "expo-router/entry"; import {createServer, Server} from "miragejs"; declare global{ interface Window{ server:Server; } } if(__DEV__){ if(window.server){ window.server.shutdown(); } window.server = createServer({ routes(){ this.namespace = "api"; this.post("/login",()=>{ return { accessToken:"access-token", refreshToken:"refresh-token", user:{ id:"zerocho" } } }) this.passthrough() } }) }

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
ji youn lee 댓글 2 좋아요 0 조회수 56

saveToLibraryAsync

미해결

React Native with Expo: 제로초에게 제대로 배우기

saveToLibraryAsync 가 없어졋다고 하는데, 대체할만한것이 있을깡요?

  • react
  • react-native
  • hybrid-app
  • typescript
  • expo
ji youn lee 댓글 2 좋아요 0 조회수 48

eas 빌드가 엄청 오래걸려서..

해결됨

아바타 커뮤니티앱 만들기 (React Native Expo)

❗ 질문 작성시 꼭 참고해주세요 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다. 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github 을 첨부해주세요. 개발중인 OS, ReactNative, Node 버전 등의 개발환경 을 알려주셔야합니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. 에러 잘라서 올리시면 안됩니다! (에러 일부만 자르거나 일부만 복사하지말아주세요) eas 빌드가 엄청 오래걸려서 검색해보니 몇시간 걸릴수도 있다고 해서.. eas build --platform android --local 로컬 빌드를 하라고 하던데 로컬 빌드 할려면 설정이 필요한가요?

  • react-native
  • typescript
  • expo
  • react-hook-form
  • react-query
심재화 댓글 2 좋아요 0 조회수 104

secureTextEntry 설정에 관해

해결됨

아바타 커뮤니티앱 만들기 (React Native Expo)

비밀번호 입력 후 수정 시 상태 보존 이슈 secureTextEntry 설정을 하면 비밀번호를 입력 후 재 입력할 때 비밀번호 상태가 보존되지 못 하고 다시 입력해야 하는데 이게 원래 이런걸까요?

  • react-native
  • typescript
  • expo
  • react-hook-form
  • react-query
김형근 댓글 2 좋아요 0 조회수 112

expo 55 tabs 사라짐 이슈

해결됨

아바타 커뮤니티앱 만들기 (React Native Expo)

안녕하세요, expo 공식 홈페이지에서 version 55를 사용하게 명시되어있어서 55로 시작했더니 이제 tabs 폴더 구조가 따로 없는 형태로 되었는데 그냥 똑같이 tabs를 생성하여서 진행해야하나요?

  • react-native
  • typescript
  • expo
  • react-hook-form
  • react-query
나마스테 댓글 2 좋아요 0 조회수 151

expo-blur 사용하면서 생긴 버그입니다.

미해결

React Native with Expo: 제로초에게 제대로 배우기

react 19.1.0 react-native 0.81.5 expo ~54.0.23 버전을 알려주시면 질문자분과 동일한 환경에서 답변 드릴 수 있습니다. --- 12. CSS와의 차이점, 비슷한 점 4분 넘어서 블러뷰 적용하는 부분에서 생기는 문제 입니다. 원인은 BlurView때문에 생기는 문제 같고 웹으로 띄우면 별 문제 없는데 안드 앱에서는 문제가 되고 있습니다. 어떻게 해결하는게 좋을까요 ?

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
찬우 이 댓글 3 좋아요 0 조회수 191

router.navigate 동작이 달라졌을까요?

미해결

React Native with Expo: 제로초에게 제대로 배우기

최신 버전에서는 navigate 동작이 바뀐거같네요 "react": "19.1.0", "react-native": "0.81.5", "expo": "~54.0.33", "expo-router": "~6.0.23", 사용하면서 강의 듣는데.. router.push는 A -> B -> C -> C -> B -> B -> C -> B 일 때 뒤로가기 하면 정확하게 역순으로 B -> C -> B -> B -> C -> C -> B -> A 로 동작하는데 router.navigate는 A -> B -> C -> C -> B -> B -> C -> B 일때 B -> C -> B-> C -> B -> A 처럼 바로 연달아서 같은 라우터를 연속 클릭햇을 때에만 뒤로가기 할 때 중복이 제거되거 되는 것 처럼 동작하는 것 같아요 activity 폴더에 적용한 코드들입니다 index.tsx import NotFound from "@/app/+not-found"; import { usePathname, useRouter } from "expo-router"; import { Text, TouchableOpacity, View } from "react-native"; export default function Index() { const router = useRouter(); const pathname = usePathname(); if ( ![ "/activity", "/activity/follows", "/activity/replies", "/activity/mentions", "/activity/reposts", "/activity/verified", ].includes(pathname) ) { return <NotFound />; } return ( <View style={{ flex: 1, justifyContent: "center", alignItems: "center", }} > <View> <TouchableOpacity onPress={() => router.push(`/activity`)}> <Text style={{ color: pathname === "/activity" ? "red" : "black" }}> All </Text> </TouchableOpacity> <TouchableOpacity onPress={() => router.push(`/activity/follows`)}> <Text style={{ color: pathname === "/activity/follows" ? "red" : "black", }} > Follows </Text> </TouchableOpacity> <TouchableOpacity onPress={() => router.push(`/activity/replies`)}> <Text style={{ color: pathname === "/activity/replies" ? "red" : "black", }} > Replies </Text> </TouchableOpacity> <TouchableOpacity onPress={() => router.push(`/activity/mentions`)}> <Text style={{ color: pathname === "/activity/mentions" ? "red" : "black", }} > Mentions </Text> </TouchableOpacity> <TouchableOpacity onPress={() => router.push(`/activity/reposts`)}> <Text style={{ color: pathname === "/activity/reposts" ? "red" : "black", }} > Reposts </Text> </TouchableOpacity> <TouchableOpacity onPress={() => router.push(`/activity/verified`)}> <Text style={{ color: pathname === "/activity/verified" ? "red" : "black", }} > Verified </Text> </TouchableOpacity> </View> </View> ); } _layout.tsx import { Slot } from "expo-router"; export default Slot; [tabs].tsx export { default } from "."; 3분 강의로 2시간이 사라진.....ㅠㅠ

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
개발자 취업 포기 댓글 1 좋아요 0 조회수 105

Toast 기능

미해결

React Native with Expo: 제로초에게 제대로 배우기

안녕하세요 🙂 토스트 버전은 "react-native-toast-message": "^2.3.3", 입니다. 저는 모달 위에 토스트가 뜨지 않고, 모달이 꺼지면 그 뒤에 토스트가 보입니다..! 찾아보니 ios와 aos는 모달 구현 방식에서 차이가 있다고 하더라구요..ㅠㅠ 맞다면 혹시 ios에서는 어떤 방식으로 모달위에 토스트를 띄우는지 알 수 있을까요?? 참고로 모달 내부 마지막요소에 Toast 컴포넌트를 추가했는데도 모달이 꺼지고나서야 보이네요..! 해결 했습니다..! fetch 이후에 뜨는 쪽만 제대로 돼있고, fetch 전에 띄우는 게 잘못 돼있어서 안떠보이는 거였습니다..;;ㅎㅎ 아래 질문만.. 답변 해주시면 감사하겠습니다.ㅎㅎ 🙏 그리고 게시글 포스팅 이후에 자동으로 게시글로 이동하는데, 토스트 누르면 게시글로 이동하게 하는 기능이 굳이 필요한 건지도 궁금합니다! 감사합니다.

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
도도한 불도새 댓글 2 좋아요 0 조회수 123

onEndReached 함수가 바로 호출 되지 않는 이슈

미해결

React Native with Expo: 제로초에게 제대로 배우기

onEndReached() 가 바로 호출 되지 않습니다. 생각 해보면.. 이 함수는 스크롤이 됐을 때만 호출 해야 맞지 않나요..? following쪽도 useEffect 쪽을 삭제 하고 나서는 데이터를 바로 불러 오지 못하는데.. "useEffect 제거 후 onEndreached()가 바로 실행된다." 이 부분 이해가 잘 안돼서 설명 부탁드리기 전에 한번 찾아봤습니다. 대략 왜 바로 실행 된다고 하셨는지는 이해가 되긴 했는데, 저같은 경우는 좀 예외인 것 같아서 질문 남깁니다! 지금 제 flash-list 버전은 아래와 같습니다! "@shopify/flash-list": "2.0.2", 알아보니 v2에서는 estimatedItemSize를 제공하지 않고.. 해당 설정이 없어서 저같은 경우 onEndReached()가 바로 실행 되지 않았던 것 같습니다. 의존 된 데이터도 빈배열로 정의 돼있으니 더 아무 것도 실행 하지 않았던 것 같습니다. 이런 경우 초기엔 useEffect로 직접 불러오나요? 혹시 위에 버전 이슈 말고 제가 놓친 부분이 있다면 말씀 부탁드리겠습니다..! (home)/index.tsx import { Text, View, TouchableOpacity, StyleSheet, useColorScheme, ScrollView, } from "react-native"; import { usePathname } from "expo-router"; import { useState, useCallback } from "react"; import Post, { Post as PostType } from "../../../components/Post"; import { FlashList } from "@shopify/flash-list"; export default function Index() { const colorScheme = useColorScheme(); const path = usePathname(); const [posts, setPosts] = useState<PostType[]>([]); const onEndReached = useCallback(() => { console.log("posts1", posts.length); const lastId = posts.at(-1)?.id; if (!lastId) return; fetch(`/posts?cursor=${lastId}`) .then((res) => res.json()) .then((data) => { if (data.posts.length > 0) { setPosts((prev) => [...prev, ...data.posts]); } }) .catch(console.error); }, [posts, path]); return ( <View style={[ styles.container, colorScheme === "dark" ? styles.containerDark : styles.containerLight, ]} > <FlashList data={posts} renderItem={({ item }) => <Post item={item} />} onEndReached={onEndReached} onEndReachedThreshold={2} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, }, containerLight: { backgroundColor: "white", }, containerDark: { backgroundColor: "#101010", }, textLight: { color: "black", }, textDark: { color: "white", }, });

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
  • onendreached
도도한 불도새 댓글 1 좋아요 1 조회수 101

expo push service에 관한 질문

미해결

React Native with Expo: 제로초에게 제대로 배우기

Expo 프레임워크를 활용해서 푸쉬 알림을 설정할때 두 가지 방법이 있다는 것을 확인할 수 있었습니다. 서버에서 expo push service를 거쳐서 ios - APNs, android-Firebase 연결 expo push service를 사용하지 않고 서버에서 직접 Ios-APNs, android-FireBase연결 이 두 방법이 있고 공식문서에서도 두 방법에 대해서 안내해주는 레퍼를 확인할 수 있었습니다. 당연히 1번이 구현 난이도가 더욱 쉽고 빠르게 적용할 수 있는 방법입니다. 하지만 현재 앱이 창업 팀을 꾸려서 실 서비스를 하려고 하는 입장인데, expo-push-service에 의존하는게 어떤지에 대해서 의문점이 있습니다. 실무의 경우 App 단을 react native로 운영하고 있을떄 두 가지 선택지에서 초기 창업시에 어떤 것을 선택하고 무엇이 장기적인 입장에서 옳은 방향일까요?

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
손준석 댓글 2 좋아요 0 조회수 122

백엔드도 궁금합니다!

미해결

아바타 커뮤니티앱 만들기 (React Native Expo)

안녕하세요! 클라이언트 부분 열심히 반복 수강 중에 있습니다 🙂 코드가 굉장히 깔끔하고 가독성이 좋아서 서버 부분도 배우고 싶더라구요! 서버 구성과 효율적인 코드를 작성하는 법도 배우고 싶다는 마음이 커지더라구요! 혹시 추후에 서버 강의를 진행하실 예정이 없으실까요? 없으시다면,,, 기존 강의에 있던 맛집 어플 서버 부분만 참고해도 충분할까요...?

  • react-native
  • typescript
  • expo
  • react-hook-form
  • react-query
Kim Da Bin 댓글 1 좋아요 1 조회수 127

ios에서 개발중이신 분들은

미해결

React Native with Expo: 제로초에게 제대로 배우기

"ios": { "infoPlist": { "ITSAppUsesNonExemptEncryption": false, "NSLocationWhenInUseUsageDescription": "이 앱은 사용자의 위치를 기반으로 기능을 제공하기 위해 위치 정보가 필요합니다.(Allow $(PRODUCT_NAME) to use your location.)" } }, app.json에서 요 부분 추가 하시고 npm run ios 로 빌드 다시 해보시면 될거에요. 만약에 안되시면, rm -rf ios 명령어로 ios 파일 삭제 후 다시 빌드 해보시면 잘 될겁니다!

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
도도한 불도새 댓글 1 좋아요 1 조회수 105

[질문아님] tabBarLabel 대신 tabBarShowLabel

미해결

React Native with Expo: 제로초에게 제대로 배우기

궁금해서 Gemini에게 물어봤는데요..! tabBarLabel 이 {null}로 반환하는 것과 {""} 빈문자열 넣는 법. 이 두가지 차이점을 물어보다가 아래 tabBarShowLabel 속성이 있다는 걸 알게됐고, 요 속성은 아예 레이아웃 처리가 되지 않는 다는 걸 알게됐습니다. 부모 <Tabs /> 에 한번만 쓰면 하위에 다 적용되는 구조입니다. tabBarShowLabel: false, 일단 저는 이 속성 사용해보고있는데, 좋은 것 같아용 ㅎㅎ 제로초님은 이걸 사용하지 않으시던데, 혹시나 요거 사용하면 안되는거면 댓글 달아주세용ㅎㅎ

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
  • tabbarshowlabel
  • tabbarlabel
도도한 불도새 댓글 1 좋아요 1 조회수 91

댓글 버튼 하단에 고정되지 않는 이슈

미해결

아바타 커뮤니티앱 만들기 (React Native Expo)

node 버전 : v24.11.1 [id.tsx] 파일입니다. 현재 상세 페이지를 가면 아래와 같이 댓글 버튼이 상단으로 올라오는 현상이 생겼습니다. 또한 답글 남기기를 눌러도 focus는 댓글 input으로 되지만, 화면처럼 스크롤이 내려가는 현상은 안나타납니다. npx expo start를 이용하여, 실기기로 테스트한겁니다! import AuthRoute from "@/components/AuthRoute"; import CommentItem from "@/components/CommentItem"; import FeedItem from "@/components/FeedItem"; import InputField from "@/components/InputField"; import { colors } from "@/constants"; import useCreateComment from "@/hooks/queries/useCreateComment"; import useGetPost from "@/hooks/queries/useGetPost"; import useKeyboard from "@/hooks/useKeyboard"; import { useLocalSearchParams } from "expo-router"; import { Fragment, useRef, useState } from "react"; import { Keyboard, KeyboardAvoidingView, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View, } from "react-native"; import { SafeAreaView, useSafeAreaInsets, } from "react-native-safe-area-context"; export default function PostDetailScreen() { const { id } = useLocalSearchParams(); const { data: post, isPending, isError } = useGetPost(Number(id)); const createComment = useCreateComment(); const [content, setContent] = useState(""); const scrollRef = useRef<ScrollView | null>(null); const inputRef = useRef<TextInput | null>(null); const [parentCommentId, setParentCommentId] = useState<number | null>(null); const { isKeyboardVisible } = useKeyboard(); const insets = useSafeAreaInsets(); if (isPending || isError) { return <></>; } const handleReply = (commentId: number) => { setParentCommentId(commentId); inputRef.current?.focus(); }; const handleCancelReply = () => { setParentCommentId(null); Keyboard.dismiss(); }; const handleSubmitComment = () => { const commentData = { postId: post.id, content: content, }; if (parentCommentId) { createComment.mutate({ ...commentData, parentCommentId }); setContent(""); handleCancelReply(); return; } if (parentCommentId) { createComment.mutate({ ...commentData, parentCommentId }); setContent(""); handleCancelReply(); return; } createComment.mutate(commentData); setContent(""); setTimeout(() => { scrollRef.current?.scrollToEnd(); }, 500); }; return ( <AuthRoute> <SafeAreaView style={styles.container} edges={["right", "left", "bottom"]} > <KeyboardAvoidingView contentContainerStyle={styles.awareScrollViewContainer} behavior="height" keyboardVerticalOffset={ Platform.OS === "ios" || isKeyboardVisible ? 100 : insets.bottom } > <ScrollView ref={scrollRef} style={{ marginBottom: 75 }} contentContainerStyle={styles.scrollViewContainer} > <View style={{ marginTop: 12 }}> <FeedItem post={post} isDetail /> <Text style={styles.commentCount}> 댓글 {post.commentCount}개 </Text> </View> {post.comments?.map((comment) => ( <Fragment key={comment.id}> <CommentItem parentCommentId={parentCommentId} onReply={() => handleReply(comment.id)} onCancelReply={handleCancelReply} comment={comment} /> {comment.replies.map((reply) => ( <CommentItem key={reply.id} comment={reply} isReply /> ))} </Fragment> ))} </ScrollView> <View style={styles.commentInputContainer}> <InputField ref={inputRef} value={content} returnKeyType="send" onSubmitEditing={handleSubmitComment} onChangeText={(text) => setContent(text)} placeholder={ parentCommentId ? "답글 남기는중..." : "댓글을 남겨보세요." } rightChild={ <Pressable disabled={!content} style={styles.inputButtonContainer} onPress={handleSubmitComment} > <Text style={styles.inputButtonText}>등록</Text> </Pressable> } /> </View> </KeyboardAvoidingView> </SafeAreaView> </AuthRoute> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: colors.WHITE, }, awareScrollViewContainer: { flex: 1, backgroundColor: colors.GRAY_200, }, scrollViewContainer: { backgroundColor: colors.GRAY_200, }, commentCount: { marginTop: 12, backgroundColor: colors.WHITE, paddingVertical: 12, paddingHorizontal: 16, fontSize: 16, fontWeight: "bold", }, commentInputContainer: { width: "100%", borderTopColor: colors.GRAY_200, borderTopWidth: StyleSheet.hairlineWidth, backgroundColor: colors.WHITE, padding: 16, bottom: 0, position: "absolute", }, inputButtonContainer: { backgroundColor: colors.ORANGE_600, padding: 8, borderRadius: 5, }, inputButtonText: { color: colors.WHITE, fontWeight: "bold", }, });

  • react-native
  • typescript
  • expo
  • react-hook-form
  • react-query
댓글 1 좋아요 0 조회수 112

SafeAreaView 적용 기준 문의

해결됨

아바타 커뮤니티앱 만들기 (React Native Expo)

아바타 만들기 /post 에는 글쓰기, 수정, 상세화면에 대한 정의가 되어 있습니다. /post/[id].tsx /post/write.tsx /post/update/[id].tsx 글쓰기와 수정은 SafeAreaView를 적용하지 않았는데 상세보기에서 적용한 이유와 어떤 기준에 의해 적용하였는지 문의 드립니다. /post/_layout.tsx 내에 Stack.Screen에서 headerShown : false일때 SafeAreaView를 적용하는걸로 생각했는데 그렇지 않은것 같습니다. 감사합니다.

  • react-native
  • typescript
  • expo
  • react-hook-form
  • react-query
컴공과 댓글 2 좋아요 0 조회수 108

스크린 옵션 아이콘

해결됨

아바타 커뮤니티앱 만들기 (React Native Expo)

피그마 디자인에서는 < 를 사용했는데 강의에서는 Foundation "home"을 사용했어요! 의도하신걸까요? 디자인이 최종 시안이라던가.. 그게 아니라면 강의는 동영상이니 바꾸는데 공수가 많이 들어가니 피그마에서 아이콘 바꿔주셔도 좋을것같습니다! 잡담으로 저는 자바스프링 백엔드로 시작해서 jQuery/Angular/Vue/React/Next를 풀스택으로 쓰는 회사들로 이직하면서 최종적으로 코틀린스프링을 메인스택으로 하고 있는데요. 취미/공부/사이드 프로젝트로 Next.js랑 Flutter 배우고 이번에 RN배우는데 강사님의 코드퀄리티나 강의력이 깔끔한것 같아서 잘 보고 있습니다ㅎㅎ 25년 초에 릴리즈한 강의인데 26년에도 미션이나 질문에도 답 잘 달아주셔서 감사합니다.

  • react-native
  • typescript
  • expo
  • react-hook-form
  • react-query
보키 댓글 2 좋아요 0 조회수 82

[Note] 안드로이드 네비게이션 헤더 이슈 안내

미해결

아바타 커뮤니티앱 만들기 (React Native Expo)

❗ 질문 작성시 꼭 참고해주세요 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다. 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github 을 첨부해주세요. 개발중인 OS, ReactNative, Node 버전 등의 개발환경 을 알려주셔야합니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. 에러 잘라서 올리시면 안됩니다! (에러 일부만 자르거나 일부만 복사하지말아주세요) 지금은 잘 되는 것 같은데(제가 아직 안드로이드 애뮬레이터로만 테스트 한 상태이긴 하지만) 혹시 지금도 안되는지 궁금합니다!

  • react-native
  • typescript
  • expo
  • react-hook-form
  • react-query
하윤 댓글 2 좋아요 0 조회수 101

ActionSheet

미해결

아바타 커뮤니티앱 만들기 (React Native Expo)

ellipsis-vertical 클릭시 강의와 같이 실제 아이폰 actionsheet 처럼 보이지 않고 다른 style이 입혀진듯하게 보이고있습니다. 에러코드는 없습니다. 노드 : 20.19.6 시뮬레이터 : iOS 26.2 ReactNative : 0.81.5 작업중인 시뮬레이터 화면 강의 시뮬레이터 화면 import { colors } from "@/constants"; import useAuth from "@/hooks/queries/useAuth"; import type { Post } from "@/types"; import { useActionSheet } from "@expo/react-native-action-sheet"; import { Ionicons, MaterialCommunityIcons, Octicons } from "@expo/vector-icons"; import React from "react"; import { Pressable, StyleSheet, Text, View } from "react-native"; import Profile from "./Profile"; interface FeedItemProps { post: Post; } function FeedItem({ post }: FeedItemProps) { const { auth } = useAuth(); const likeUsers = post.likes?.map((like) => Number(like.userId)); const isLiked = likeUsers?.includes(Number(auth.id)); const { showActionSheetWithOptions } = useActionSheet(); const handlePressOption = () => { const options = ["삭제", "수정", "취소"]; showActionSheetWithOptions({ options }, (selectedIndex?: number) => { console.log("selectedIndex", selectedIndex); switch (selectedIndex) { case 0: //삭제 break; case 1: //수정 break; case 2: break; default: break; } }); }; return ( <View style={styles.container}> <View style={styles.contentContainer}> <Profile imageUri={post.author.imageUri} nickname={post.author.nickname} createdAt={post.createdAt} onPress={() => {}} option={ auth.id === post.author.id && ( <Ionicons name="ellipsis-vertical" size={24} color={colors.BLACK} onPress={handlePressOption} /> ) } /> <Text style={styles.title}>{post.title}</Text> {/* numberOfLines 게시글 내용 3줄까지만 보이게 */} <Text numberOfLines={3} style={styles.description}> {post.description} </Text> </View> <View style={styles.menuContainer}> <Pressable style={styles.menu}> <Octicons name={isLiked ? "heart-fill" : "heart"} size={16} color={isLiked ? colors.ORANGE_600 : colors.BLACK} /> <Text style={isLiked ? styles.activeMenuText : styles.menuText}> {post.likes.length || "좋아요"} </Text> </Pressable> <Pressable style={styles.menu}> <MaterialCommunityIcons name="comment-processing-outline" size={16} color={colors.BLACK} /> <Text style={styles.menuText}>{post.commentCount || "댓글"}</Text> </Pressable> <Pressable style={styles.menu}> <Ionicons name="eye-outline" size={16} color={colors.BLACK} /> <Text style={styles.menuText}>{post.viewCount}</Text> </Pressable> </View> </View> ); } const styles = StyleSheet.create({ container: { backgroundColor: colors.WHITE, }, contentContainer: { padding: 16, }, menuContainer: { flexDirection: "row", alignItems: "center", justifyContent: "space-around", borderTopColor: colors.GRAY_300, borderTopWidth: StyleSheet.hairlineWidth, }, title: { fontSize: 18, color: colors.BLACK, fontWeight: "600", marginVertical: 8, }, description: { fontSize: 16, color: colors.BLACK, marginBottom: 14, }, menu: { flexDirection: "row", alignItems: "center", justifyContent: "center", paddingVertical: 16, width: "33%", gap: 4, }, menuText: { fontSize: 14, color: colors.GRAY_700, }, activeMenuText: { fontWeight: "500", color: colors.ORANGE_600, }, }); export default FeedItem; import queryClient from "@/api/queryClient"; import useAuth from "@/hooks/queries/useAuth"; import { ActionSheetProvider } from "@expo/react-native-action-sheet"; import { QueryClientProvider } from "@tanstack/react-query"; import { Stack } from "expo-router"; import { useEffect } from "react"; import "react-native-reanimated"; import Toast from "react-native-toast-message"; export const unstable_settings = { anchor: "(tabs)", }; export default function RootLayout() { return ( <ActionSheetProvider> <QueryClientProvider client={queryClient}> <RootNavigator /> <Toast /> </QueryClientProvider> </ActionSheetProvider> ); } function RootNavigator() { const { auth } = useAuth(); useEffect(() => { auth.id && Toast.show({ type: "success", text1: `${auth.nickname ?? "회원"}님 환영합니다!`, }); }, [auth.id]); return ( <Stack> <Stack.Screen name="(tabs)" options={{ headerShown: false }} /> <Stack.Screen name="auth" options={{ headerShown: false }} /> <Stack.Screen name="post" options={{ headerShown: false }} /> <Stack.Screen name="modal" options={{ presentation: "modal", title: "Modal" }} /> </Stack> ); }

  • react-native
  • typescript
  • expo
  • react-hook-form
  • react-query
wodnd0284 댓글 1 좋아요 0 조회수 109

Location.getCurrentPositionAsync({}); 에러

미해결

React Native with Expo: 제로초에게 제대로 배우기

npm ls react 19.1.0 npm ls react-native 0.81.5 npm ls expo 54.0.27 버전을 알려주시면 질문자분과 동일한 환경에서 답변 드릴 수 있습니다. 에뮬레이터에 location도 설정했는데 왜 마크표시를 누르면 아래 에러가 발생하는걸까요.. 빌드 지우고 다시 설치하고도 해봤습니다. LOG getMyLocation granted ERROR [Error: Uncaught (in promise, id: 1) Error: Current location is unavailable. Make sure that location services are enabled] Code: construct.js 2 | var setPrototypeOf = require("./setPrototypeOf.js"); 3 | function _construct(t, e, r) { > 4 | if (isNativeReflectConstruct()) return Reflect.construct.apply(null, arguments); | ^ 5 | var o = [null]; 6 | o.push.apply(o, e); 7 | var p = new (t.bind.apply(t, o))(); Call Stack construct (<native>) apply (<native>) _construct (node_modules/@babel/runtime/helpers/construct.js:4:65) Wrapper (node_modules/@babel/runtime/helpers/wrapNativeSuper.js:15:23) construct (<native>) _callSuper (node_modules/@babel/runtime/helpers/callSuper.js:5:108) constructor (node_modules/expo-modules-core/src/errors/CodedError.ts:11:5)

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
dev 댓글 3 좋아요 1 조회수 175

인기 태그

인프런 TOP Writers

주간 인기글