No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL,Applies To,Status,Verified At
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,react-native 0.86.x (official active line),active,2026-08-13
2,Components,Keep components small,Single responsibility principle,Split into smaller components,Large monolithic components,<Header /><Content /><Footer />,500+ line component,Medium,,react-native 0.86.x (official active line),active,2026-08-13
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,,react-native 0.86.x (official active line),active,2026-08-13
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,,react-native 0.86.x (official active line),active,2026-08-13
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,react-native 0.86.x (official active line),active,2026-08-13
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,,react-native 0.86.x (official active line),active,2026-08-13
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,react-native 0.86.x (official active line),active,2026-08-13
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,react-native 0.86.x (official active line),active,2026-08-13
9,Styling,Use responsive dimensions,Scale for different screens,Dimensions or useWindowDimensions,Fixed pixel values,useWindowDimensions(),width: 375,Medium,,react-native 0.86.x (official active line),active,2026-08-13
10,Navigation,Use React Navigation,Standard navigation library,React Navigation for routing,Manual navigation management,createStackNavigator(),Custom navigation state,Medium,https://reactnavigation.org/,react-native 0.86.x (official active line),active,2026-08-13
11,Navigation,Type navigation params,Type-safe navigation,Typed navigation props,Untyped navigation,"navigation.navigate<RootStackParamList>('Home', { id })","navigation.navigate('Home', { id })",Medium,,react-native 0.86.x (official active line),active,2026-08-13
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/,react-native 0.86.x (official active line),active,2026-08-13
13,Navigation,Handle back button,Android back button handling,useFocusEffect with BackHandler,Ignore back button,BackHandler.addEventListener,No back handler,High,https://reactnative.dev/docs/backhandler,react-native 0.86.x (official active line),active,2026-08-13
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,,react-native 0.86.x (official active line),active,2026-08-13
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,,react-native 0.86.x (official active line),active,2026-08-13
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,,react-native 0.86.x (official active line),active,2026-08-13
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,,react-native 0.86.x (official active line),active,2026-08-13
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,react-native 0.86.x (official active line),active,2026-08-13
19,Lists,Provide keyExtractor,Unique keys for list items,keyExtractor with stable ID,Index as key,keyExtractor={(item) => item.id},"keyExtractor={(_, index) => index}",High,https://reactnative.dev/docs/flatlist#keyextractor,react-native 0.86.x (official active line),active,2026-08-13
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,https://reactnative.dev/docs/optimizing-flatlist-configuration,react-native 0.86.x (official active line),active,2026-08-13
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,,react-native 0.86.x (official active line),active,2026-08-13
22,Lists,Implement windowSize,Control render window,Smaller windowSize for memory,Default windowSize for large lists,windowSize={5},windowSize={21} for huge lists,Medium,,react-native 0.86.x (official active line),active,2026-08-13
23,Performance,Use React.memo,Prevent unnecessary re-renders,memo for pure components,No memoization,export default memo(MyComponent),export default MyComponent,Medium,,react-native 0.86.x (official active line),active,2026-08-13
24,Performance,Use useCallback for handlers,Stable function references,useCallback for props,New function on every render,"useCallback(() => {}, [deps])",() => handlePress(),Medium,,react-native 0.86.x (official active line),active,2026-08-13
25,Performance,Use useMemo for expensive ops,Cache expensive calculations,useMemo for heavy computations,Recalculate every render,"useMemo(() => expensive(), [deps])",const result = expensive(),Medium,,react-native 0.86.x (official active line),active,2026-08-13
26,Performance,Avoid anonymous functions in JSX,Prevent re-renders,Named handlers or useCallback,Inline arrow functions,onPress={handlePress},onPress={() => doSomething()},Medium,,react-native 0.86.x (official active line),active,2026-08-13
27,Performance,Use bundled Hermes by default,Hermes is bundled with React Native and enabled by default,Keep the bundled Hermes default unless an explicit compatibility need requires opt-out,Opt out of Hermes by default,Use the Hermes version bundled with React Native,Override the JavaScript engine without a verified requirement,Medium,https://reactnative.dev/architecture/bundled-hermes,react-native 0.86.x (official active line),active,2026-08-13
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/,react-native 0.86.x (official active line),active,2026-08-13
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,https://reactnative.dev/docs/images#network-images,react-native 0.86.x (official active line),active,2026-08-13
30,Images,Use resizeMode,Control image scaling,resizeMode cover contain,Stretch images,"resizeMode=""cover""",No resizeMode,Low,,react-native 0.86.x (official active line),active,2026-08-13
31,Forms,Use controlled inputs,State-controlled form fields,value + onChangeText,Uncontrolled inputs,<TextInput value={text} onChangeText={setText} />,<TextInput defaultValue={text} />,Medium,,react-native 0.86.x (official active line),active,2026-08-13
32,Forms,Handle keyboard,Manage keyboard visibility,KeyboardAvoidingView,Content hidden by keyboard,"<KeyboardAvoidingView behavior=""padding"">",No keyboard handling,High,https://reactnative.dev/docs/keyboardavoidingview,react-native 0.86.x (official active line),active,2026-08-13
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,,react-native 0.86.x (official active line),active,2026-08-13
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,react-native 0.86.x (official active line),active,2026-08-13
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,,react-native 0.86.x (official active line),active,2026-08-13
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,,react-native 0.86.x (official active line),active,2026-08-13
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/,react-native 0.86.x (official active line),active,2026-08-13
38,Animation,Run on UI thread,worklets for smooth animation,Run animations on UI thread,JS thread animations,runOnUI(() => {}),Animated on JS thread,High,https://reactnative.dev/docs/performance,react-native 0.86.x (official active line),active,2026-08-13
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/,react-native 0.86.x (official active line),active,2026-08-13
40,Async,Handle loading states,Show loading indicators,ActivityIndicator during load,Empty screen during load,{isLoading ? <ActivityIndicator /> : <Content />},No loading state,Medium,,react-native 0.86.x (official active line),active,2026-08-13
41,Async,Use an error boundary for rendering failures,React error boundaries replace a crashed subtree with fallback UI,Catch rendering errors at a feature boundary and provide recovery,Let a render error unmount the whole app,<ErrorBoundary fallback={<ErrorView />}><Content /></ErrorBoundary>,Render the feature tree with no error boundary,High,https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary,react-native 0.86.x (official active line),active,2026-08-13
42,Async,Cancel async operations,Cleanup on unmount,AbortController or cleanup,Memory leaks from async,useEffect cleanup,No cleanup for subscriptions,High,https://reactnative.dev/docs/global-AbortController,react-native 0.86.x (official active line),active,2026-08-13
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,react-native 0.86.x (official active line),active,2026-08-13
44,Accessibility,Use accessibility roles,Semantic meaning,accessibilityRole for elements,Wrong roles,"accessibilityRole=""button""",No role for button,Medium,,react-native 0.86.x (official active line),active,2026-08-13
45,Accessibility,Support screen readers,Test with TalkBack/VoiceOver,Test with screen readers,Skip accessibility testing,Regular TalkBack testing,No screen reader testing,High,https://reactnative.dev/docs/accessibility#testing-talkback-support,react-native 0.86.x (official active line),active,2026-08-13
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/,react-native 0.86.x (official active line),active,2026-08-13
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,https://reactnative.dev/docs/running-on-device,react-native 0.86.x (official active line),active,2026-08-13
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/,react-native 0.86.x (official active line),active,2026-08-13
49,Native,Use native modules carefully,Bridge has overhead,Batch native calls,Frequent bridge crossing,Batch updates,Call native on every keystroke,High,https://reactnative.dev/docs/turbo-native-modules-introduction,react-native 0.86.x (official active line),active,2026-08-13
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/,react-native 0.86.x (official active line),active,2026-08-13
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,react-native 0.86.x (official active line),active,2026-08-13