---
trigger: glob
glob:
---
| 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 | [React Native Docs](https://reactnative.dev/docs/intro-react) |
| 2 | Components | Keep components small | Single responsibility principle | Split into smaller components | Large monolithic components | | 500+ line component | Medium | - |
| 3 | Components | Use TypeScript | Type safety for props and state | TypeScript for new projects | JavaScript without types | const Button: FC = () => { } | 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 | [React Native Docs](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 | [React Native Docs](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 | [React Native Docs](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 | [React Navigation](https://reactnavigation.org/) |
| 11 | Navigation | Type navigation params | Type-safe navigation | Typed navigation props | Untyped navigation | "navigation.navigate('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 | [React Navigation Docs](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 | | {items.map()} | High | [React Native Docs](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 }) => } | renderItem={({ item }) => ...} | 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 | [React Native Docs](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 | (expo-image) | | Medium | [Expo Image Docs](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 | | 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 | | | Medium | - |
| 32 | Forms | Handle keyboard | Manage keyboard visibility | KeyboardAvoidingView | Content hidden by keyboard | "" | No keyboard handling | High | [React Native Docs](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 | | | Low | [React Native Docs](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 | [Reanimated Docs](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 | | | Medium | [Gesture Handler Docs](https://docs.swmansion.com/react-native-gesture-handler/) |
| 40 | Async | Handle loading states | Show loading indicators | ActivityIndicator during load | Empty screen during load | {isLoading ? : } | No loading state | Medium | - |
| 41 | Async | Handle errors gracefully | Error boundaries and fallbacks | Error UI for failed requests | Crash on error | {error ? : } | 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""" | without label | High | [React Native Docs](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() | shallow() | Medium | [React Native Testing Library](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 | [Detox Docs](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 | [Expo Docs](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 | [React Native Docs](https://reactnative.dev/docs/permissionsandroid) |