Animated navigation transitions smooth and not janky

Navigation jank is the first thing users notice and the last thing developers test. When a destination screen starts rendering a 500-row FlatList or firing a data fetch during the transition animation, the JS thread is saturated and the animation drops below 60 FPS. ISO 25010:2011 performance-efficiency covers exactly this: degraded responsiveness under normal operating conditions. Users experiencing jank in the first 300ms of a screen transition — when the UI is most visually exposed — rate apps lower in store reviews and uninstall at higher rates than users who experience equivalent latency hidden behind a loading state.

Defer heavy rendering until after the navigation animation completes using InteractionManager.runAfterInteractions or a short useFocusEffect delay:

import { InteractionManager } from 'react-native'
import { useFocusEffect } from '@react-navigation/native'

function HeavyListScreen() {
  const [ready, setReady] = React.useState(false)

  useFocusEffect(
    React.useCallback(() => {
      const task = InteractionManager.runAfterInteractions(() => {
        setReady(true)
      })
      return () => task.cancel()
    }, [])
  )

  if (!ready) return <SkeletonPlaceholder />
  return <FlatList data={data} renderItem={renderItem} />
}

InteractionManager.runAfterInteractions waits for all in-flight animations to complete before firing — more precise than a fixed timeout. Use a skeleton placeholder during the wait so the transition visually lands on real content, not a blank screen.