Drawer - Expo router v3 - SDK50

expo router V3 template 로 설치를 하고, Drawer Navigation 효과를 내려면, Documents에서 처럼 아래 3가지 추가 라이브러리를 설치하고도 몇가지 경험을 적어 봅니다.  Docs 참고(https://docs.expo.dev/router/advanced/drawer/)

npx expo install @react-navigation/drawer react-native-gesture-handler react-native-reanimated

 

경험상 문제는 babel.config.js 에 다음 처럼 수정합니다.

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins:['react-native-reanimated/plugin',]
  };
};

Docs 에서는 babel-expo-preset 가 자동 설정 된다고 했는데, 나의 경우는 되지 않았으며, 다른 참고에는 "expo-router/babel" 도 추가 하라고 하였으나, 이는 SDK50 에 포함되었다고 log 파일로 나오며, 에러 나므로 지워야 합니다. 위의 경우 처럼 설정하면 잘 진행됩니다.

 

참고로 paackage.json 입니다.

{
  "name": "expo_router_beto",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "test": "jest --watchAll"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^14.0.0",
    "@react-navigation/drawer": "^6.6.15",
    "@react-navigation/native": "^6.0.2",
    "expo": "~50.0.13",
    "expo-font": "~11.10.3",
    "expo-linking": "~6.2.2",
    "expo-router": "~3.4.8",
    "expo-splash-screen": "~0.26.4",
    "expo-status-bar": "~1.11.1",
    "expo-system-ui": "~2.9.3",
    "expo-web-browser": "~12.8.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.73.5",
    "react-native-gesture-handler": "~2.14.0",
    "react-native-reanimated": "~3.6.2",
    "react-native-safe-area-context": "4.8.2",
    "react-native-screens": "~3.29.0",
    "react-native-web": "~0.19.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.2.45",
    "jest": "^29.2.1",
    "jest-expo": "~50.0.4",
    "react-test-renderer": "18.2.0",
    "typescript": "^5.1.3"
  },
  "private": true
}

 

관련 스크린은 app 폴더 밑에 (drawer) 폴더를 만들고, 템플릿에서 설치된 (tab)폴더를 참고해서 _layout.tsx 와 스크린파일을 설치한다. 물론, 이 (drawer) 폴더가 초기 설정되려면 app/_layout.tsx에 연결해 놓는다.

function RootLayoutNav() {
  const colorScheme = useColorScheme();

  return (
    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
      <Stack>
        <Stack.Screen name="(drawer)" options={{ headerShown: false }} />
        <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
      </Stack>
    </ThemeProvider>
  );