앱개발 종합반 강의를 들으며, 개인 아이폰으로 expo를 출력하고 있습니다.

이 전단게까지는 문제 없었는데, 3-11 강의를 듣던 도중 stacknavigator를 적용하는 과정에서 app.js코드 스니펫을 복붙한 후 저장하면 ios에서 에러 발생합니다.

웹으로 expo를 출력하면 정상 출력이 되는데, 제 폰인 아이폰12에서 출력하면 에러가 발생합니다.

# 에러메시지

Web Bundling complete 4431ms <-- 웹 정상구동

iOS Bundling failed 1479ms <-- 아이폰은 에러

node_modules\react-native-reanimated\src\index.ts: C:\cording\appdv\expoyj\node_modules\react-native-reanimated\src\index.ts: Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from`.  

 5 | export * from './reanimated1';

 6 | export * from './reanimated2';

> 7 | export * as default from './Animated';

  |    ^^^^^^^^^^^^

 8 |

SyntaxError: C:\cording\appdv\expoyj\node_modules\react-native-reanimated\src\index.ts: Export namespace should 

be first transformed by `@babel/plugin-proposal-export-namespace-from`.

 5 | export * from './reanimated1';

 6 | export * from './reanimated2';

> 7 | export * as default from './Animated';

  |    ^^^^^^^^^^^^

 8 |

보고 계신 화면 전체를 캡처해 주시면, 튜터님들이 빠르게 상황을 상황을 이해할 수 있어요.

작성한 코드 및 에러 메세지

오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.

Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.

Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!

app.js

import React from 'react';
//이제 모든 페이지 컴포넌트들이 끼워져있는 책갈피를 메인에 둘예정이므로
//컴포넌트를 더이상 불러오지 않아도 됩니다.
// import MainPage from './pages/MainPage';
// import DetailPage from './pages/DetailPage';
import { StatusBar } from 'expo-status-bar';


//메인에 세팅할 네비게이션 도구들을 가져옵니다.
import {NavigationContainer} from '@react-navigation/native';
import StackNavigator from './navigation/StackNavigator'


export default function App() {


  console.disableYellowBox = true;


  return ( 
  <NavigationContainer>
    <StatusBar style="black" />
    <StackNavigator/>
 </NavigationContainer>);
}

stacknavigator.js

import React from 'react';
//설치한 스택 네비게이션 라이브러리를 가져옵니다
import { createStackNavigator } from '@react-navigation/stack';


//페이지로 만든 컴포넌트들을 불러옵니다
import DetailPage from '../pages/DetailPage';
import MainPage from '../pages/MainPage';


//스택 네비게이션 라이브러리가 제공해주는 여러 기능이 담겨있는 객체를 사용합니다
//그래서 이렇게 항상 상단에 선언하고 시작하는게 규칙입니다!
const Stack = createStackNavigator();



const StackNavigator = () =>{
    return (


        //컴포넌트들을 페이지처럼 여기게끔 해주는 기능을 하는 네비게이터 태그를 선언합니다.
        //위에서 선언한 const Stack = createStackNavigator(); Stack 변수에 들어있는 태그를 꺼내 사용합니다.
        //Stack.Navigator 태그 내부엔 페이지(화면)를 스타일링 할 수 있는 다양한 옵션들이 담겨 있습니다.
        <Stack.Navigator
            screenOptions={{
                headerStyle: {
                    backgroundColor: "black",
                    borderBottomColor: "black",
                    shadowColor: "black",
                    height:100
                },
                headerTintColor: "#FFFFFF",
                headerBackTitleVisible: false
            }}
            
        >


            {/* 컴포넌트를 페이지로 만들어주는 엘리먼트에 끼워 넣습니다. 이 자체로 이제 페이지 기능을 합니다*/}
            <Stack.Screen name="MainPage" component={MainPage}/>
            <Stack.Screen name="DetailPage" component={DetailPage}/>
        </Stack.Navigator>
    )
}


export default StackNavigator;

\node_modules\react-native-reanimated\src\index.ts

// tree-shaken side effects
import './reanimated2/js-reanimated/global';


// @ts-ignore backward compatibility with treeshaking
export * from './reanimated1';
export * from './reanimated2';
export * as default from './Animated';