No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
1,Components,Use functional components,Hooks-based components are standard,Functional components with hooks,Class components,const App = () => { },class App extends Component,Medium,https://reactnative.dev/docs/intro-react
2,Components,Keep components small,Single responsibility principle,Split into smaller components,Large monolithic components,<Header /><Content /><Footer />,500+ line component,Medium,
3,Components,Use TypeScript,Type safety for props and state,TypeScript for new projects,JavaScript without types,const Button: FC<Props> = () => { },const Button = (props) => { },Medium,
4,Components,Colocate component files,Keep related files together,Component folder with styles,Flat structure,components/Button/index.tsx styles.ts,components/Button.tsx styles/button.ts,Low,
5,Styling,Use StyleSheet.create,Optimized style objects,StyleSheet for all styles,Inline style objects,StyleSheet.create({ container: {} }),style={{ margin: 10 }},High,https://reactnative.dev/docs/stylesheet
6,Styling,Avoid inline styles,Prevent object recreation,Styles in StyleSheet,Inline style objects in render,style={styles.container},"style={{ margin: 10, padding: 5 }}",Medium,
7,Styling,Use flexbox for layout,React Native uses flexbox,flexDirection alignItems justifyContent,Absolute positioning everywhere,flexDirection: 'row',position: 'absolute' everywhere,Medium,https://reactnative.dev/docs/flexbox
8,Styling,Handle platform differences,Platform-specific styles,Platform.select or .ios/.android files,Same styles for both platforms,"Platform.select({ ios: {}, android: {} })",Hardcoded iOS values,Medium,https://reactnative.dev/docs/platform-specific-code
9,Styling,Use responsive dimensions,Scale for different screens,Dimensions or useWindowDimensions,Fixed pixel values,useWindowDimensions(),width: 375,Medium,
10,Navigation,Use React Navigation,Standard navigation library,React Navigation for routing,Manual navigation management,createStackNavigator(),Custom navigation state,Medium,https://reactnavigation.org/
11,Navigation,Type navigation params,Type-safe navigation,Typed navigation props,Untyped navigation,"navigation.navigate<RootStackParamList>('Home', { id })","navigation.navigate('Home', { id })",Medium,
12,Navigation,Use deep linking,Support URL-based navigation,Configure linking prop,No deep link support,linking: { prefixes: [] },No linking configuration,Medium,https://reactnavigation.org/docs/deep-linking/
13,Navigation,Handle back button,Android back button handling,useFocusEffect with BackHandler,Ignore back button,BackHandler.addEventListener,No back handler,High,
14,State,Use useState for local state,Simple component state,useState for UI state,Class component state,"const [count, setCount] = useState(0)",this.state = { count: 0 },Medium,
15,State,Use useReducer for complex state,Complex state logic,useReducer for related state,Multiple useState for related values,useReducer(reducer initialState),5+ useState calls,Medium,
16,State,Use context sparingly,Context for global state,Context for theme auth locale,Context for frequently changing data,ThemeContext for app theme,Context for list item data,Medium,
17,State,Consider Zustand or Redux,External state management,Zustand for simple Redux for complex,useState for global state,create((set) => ({ })),Prop drilling global state,Medium,
18,Lists,Use FlatList for long lists,Virtualized list rendering,FlatList for 50+ items,ScrollView with map,<FlatList data={items} />,<ScrollView>{items.map()}</ScrollView>,High,https://reactnative.dev/docs/flatlist
19,Lists,Provide keyExtractor,Unique keys for list items,keyExtractor with stable ID,Index as key,keyExtractor={(item) => item.id},"keyExtractor={(_, index) => index}",High,
20,Lists,Optimize renderItem,Memoize list item components,React.memo for list items,Inline render function,renderItem={({ item }) => <MemoizedItem item={item} />},renderItem={({ item }) => <View>...</View>},High,
21,Lists,Use getItemLayout for fixed height,Skip measurement for performance,getItemLayout when height known,Dynamic measurement for fixed items,"getItemLayout={(_, index) => ({ length: 50, offset: 50 * index, index })}",No getItemLayout for fixed height,Medium,
22,Lists,Implement windowSize,Control render window,Smaller windowSize for memory,Default windowSize for large lists,windowSize={5},windowSize={21} for huge lists,Medium,
23,Performance,Use React.memo,Prevent unnecessary re-renders,memo for pure components,No memoization,export default memo(MyComponent),export default MyComponent,Medium,
24,Performance,Use useCallback for handlers,Stable function references,useCallback for props,New function on every render,"useCallback(() => {}, [deps])",() => handlePress(),Medium,
25,Performance,Use useMemo for expensive ops,Cache expensive calculations,useMemo for heavy computations,Recalculate every render,"useMemo(() => expensive(), [deps])",const result = expensive(),Medium,
26,Performance,Avoid anonymous functions in JSX,Prevent re-renders,Named handlers or useCallback,Inline arrow functions,onPress={handlePress},onPress={() => doSomething()},Medium,
27,Performance,Use Hermes engine,Improved startup and memory,Enable Hermes in build,JavaScriptCore for new projects,hermes_enabled: true,hermes_enabled: false,Medium,https://reactnative.dev/docs/hermes
28,Images,Use expo-image,Modern performant image component for React Native,"Use expo-image for caching, blurring, and performance",Use default Image for heavy lists or unmaintained libraries,<Image source={url} cachePolicy='memory-disk' /> (expo-image),<FastImage source={url} />,Medium,https://docs.expo.dev/versions/latest/sdk/image/
29,Images,Specify image dimensions,Prevent layout shifts,width and height for remote images,No dimensions for network images,<Image style={{ width: 100 height: 100 }} />,<Image source={{ uri }} /> no size,High,
30,Images,Use resizeMode,Control image scaling,resizeMode cover contain,Stretch images,"resizeMode=""cover""",No resizeMode,Low,
31,Forms,Use controlled inputs,State-controlled form fields,value + onChangeText,Uncontrolled inputs,<TextInput value={text} onChangeText={setText} />,<TextInput defaultValue={text} />,Medium,
32,Forms,Handle keyboard,Manage keyboard visibility,KeyboardAvoidingView,Content hidden by keyboard,"<KeyboardAvoidingView behavior=""padding"">",No keyboard handling,High,https://reactnative.dev/docs/keyboardavoidingview
33,Forms,Use proper keyboard types,Appropriate keyboard for input,keyboardType for input type,Default keyboard for all,"keyboardType=""email-address""","keyboardType=""default"" for email",Low,
34,Touch,Use Pressable,Modern touch handling,Pressable for touch interactions,TouchableOpacity for new code,<Pressable onPress={} />,<TouchableOpacity onPress={} />,Low,https://reactnative.dev/docs/pressable
35,Touch,Provide touch feedback,Visual feedback on press,Ripple or opacity change,No feedback on press,android_ripple={{ color: 'gray' }},No press feedback,Medium,
36,Touch,Set hitSlop for small targets,Increase touch area,hitSlop for icons and small buttons,Tiny touch targets,hitSlop={{ top: 10 bottom: 10 }},44x44 with no hitSlop,Medium,
37,Animation,Use Reanimated,High-performance animations,react-native-reanimated,Animated API for complex,useSharedValue useAnimatedStyle,Animated.timing for gesture,Medium,https://docs.swmansion.com/react-native-reanimated/
38,Animation,Run on UI thread,worklets for smooth animation,Run animations on UI thread,JS thread animations,runOnUI(() => {}),Animated on JS thread,High,
39,Animation,Use gesture handler,Native gesture recognition,react-native-gesture-handler,JS-based gesture handling,<GestureDetector>,<View onTouchMove={} />,Medium,https://docs.swmansion.com/react-native-gesture-handler/
40,Async,Handle loading states,Show loading indicators,ActivityIndicator during load,Empty screen during load,{isLoading ? <ActivityIndicator /> : <Content />},No loading state,Medium,
41,Async,Handle errors gracefully,Error boundaries and fallbacks,Error UI for failed requests,Crash on error,{error ? <ErrorView /> : <Content />},No error handling,High,
42,Async,Cancel async operations,Cleanup on unmount,AbortController or cleanup,Memory leaks from async,useEffect cleanup,No cleanup for subscriptions,High,
43,Accessibility,Add accessibility labels,Describe UI elements,accessibilityLabel for all interactive,Missing labels,"accessibilityLabel=""Submit form""",<Pressable> without label,High,https://reactnative.dev/docs/accessibility
44,Accessibility,Use accessibility roles,Semantic meaning,accessibilityRole for elements,Wrong roles,"accessibilityRole=""button""",No role for button,Medium,
45,Accessibility,Support screen readers,Test with TalkBack/VoiceOver,Test with screen readers,Skip accessibility testing,Regular TalkBack testing,No screen reader testing,High,
46,Testing,Use React Native Testing Library,Component testing,render and fireEvent,Enzyme or manual testing,render(<Component />),shallow(<Component />),Medium,https://callstack.github.io/react-native-testing-library/
47,Testing,Test on real devices,Real device behavior,Test on iOS and Android devices,Simulator only,Device testing in CI,Simulator only testing,High,
48,Testing,Use Detox for E2E,End-to-end testing,Detox for critical flows,Manual E2E testing,detox test,Manual testing only,Medium,https://wix.github.io/Detox/
49,Native,Use native modules carefully,Bridge has overhead,Batch native calls,Frequent bridge crossing,Batch updates,Call native on every keystroke,High,
50,Native,Use Expo when possible,Simplified development,Expo for standard features,Bare RN for simple apps,expo install package,react-native link package,Low,https://docs.expo.dev/
51,Native,Handle permissions,Request permissions properly,Check and request permissions,Assume permissions granted,PermissionsAndroid.request(),Access without permission check,High,https://reactnative.dev/docs/permissionsandroid
52,Architecture,Enable Fabric renderer,New rendering system for synchronous UI updates and React 18 concurrent features,Enable newArchEnabled in gradle.properties and Podfile,Rely on old async bridge for performance-critical UI,"// android/gradle.properties: newArchEnabled=true // ios/Podfile: ENV['RCT_NEW_ARCH_ENABLED'] = '1'",// Old architecture with bridge serialization,High,https://reactnative.dev/architecture/fabric-renderer
53,Architecture,Use TurboModules for native modules,Type-safe lazy-loaded native modules via JSI without JSON serialization,Create TurboModules with Codegen specs,Use legacy Native Modules in new projects,"export interface Spec extends TurboModule { multiply(a: number, b: number): number; }","NativeModules.MyModule.multiply(a, b) // bridge serialization",High,https://reactnative.dev/docs/turbo-native-modules-introduction
54,Navigation,Use Expo Router for file-based routing,Automatic deep linking with file-system based routes in /app directory,Structure with _layout.tsx and file-based routes,Manual route configuration in large Expo apps,"app/_layout.tsx app/index.tsx app/[id].tsx // automatic routes",// Manual NavigationContainer with all routes defined,Medium,https://docs.expo.dev/router/introduction
55,Animation,Use Reanimated 3 with Fabric renderer,Automatic Fabric support for smooth animations and gestures,Enable Fabric for Reanimated layout animations,Mix old and new architecture animations inconsistently,"<Animated.View layout={Layout.springify()}> // Fabric enabled",// LayoutAnimation with bridge delays,Medium,https://docs.swmansion.com/react-native-reanimated/
56,Animation,Use Reanimated shared element transitions,Smooth shared element animations between screens,sharedTransitionTag for cross-screen element animations,Manual position interpolation for shared elements,"<Animated.Image sharedTransitionTag=""hero-image"" /> // both screens",// Measure layout and manually animate position,Low,https://docs.swmansion.com/react-native-reanimated/docs/shared-element-transitions/overview
57,Architecture,Migrate to Bridgeless mode,Remove legacy bridge for TurboModules and Fabric only communication,Enable bridgeless for full New Architecture benefits,Keep bridge alongside TurboModules long-term,// Fully bridgeless with TurboModules and Fabric,// Hybrid mode with bridge and TurboModules,Medium,https://reactnative.dev/docs/new-architecture-intro
58,State,Leverage React 18 concurrent features,startTransition and useDeferredValue for responsive UI,startTransition for non-urgent updates,Block UI with synchronous heavy updates,"startTransition(() => { setExpensiveState(newValue); });",setExpensiveState(newValue); // blocks interaction,Medium,https://react.dev/reference/react/startTransition
59,Performance,Use expo-image for optimized images,"Modern image component with caching, blurhash, and transitions",expo-image for all image loading,React Native Image for network images,"<Image source={{ uri }} placeholder={blurhash} transition={200} />","<Image source={{ uri }} /> // no placeholder or caching",High,https://docs.expo.dev/versions/latest/sdk/image/
60,Animation,Use useSharedValue over useState for animations,Shared values run on UI thread avoiding JS bridge overhead,useSharedValue for animated values,useState for animation state,"const scale = useSharedValue(1); scale.value = withSpring(1.2);","const [scale, setScale] = useState(1); // triggers re-render",High,https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/your-first-animation
61,Animation,Master withSpring and withTiming,Core animation functions for smooth interpolation,withSpring for natural feel withTiming for precise control,Manual Animated.timing configuration,"scale.value = withSpring(1, { damping: 15, stiffness: 100 });","Animated.timing(value, { duration: 300 }).start();",Medium,https://docs.swmansion.com/react-native-reanimated/docs/animations/withSpring
62,Animation,Use useAnimatedStyle for reactive styles,Automatically updates styles when shared values change,useAnimatedStyle with worklet function,Inline style binding to animated values,"const style = useAnimatedStyle(() => ({ transform: [{ scale: scale.value }] }));","style={{ transform: [{ scale: animatedValue }] }} // not reactive",High,https://docs.swmansion.com/react-native-reanimated/docs/core/useAnimatedStyle
63,Animation,Define worklet functions properly,Worklets run on UI thread for 60/120fps animations,Add 'worklet' directive for UI thread execution,Run animation logic on JS thread,"const animate = () => { 'worklet'; return scale.value * 2; };","const animate = () => { return scale.value * 2; }; // JS thread",High,https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/worklets
64,Animation,Leverage native thread for complex animations,Reanimated 3 runs entirely on native thread rivaling pure native performance,Complex gesture-driven animations on UI thread,Heavy animation calculations on JS thread,"runOnUI(() => { 'worklet'; position.value = withSpring(target); })();","requestAnimationFrame(() => { setPosition(target); }); // JS frame drops",High,https://docs.swmansion.com/react-native-reanimated/docs/threading/runOnUI
65,Rendering,Integrate react-native-skia for custom rendering,Skia provides GPU-accelerated 2D graphics for complex visuals,Use Skia for custom charts shapes and effects,Canvas API for complex graphics,"import { Canvas, Circle } from '@shopify/react-native-skia';","<View><Canvas ref={canvasRef} /></View> // no Skia",Medium,https://shopify.github.io/react-native-skia/
66,Rendering,Create custom shader effects with Skia,Write GLSL shaders for advanced visual effects,Skia shaders for gradients blur and distortion,Multiple layered views for visual effects,"const shader = Skia.RuntimeEffect.Make(glslCode); <Shader source={shader} />","<View style={{ opacity: 0.5 }}><BlurView /></View> // expensive layers",Medium,https://shopify.github.io/react-native-skia/docs/shaders/overview
67,Rendering,Use Skia Canvas for performant drawing,Direct GPU rendering bypasses React Native view hierarchy,Skia Canvas for data visualization and custom UI,SVG or react-native-svg for dynamic graphics,"<Canvas style={{ flex: 1 }}><Path path={chartPath} /></Canvas>","<Svg><Path d={pathData} /></Svg> // slower for complex paths",Medium,https://shopify.github.io/react-native-skia/docs/canvas/overview
68,Rendering,Compare Skia vs standard Views for use case,Skia excels at complex graphics but standard Views better for simple UI,Skia for charts games custom graphics,Skia for simple buttons and layouts,"// Complex chart: <Canvas><Path /><Circle /></Canvas>","// Simple UI: <Canvas><RoundedRect /></Canvas> // overkill",Low,https://shopify.github.io/react-native-skia/
69,Gestures,Use Gesture composition in Gesture Handler 2.x,Compose multiple gestures with Gesture.Race Simultaneous Exclusive,Compose gestures for complex interactions,Nested gesture handlers with event propagation,"const gesture = Gesture.Simultaneous(panGesture, pinchGesture);","<GestureHandler onPan={}><GestureHandler onPinch={} /></GestureHandler>",Medium,https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/composed-gestures
70,Gestures,Implement pan pinch rotate with Gesture Handler,Native gesture recognition for smooth 60/120fps interactions,Gesture.Pan Gesture.Pinch Gesture.Rotation,onTouchMove for gesture handling,"const pan = Gesture.Pan().onUpdate((e) => { x.value = e.translationX; });","<View onTouchMove={(e) => handleMove(e)} /> // JS thread bottleneck",High,https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture
71,Gestures,Handle simultaneous gestures properly,Allow multiple gestures to work together,Gesture.Simultaneous for combined interactions,Blocking gestures that should work together,"Gesture.Simultaneous(Gesture.Pan(), Gesture.Pinch()) // zoom and move","<PanGestureHandler><PinchGestureHandler></PinchGestureHandler></PanGestureHandler> // conflict",Medium,https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/composed-gestures
72,Gestures,Configure gesture exclusivity correctly,Prevent gesture conflicts with proper exclusivity,Gesture.Exclusive for prioritized gestures,Conflicting gestures without priority,"Gesture.Exclusive(Gesture.LongPress(), Gesture.Tap()) // long press wins","Both gestures fire causing duplicate actions",Medium,https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/composed-gestures
73,Performance,Optimize for 120Hz ProMotion displays,Modern devices support 120fps requiring optimized frame timing,useFrameCallback for frame-synced updates,setTimeout for animation timing,"useFrameCallback((frameInfo) => { position.value = frameInfo.timestamp * speed; });","setTimeout(() => updatePosition(), 16); // misses frames at 120Hz",High,https://docs.swmansion.com/react-native-reanimated/docs/advanced/useFrameCallback
74,Performance,Use useFrameCallback for frame-perfect animations,Syncs with display refresh rate for smooth animations,useFrameCallback for game loops and physics,requestAnimationFrame in JS thread,"useFrameCallback(() => { 'worklet'; physics.value = calculatePhysics(); });","requestAnimationFrame(() => { setPhysics(calc()); }); // frame drops",High,https://docs.swmansion.com/react-native-reanimated/docs/advanced/useFrameCallback
75,Performance,Enable Hermes for improved performance,Hermes engine provides faster startup and lower memory,Hermes enabled for all production apps,JavaScriptCore in new React Native projects,"// android/gradle.properties: hermesEnabled=true","// hermesEnabled=false // slower startup 2x memory",High,https://reactnative.dev/docs/hermes
76,Performance,Minimize JS/Native bridge crossings,New Architecture reduces but doesn't eliminate bridge overhead,Batch operations and use TurboModules,Frequent small native calls,"// Batch: nativeModule.batchUpdate([item1, item2, item3])","// Chatty: items.forEach(i => nativeModule.update(i))",High,https://reactnative.dev/docs/new-architecture-intro
77,Animation,Configure withSpring physics parameters,Fine-tune spring animations with damping mass stiffness,Adjust spring config for desired feel,Default spring config for all animations,"withSpring(1, { damping: 12, mass: 0.8, stiffness: 120 })","withSpring(1) // generic bouncy feel",Medium,https://docs.swmansion.com/react-native-reanimated/docs/animations/withSpring
78,Animation,Understand spring physics damping mass stiffness,damping controls bounce mass affects weight stiffness sets speed,Tune each parameter for animation type,Random spring values without understanding,"// Snappy: { damping: 20, stiffness: 200 } // Bouncy: { damping: 8, stiffness: 100 }","{ damping: 10, mass: 1, stiffness: 100 } // copied without understanding",Medium,https://docs.swmansion.com/react-native-reanimated/docs/animations/withSpring
79,Animation,Design micro-interactions with 200-300ms timing,Brief feedback animations enhance perceived responsiveness,200-300ms for button feedback and state transitions,500ms+ animations that feel sluggish,"withTiming(1, { duration: 250 }) // snappy feedback","withTiming(1, { duration: 600 }) // feels slow",Medium,https://docs.swmansion.com/react-native-reanimated/docs/animations/withTiming
80,Animation,Combine spring physics with micro-interactions,Springs feel more natural than linear timing for UI feedback,withSpring for touch feedback and state changes,withTiming for all micro-interactions,"const onPressIn = () => { scale.value = withSpring(0.95, { damping: 15 }); };","const onPressIn = () => { scale.value = withTiming(0.95); }; // mechanical feel",Medium,https://docs.swmansion.com/react-native-reanimated/docs/animations/withSpring
