Tạo Điều Hướng Đồ Họa Động Trong Expo React Native

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

const DrawerSceneWrapper = ({ children }: { children: ReactNode }) => {
  const progress = useDrawerProgress();

  const animatedStyled = useAnimatedStyle(() => ({
    transform: [
      { scale: interpolate(progress.value, [0, 1], [1, 0.8]) },
      { translateX: interpolate(progress.value, [0, 1], [0, 170]) },
      { rotateY: `${interpolate(progress.value, [0, 1], [0, -25])}deg` }
    ],
    borderRadius: 20
  }));

  return <Animated.View style={[styles.container, animatedStyled]}>
    {children}
  </Animated.View>;
};

<SafeAreaView style={{ flex: 1, backgroundColor: "transparent" }}>
  {/* Phần Hồ Sơ */}
  <TouchableOpacity style={styles.userContainer}>
    <Image source={{ uri: "USER_AVATAR_URL" }} style={styles.userImage} />
    <View>
      <Text style={styles.userName}>Haider Mukhtar</Text>
      <Text style={styles.userEmail}>haider@example.com</Text>
    </View>
  </TouchableOpacity>

  {/* Các Mục Điều Hướng */}
  <DrawerContentScrollView {...props}>
    <DrawerItemList {...props} />
  </DrawerContentScrollView>

  {/* Nút Đăng Xuất */}
  <TouchableOpacity style={styles.logoutButton}>
    <Ionicons name="log-out" size={24} color="#FFFFFF" />
    <Text style={styles.logoutText}>Logout</Text>
  </TouchableOpacity>
</SafeAreaView>

<GestureHandlerRootView style={{ flex: 1 }}>
  <Drawer
    drawerContent={(props) => <CustomDrawerContent {...props} />}
    screenOptions={{
      headerShown: false,
      drawerActiveBackgroundColor: "#33b3a6",
      drawerInactiveBackgroundColor: "transparent",
      drawerActiveTintColor: "#FFFFFF",
      drawerInactiveTintColor: "#FFFFFF",
      overlayColor: "transparent",
      drawerStyle: {
        backgroundColor: "transparent",
        width: "60%",
        paddingTop: 40,
      },
      drawerLabelStyle: {
        marginLeft: -6,
        fontSize: 18,
        fontFamily: "PoppinsMedium500",
        color: "#FFFFFF",
      },
      drawerItemStyle: {
        marginLeft: -16,
        marginRight: 35,
        borderTopLeftRadius: 0,
        borderBottomLeftRadius: 0,
        borderTopRightRadius: 50,
        borderBottomRightRadius: 50,
      },
      sceneStyle: {
        backgroundColor: "#26867C",
      },
    }}
  >
    <Drawer.Screen 
      name="index" 
      options={{ 
        title: "Home",
        drawerIcon: ({ color }) => <Ionicons name="home" color={color} />
      }} 
    />
    {/* Thêm các màn hình khác ở đây */}
  </Drawer>
</GestureHandlerRootView>

const HomeScreen = () => {
  const navigation = useNavigation();
  return (
    <DrawerSceneWrapper>
      <View style={styles.header}>
        <TouchableOpacity 
          onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
        >
          <Ionicons name="menu" size={28} color="#000" />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>Home</Text>
      </View>
      {/* Nội dung màn hình */}
    </DrawerSceneWrapper>
  );
}