React Native TypeScript Rules: Best Practices for Expo Mobile App Development

### Context
These rules provide a comprehensive framework for building robust React Native applications with TypeScript and Expo. They emphasize type safety, modularity, performance tuning, and consistent styling to create maintainable, efficient mobile apps that leverage React Navigation for seamless user experiences and Expo for streamlined deployment.

### Rules
**Code Organization and Style:**
- Craft short, fully-typed TypeScript code prioritizing functional components and hooks instead of classes.
- Design components to be modular, reusable, and easy to maintain.
- Group related files by feature, such as components, custom hooks, and styles in dedicated directories.

**Naming Standards:**
- Apply camelCase to variables and functions (e.g., `fetchUserData`, `onPressHandler`).
- Use PascalCase for component names (e.g., `ProfileScreen`, `MessageList`).
- Name directories in lowercase with hyphens (e.g., `profile-screen`, `message-list`).

**TypeScript Integration:**
- Implement TypeScript across all components, preferring interfaces for props and state definitions.
- Activate strict mode in `tsconfig.json` for rigorous type checking.
- Eliminate `any` types in favor of explicit, precise typing.
- Define functional components using `React.FC<Props>` with typed props.

**Performance Enhancements:**
- Limit `useEffect`, `useState`, and intensive calculations within render cycles.
- Wrap stable-prop components in `React.memo()` to avoid redundant renders.
- Tune FlatList with `removeClippedSubviews`, `maxToRenderPerBatch`, and `windowSize` for better scrolling.
- Apply `getItemLayout` in FlatLists for fixed-height items to boost efficiency.
- Avoid inline arrow functions in `renderItem` or callbacks to minimize re-renders.

**UI and Styling Guidelines:**
- Standardize styles via `StyleSheet.create()` or styled-components for consistency.
- Build responsive layouts accounting for varied screen dimensions and rotations.
- Employ optimized image libraries like `react-native-fast-image` for faster loading.

**Core Best Practices:**
- Adhere to React Native's threading principles for fluid UI interactions.
- Leverage Expo's EAS Build and OTA updates for reliable deployments.
- Implement React Navigation following its recommended patterns for routing and deep links.

### Examples
**Functional Component with Types:**
```tsx
import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';

interface UserCardProps {
  name: string;
  age: number;
}

const UserCard: React.FC<UserCardProps> = React.memo(({ name, age }) => {
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    setIsLoaded(true);
  }, []);

  return (
    <View style={styles.card}>
      <Text>{`${name}, ${age} years`}</Text>
    </View>
  );
});

const styles = StyleSheet.create({
  card: { padding: 16, margin: 8 },
});

export default UserCard;
```

**Optimized FlatList:**
```tsx
import { FlatList } from 'react-native';

const MyList: React.FC = () => (
  <FlatList
    data={items}
    renderItem={({ item }) => <ItemComponent item={item} />}
    keyExtractor={(item) => item.id}
    removeClippedSubviews
    maxToRenderPerBatch={10}
    windowSize={10}
    getItemLayout={(data, index) => ({ length: 80, offset: 80 * index, index })}
  />
);
```

**Feature Directory Structure:**
```
src/
  features/
    user-profile/
      UserProfile.tsx
      useUserData.ts
      styles.ts
    chat-screen/
      ChatScreen.tsx
      useMessages.ts
      styles.ts