[
{
"No": "1",
"Category": "Components",
"Guideline": "Use functional components",
"Description": "Hooks-based components are standard",
"Do": "Functional components with hooks",
"Don't": "Class components",
"Code Good": "const App = () => { }",
"Code Bad": "class App extends Component",
"Severity": "Medium",
"Docs URL": "https://reactnative.dev/docs/intro-react"
},
{
"No": "2",
"Category": "Components",
"Guideline": "Keep components small",
"Description": "Single responsibility principle",
"Do": "Split into smaller components",
"Don't": "Large monolithic components",
"Code Good": "<Header /><Content /><Footer />",
"Code Bad": "500+ line component",
"Severity": "Medium",
"Docs URL": ""
},
{
"No": "3",
"Category": "Components",
"Guideline": "Use TypeScript",
"Description": "Type safety for props and state",
"Do": "TypeScript for new projects",
"Don't": "JavaScript without types",
"Code Good": "const Button: FC<Props> = () => { }",
"Code Bad": "const Button = (props) => { }",
"Severity": "Medium",
"Docs URL": ""
},
{
"No": "4",
"Category": "Components",
"Guideline": "Colocate component files",
"Description": "Keep related files together",
"Do": "Component folder with styles",
"Don't": "Flat structure",
"Code Good": "components/Button/index.tsx styles.ts",
"Code Bad": "components/Button.tsx styles/button.ts",
"Severity": "Low",
"Docs URL": ""
},
{
"No": "5",
"Category": "Styling",
"Guideline": "Use StyleSheet.create",
"Description": "Optimized style objects",
"Do": "StyleSheet for all styles",
"Don't": "Inline style objects",
"Code Good": "StyleSheet.create({ container: {} })",
"Code Bad": "style={{ margin: 10 }}",
"Severity": "High",
"Docs URL": "https://reactnative.dev/docs/stylesheet"
},
{
"No": "6",
"Category": "Styling",
"Guideline": "Avoid inline styles",
"Description": "Prevent object recreation",
"Do": "Styles in StyleSheet",
"Don't": "Inline style objects in render",
"Code Good": "style={styles.container}",
"Code Bad": "style={{ margin: 10, padding: 5 }}",
"Severity": "Medium",
"Docs URL": ""
},
{
"No": "7",
"Category": "Styling",
"Guideline": "Use flexbox for layout",
"Description": "React Native uses flexbox",
"Do": "flexDirection alignItems justifyContent",
"Don't": "Absolute positioning everywhere",
"Code Good": "flexDirection: 'row'",
"Code Bad": "position: 'absolute' everywhere",
"Severity": "Medium",
"Docs URL": "https://reactnative.dev/docs/flexbox"
},
{
"No": "8",
"Category": "Styling",
"Guideline": "Handle platform differences",
"Description": "Platform-specific styles",
"Do": "Platform.select or .ios/.android files",
"Don't": "Same styles for both platforms",
"Code Good": "Platform.select({ ios: {}, android: {} })",
"Code Bad": "Hardcoded iOS values",
"Severity": "Medium",
"Docs URL": "https://reactnative.dev/docs/platform-specific-code"
},
{
"No": "9",
"Category": "Styling",
"Guideline": "Use responsive dimensions",
"Description": "Scale for different screens",
"Do": "Dimensions or useWindowDimensions",
"Don't": "Fixed pixel values",
"Code Good": "useWindowDimensions()",
"Code Bad": "width: 375",
"Severity": "Medium",
"Docs URL": ""
},
{
"No": "10",
"Category": "Navigation",
"Guideline": "Use React Navigation",
"Description": "Standard navigation library",
"Do": "React Navigation for routing",
"Don't": "Manual navigation management",
"Code Good": "createStackNavigator()",
"Code Bad": "Custom navigation state",
"Severity": "Medium",
"Docs URL": "https://reactnavigation.org/"
},
{
"No": "11",
"Category": "Navigation",
"Guideline": "Type navigation params",
"Description": "Type-safe navigation",
"Do": "Typed navigation props",
"Don't": "Untyped navigation",
"Code Good": "navigation.navigate<RootStackParamList>('Home', { id })",
"Code Bad": "navigation.navigate('Home', { id })",
"Severity": "Medium",
"Docs URL": ""
},
{
"No": "12",
"Category": "Navigation",
"Guideline": "Use deep linking",
"Description": "Support URL-based navigation",
"Do": "Configure linking prop",
"Don't": "No deep link support",
"Code Good": "linking: { prefixes: [] }",
"Code Bad": "No linking configuration",
"Severity": "Medium",
"Docs URL": "https://reactnavigation.org/docs/deep-linking/"
},
{
"No": "13",
"Category": "Navigation",
"Guideline": "Handle back button",
"Description": "Android back button handling",
"Do": "useFocusEffect with BackHandler",
"Don't": "Ignore back button",
"Code Good": "BackHandler.addEventListener",
"Code Bad": "No back handler",
"Severity": "High",
"Docs URL": ""
},
{
"No": "14",
"Category": "State",
"Guideline": "Use useState for local state",
"Description": "Simple component state",
"Do": "useState for UI state",
"Don't": "Class component state",
"Code Good": "const [count, setCount] = useState(0)",
"Code Bad": "this.state = { count: 0 }",
"Severity": "Medium",
"Docs URL": ""
},
{
"No": "15",
"Category": "State",
"Guideline": "Use useReducer for complex state",
"Description": "Complex state logic",
"Do": "useReducer for related state",
"Don't": "Multiple useState for related values",
"Code Good": "useReducer(reducer initialState)",
"Code Bad": "5+ useState calls",
"Severity": "Medium",
"Docs URL": ""
},
{
"No": "16",
"Category": "State",
"Guideline": "Use context sparingly",
"Description": "Context for global state",
"Do": "Context for theme auth locale",
"Don't": "Context for frequently changing data",
"Code Good": "ThemeContext for app theme",
"Code Bad": "Context for list item data",
"Severity": "Medium",
"Docs URL": ""
},
{
"No": "17",
"Category": "State",
"Guideline": "Consider Zustand or Redux",
"Description": "External state management",
"Do": "Zustand for simple Redux for complex",
"Don't": "useState for global state",
"Code Good": "create((set) => ({ }))",
"Code Bad": "Prop drilling global state",
"Severity": "Medium",
"Docs URL": ""
},
{
"No": "18",
"Category": "Lists",
"Guideline": "Use FlatList for long lists",
"Description": "Virtualized list rendering",
"Do": "FlatList for 50+ items",
"Don't": "ScrollView with map",
"Code Good": "<FlatList data={items} />",
"Code Bad": "<ScrollView>{items.map()}</ScrollView>",
"Severity": "High",
"Docs URL": "https://reactnative.dev/docs/flatlist"
},
{
"No": "19",
"Category": "Lists",
"Guideline": "Provide keyExtractor",
"Description": "Unique keys for list items",
"Do": "keyExtractor with stable ID",
"Don't": "Index as key",
"Code Good": "keyExtractor={(item) => item.id}",
"Code Bad": "keyExtractor={(_, index) => index}",
"Severity": "High",
"Docs URL": ""
},
{
"No": "20",
"Category": "Lists",
"Guideline": "Optimize renderItem",
"Description": "Memoize list item components",
"Do": "React.memo for list items",
"Don't": "Inline render function",
"Code Good": "renderItem={({ item }) => <MemoizedItem item={item} />}",
"Code Bad": "renderItem={({ item }) => <View>...</View>}",
"Severity": "High",
"Docs URL": ""
},
{
"No": "21",
"Category": "Lists",
"Guideline": "Use getItemLayout for fixed height",
"Description": "Skip measurement for performance",
"Do": "getItemLayout when height known",
"Don't": "Dynamic measurement for fixed items",
"Code Good": "getItemLayout={(_, index) => ({ length: 50, offset: 50 * index, index })}",
"Code Bad": "No getItemLayout for fixed height",
"Severity": "Medium",
"Docs URL": ""
},
{
"No": "22",
"Category": "Lists",
"Guideline": "Implement windowSize",
"Description": "Control render window",
"Do": "Smaller windowSize for memory",
"Don't": "Default windowSize for large lists",
"Code Good": "windowSize={5}",
"Code Bad": "windowSize={21} for huge lists",
"Severity": "Medium",
"Docs URL": ""
},
{
"No": "23",
"Category": "Performance",
"Guideline": "Use React.memo",
"Description": "Prevent unnecessary re-renders",
"Do": "memo for pure components",
"Don't": "No memoization",
"Code Good": "export default memo(MyComponent)",
"Code Bad": "export default MyComponent",
"Severity": "Medium",
"Docs URL": ""
},
{
"No": "24",
"Category": "Performance",
"Guideline": "Use useCallback for handlers",
"Description": "Stable function references",
"Do": "useCallback for props",
"Don't": "New function on every render",
"Code Good": "useCallback(() => {}, [deps])",
"Code Bad": "() => handlePress()",
"Severity": "Medium",
"Docs URL": ""
},
{
"No": "25",
"Category": "Performance",
"Guideline": "Use useMemo for expensive ops",
"Description": "Cache expensive calculations",
"Do": "useMemo for heavy computations",
"Don't": "Recalculate every render",
"Code Good": "useMemo(() => expensive(), [deps])",
"Code Bad": "const result = expensive()",
"Severity": "Medium",
"Docs URL": ""
},
{
"No": "26",
"Category": "Performance",
"Guideline": "Avoid anonymous functions in JSX",
"Description": "Prevent re-renders",
"Do": "Named handlers or useCallback",
"Don't": "Inline arrow functions",
"Code Good": "onPress={handlePress}",
"Code Bad": "onPress={() => doSomething()}",
"Severity": "Medium",
"Docs URL": ""
},
{
"No": "27",
"Category": "Performance",
"Guideline": "Use Hermes engine",
"Description": "Improved startup and memory",
"Do": "Enable Hermes in build",
"Don't": "JavaScriptCore for new projects",
"Code Good": "hermes_enabled: true",
"Code Bad": "hermes_enabled: false",
"Severity": "Medium",
"Docs URL": "https://reactnative.dev/docs/hermes"
},
{
"No": "28",
"Category": "Images",
"Guideline": "Use expo-image",
"Description": "Modern performant image component for React Native",
"Do": "Use expo-image for caching, blurring, and performance",
"Don't": "Use default Image for heavy lists or unmaintained libraries",
"Code Good": "<Image source={url} cachePolicy='memory-disk' /> (expo-image)",
"Code Bad": "<FastImage source={url} />",
"Severity": "Medium",
"Docs URL": "https://docs.expo.dev/versions/latest/sdk/image/"
},
{
"No": "29",
"Category": "Images",
"Guideline": "Specify image dimensions",
"Description": "Prevent layout shifts",
"Do": "width and height for remote images",
"Don't": "No dimensions for network images",
"Code Good": "<Image style={{ width: 100 height: 100 }} />",
"Code Bad": "<Image source={{ uri }} /> no size",
"Severity": "High",
"Docs URL": ""
}
]
