ui-ux-pro-max-skill/cli/assets/data/stacks/react-native.csv

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