SerinaNya/KLALB
1
1
Fork 0
forked from KNEMC/KLALB
Code Pull Requests Activity

add ui-ux-pro-max skill for javafx design

Browse Source
This commit is contained in:
SerinaNya
2026-08-27 23:29:27 +08:00
parent c3172a04b1
commit c907e52478
172 changed files with 88283 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.agents/skills/ui-ux-pro-max/data/stacks/react-native.csv
+52
View File
@@ -0,0 +1,52 @@
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
1 No Category Guideline Description Do Don't Code Good Code Bad Severity Docs URL Applies To Status Verified At
2 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
3 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
4 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
5 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
6 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
7 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
8 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
9 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
10 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
11 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
12 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
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
14 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
15 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
16 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
17 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
18 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
19 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
20 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
21 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
22 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
23 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
24 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
25 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
26 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
27 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
28 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
29 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
30 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
31 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
32 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
33 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
34 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
35 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
36 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
37 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
38 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
39 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
40 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
41 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
42 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
43 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
44 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
45 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
46 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
47 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
48 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
49 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
50 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
51 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
52 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