# [🔴 Let's build Uber 2.0 with REACT NATIVE! (Navigation, Redux, Tailwind CSS & Google Autocomplete)](https://www.youtube.com/watch?v=taPz40VmyzQ&ab_channel=SonnySangha)
- [x] Introduction
- [x] Build Showcase
- [x] Build Explanation
- [x] Setting up Expo
- [x] Initialising the Build
- [x] Setting up and Implementing ==Redux==
- [x] Building the HomeScreen Component
- [x] Building the NavOptions Component
- [x] Implementing ==React Native Navigation==
- [x] Implementing ==Google Autocomplete Library==
- [x] Building the MapScreen Component
- [x] Building the Map Component
- [x] Building the RideOptionsCard Component (1/2)
- [x] Building the NavigateCard Component (1/2)
- [x] Implementing the ==Directions API==
- [x] Building the NavFavourites Component
- [x] Implementing Keyboard Avoiding View
- [x] Building the NavigateCard Component (2/2)
- [x] Building the RideOptionsCard Component (2/2)
- [x] Implementing the Travel Time Calculation
- [x] Implementing the Price Calculation
- [x] Building the Menu Button
- [x] Bug Fixing
- [x] Final Build Demo
- [x] Outro

## 程式碼的了解

## 面試
我會使用 React Navigation 建立不同畫面之間的導航關係，例如在應用程式中的不同頁面之間進行切換，或者在不同導覽層次之間進行導航。

我會使用 tailwindcss-react-native CSS 框架來更加輕鬆地設計和構建 UI。

我會使用 React Redux 應用程式的狀態管理庫，來管理和共享應用程式的狀態。
舉例來說在這裡我的 Redux Store 有兩個 Reducer。

import { configureStore } from '@reduxjs/toolkit'
import basketReducer from "./features/basketSlice"
import restaurantReducer from "./features/restaurantSlice"

export const store = configureStore({
  reducer: {
    basket: basketReducer,
    restaurant: restaurantReducer,
  },
})

分別為 處理購物籃（basket）與 處理餐廳(Restaurant)的狀態管理。

購物籃（basket）的狀態管理主要有 加入購物車與移除商品

export const basketSlice = createSlice({
  name: "basket",
  initialState,
  reducers: {
    addToBasket: (state, action) => {
    },
    removeFromBasket: (state, action) => {
    },
  },
});


餐廳(Restaurant) 的狀態管理主要有設置餐廳名稱

export const restaurantSlice = createSlice({
  name: "restaurant",
  initialState,
  reducers: {
    setRestaurant: (state, action) => {
      state.restaurant = action.payload;
    },
  },
});


會用的 Hook 有
* useRoute：獲取當前路由的資訊，包括傳遞的參數。
* useEffect：在組件渲染完成後執行的副作用函式。在這裡，它用於在組件加載時分派 setRestaurant 動作，將餐廳的詳細資訊存儲到 Redux store 中。
* useLayoutEffect：在組件的佈局效果更新之前同步執行的副作用函式。在這裡，它用於隱藏頁面的標題欄。
* useNavigation()：使用 useNavigation 鉤子獲取導航器的實例，以便在組件中進行導航操作。
* useDispatch 和 useSelector：這些來自 react-redux 模組的鉤子，用於在 Redux 中分發操作和選擇狀態。

我會使用第三方 CMS 平台 Sanity 。

* Currency：來自 react-currency-formatter 模組的組件，用於格式化貨幣數字的顯示。
* XCircleIcon：這是從 react-native-heroicons/solid 模組中引入的組件，用於顯示一個 X 形狀的圖示。
* Progress：這是從 react-native-progress 模組中引入的進度條組件，用於顯示進度條。
* MapView 和 Marker：這些來自 react-native-maps 模組的組件，用於顯示地圖和標記。
* Animatable：這是從 react-native-animatable 模組中引入的動畫效果庫，用於給元素添加動畫效果。
* 在 SafeAreaView 組件內部，有三個元素：
* Animatable.Image：這個組件使用了 react-native-animatable 提供的 slideInUp 動畫效果，顯示一個圖片元素，並指定了圖片的源和尺寸。
* Animatable.Text：這個組件也使用了 slideInUp 動畫效果，顯示一段文字，並指定了文字的樣式和內容。
* Progress.Circle：這是一個圓形的進度條組件，用於顯示一個無限循環的進度指示器，顏色為白色。