Always use native navigators instead of JS-based ones. Native navigators use platform APIs (UINavigationController on iOS, Fragment on Android) for better perfo
This skill guides developers to use native navigators instead of JavaScript-based ones for mobile app navigation. Native navigators leverage platform APIs like UINavigationController on iOS and Fragment on Android, delivering smoother performance, native gestures, and system-level integrations such as automatic large titles and proper safe area handling. The result is a more responsive user experience with better compatibility across device behaviors and accessibility features.
This skill is essential for mobile app developers focused on React Native or Expo Router who want to optimize navigation performance and UX. It suits performance marketers and growth leads overseeing app experiences where UI responsiveness and smooth transitions directly impact user retention and conversion rates. Agency strategists managing multi-platform apps also benefit by avoiding navigation pitfalls that degrade perceived app quality.
Practitioners first identify the navigation type—stack or tabs—and replace JS-based navigators with their native counterparts, such as switching from `@react-navigation/stack` to `@react-navigation/native-stack` for stacks. Next, they implement native tab navigators like `react-native-bottom-tabs` or Expo Router’s native tabs instead of JS tabs. They then prefer native header options over custom header components to leverage platform-native features like large titles and search bars. Finally, they verify that native behaviors such as scroll-to-top on tab tap and proper safe area usage function correctly to ensure seamless user experiences.
Is native navigation always faster than JS-based navigation? Yes, because native navigators run transitions and gestures on the UI thread, reducing frame drops. Can I customize headers with native navigators? Yes, but it’s best to use native header options like title and search bar settings instead of custom React components to retain performance and platform integration. Does using native tabs affect scroll behavior? On iOS, native tabs automatically adjust content insets on the first ScrollView for correct scrolling behind translucent tab bars.
Attach this skill to a Metaflow agent task that audits or refactors mobile app navigation codebases, focusing on React Native or Expo Router projects. The agent will identify instances where JS navigators are used and recommend or apply native navigator replacements for stacks, tabs, and headers. Expect actionable insights that improve navigation performance, platform behavior, and accessibility compliance. For more on integrating navigation skills within Metaflow, see...
For broader context, see our roundup of claude marketing skills, and read Claude Code workflows for marketing agencies for related setup guidance.