react-native-design

Create a shared value with useSharedValue, derive styles with useAnimatedStyle, and animate using withSpring or withTiming. These run as worklets on the UI thread for 60fps animations without blocking the JavaScript thread.

Define a ParamList type mapping each screen name to its params, then pass it to createNativeStackNavigator<RootStackParamList>(). Use NavigatorScreenParams for nested navigators and CompositeScreenProps for screens spanning multiple navigators.

Yes, use Platform.select() to provide different style values per platform, such as shadow properties on iOS versus elevation on Android. You can also check Platform.OS directly for conditional logic like font families.

Jank occurs when animations run on the JavaScript thread instead of the UI thread. Move animations into Reanimated worklets, avoid complex logic inside worklets, and use runOnJS only for callbacks that must update React state.

Use Gesture.Pan(), Gesture.Pinch(), or Gesture.Tap() from react-native-gesture-handler wrapped in GestureDetector. Store starting positions in a context shared value on gesture start, then update translation values during onUpdate events.

Use FlatList for long or dynamic lists because it virtualizes rendering and only mounts visible items. ScrollView with map renders all children at once, causing memory and performance problems with large datasets.