Roadmap to a Native Feel on Mobile Devices

[andrew-bierman]

Our app started off with a strong focus on web development, which has been great for rapid prototyping and cross-platform compatibility. However, we've noticed that in the shift to native platforms, especially iOS, our app still carries a bit of that web feel. We want our users on mobile devices to enjoy an experience that feels proper on their device.

To make this happen, we're planning to dial up our focus on native features and components that really bring out the best in our app on these platforms. Here's a casual rundown of what we're looking to tackle next. This isn't just about fixing what's broken; it's about elevating the entire user experience to match the expectations of our iOS and Android users, while keeping the cross-platform magic alive with React Native and Expo.

This involves adopting specific components and practices that improve navigation, interactivity, and overall app usability. Here's our roadmap for the next phase of development, aiming to address UI inconsistencies, enhance user interaction, and integrate platform-specific functionalities leveraging both React Native capabilities and Expo modules where applicable.

The list below is just for brainstorming, we should split this into subtasks as we begin work.

• Fix Broken UI throughout Native App: Ensure all UI components render correctly and are fully functional across different devices and screen sizes. #685
• Implement React Navigation with Tabs: Use bottom tabs for enhanced routing and navigation within the app.
• Bottom Sheets and Native Modals: Implement bottom sheets for presenting content or actions and native modals where appropriate for a more engaging user experience. #776
• Use Zeego / @react-native-menu/menu for Menus: Implement native menus for actions and selections, providing a familiar interaction pattern for users.
• Implement Context Menus for Feed Cards: Utilize context menus to offer additional options or actions on long press. Zeego also provides support for this. #719
• Large Titles with react-navigation: Incorporate large titles in stack navigators, especially for top-level views. #752
• Swipeable Modal Overlays: Implement swipeable modal overlays for presenting content. See tamagui sheet.
• Segmented Control for Toggling Views: Integrate segmented controls for switching between different views or filtering content. A custom implementation or third-party library may be required as Expo lacks a specific library. #751
• Pull to Refresh with RefreshControl: Adopt the pull-to-refresh pattern for lists or scrollable areas. #714
• Action Sheets with ActionSheetIOS: Use native action sheets for presenting a list of options. For Expo, use the expo-action-sheet library.
• Alerts that Reflect Standards: Ensure the use of the Alert component aligns with expected standards, with appropriate titles, messages, and button configurations. See tamagui Alert with native set to true. #713
• Haptic Feedback Implement haptic feedback for certain actions. Use expo-haptics. #755
• Deep Linking with Universal Links: Enable deep linking to support direct navigation from web links to specific app screens. Expo supports Universal Links through its Linking API. #756
• Biometric Authentication (Face ID and Touch ID): Integrate biometric authentication for secure and convenient user authentication. Use expo-local-authentication. #780
• Safe Area Handling with react-native-safe-area-context: Properly handle safe areas, especially on newer models with notches and home indicators. This is crucial for UI elements' visibility. #761
• StatusBar Customization: Customize the status bar style and visibility to match the look and feel. expo-status-bar package. #762

This lineup is all about making our app not just function well, but feel right at home on iOS and Android.

[andrew-bierman]

• Swap date picker on create trip for this one https://github.com/dohomi/tamagui-kitchen-sink?tab=readme-ov-file and ensure it uses a proper native date picker on the native side and the nice tamagui one on web