gluestack-ui-v5:performance

Use FlatList instead of ScrollView with map for lists of 10+ items, since FlatList virtualizes and only renders visible rows. Memoize list item components with React.memo and pass stable callbacks via useCallback to prevent rerenders.

Use Reanimated worklets with useSharedValue and withTiming or withSpring so animations run on the native UI thread. Avoid the legacy Animated API from react-native, which runs on the JavaScript thread and can cause jank.

Always use Gluestack wrapper components from @/components/ui/* instead of direct react-native imports when a wrapper exists. Wrappers like KeyboardAvoidingView handle platform differences automatically, while direct imports may break on web.

NativeWind v5 uses Tailwind v4 CSS-first configuration and requires pinning lightningcss to exactly 1.30.1 to avoid build failures. UniWind processes CSS at Metro/Babel time with no PostCSS step, which can reduce build times for simpler Expo-only projects.

Mismatched lightningcss versions cause CSS transformation errors and build failures. Pin lightningcss to exactly 1.30.1 in both package.json overrides and resolutions, and keep postcss.config.js minimal with @tailwindcss/postcss.

Wrap components in React.memo when they receive stable props but their parent rerenders frequently. Use useCallback for functions passed to child components so children do not rerender due to new function references on every render.