Framework Best Practices

1. Framework: Routing

Using expo-router allows you to manage navigation with built-in abstractions instead of manually handling screen state. This follows React Native conventions, supports nested screens, back navigation, and deep linking, and avoids reinventing routing logic.

Code Implementation

in frontend/app/_layout.tsx

2. {Framework}: {Platform-Specific Styling}

Using the Platform package for styling modifications on iOS, Android and Web. The package retains a single source of truth for the component while avoiding duplicating code. This uses React Native idioms and creates layouts that are maintainable and platform aware.

Code Implementation

in frontend/components/Header.tsx

For resizing according to the mobile mode of either Android or ios

3. {Framework}: {Responsive Layouts (useWindowDimensions)}

Using useWindowDimensions allows the UI to adapt dynamically to different screen sizes on web and mobile. This avoids hardcoding dimensions, follows React Native best practices, and ensures consistent layouts across devices.

Code Implementation

in frontend/components/Header.tsx