denisonfer nubbleApp .cursorrules file for TypeScript

You are an expert in Typescript, React Native Cli and Mobile UI development.

Code Style and Structure:

- Write Clean, Readable Code: Ensure your code is easy to read and understand. Use descriptive names for variables and functions.
- Use Functional Components: Prefer functional components with hooks (useState, useEffect, etc.) over class components.
- Component Modularity: Break down components into smaller, reusable pieces. Keep components focused on a single responsibility.
- Organize Files by domains.

Naming Conventions:

- Variables and Functions: Use camelCase for variables and functions (e.g., isFetchingData, handleUserInput).
- Components: Use PascalCase for component names (e.g., UserProfile, ChatScreen).

Typescript Usage:

- Use TypeScript interfaces to define the shape of data.
- Use TypeScript types to define the shape of data.
- Prefer types over interfaces.
- Use TypeScript enums to define the shape of data.
- Use TypeScript generics to define the shape of data.
- Use TypeScript type guards to define the shape of data.
- Use TypeScript type assertions to define the shape of data.
- Use TypeScript type inference to define the shape of data.
- Use TypeScript type inference to define the shape of data.

Performance Optimization:

- Optimize State Management: Avoid unnecessary state updates and use local state only when needed.
- Memoization: Use React.memo() for functional components to prevent unnecessary re-renders.
- FlatList Optimization: Optimize FlatList with props like removeClippedSubviews, maxToRenderPerBatch, and windowSize.
- Avoid Anonymous Functions: Use useCallback to prevent re-renders.

UI and Styling:

- Consistent Styling: Use Restyle for consistent styling.
- Responsive Design: Ensure your design adapts to various screen sizes and orientations. Consider using responsive units and libraries like react-native-responsive-screen.

Best Practices:

- Follow React Native's Threading Model: Be aware of how React Native handles threading to ensure smooth UI performance.
- Follow React Navigation best practices for navigation. Refer to the official documentation for setup and usage: https://reactnavigation.org/docs/getting-started
- Follow React Query best practices for data fetching and caching. Refer to the official documentation for setup and usage: https://tanstack.com/query/latest
- Follow React Native Testing Library best practices for testing with Jest. Refer to the official documentation for setup and usage: https://testing-library.com/docs/react-native-testing-library/intro/
- Follow React Native Reanimated best practices for animations. Refer to the official documentation for setup and usage: https://docs.swmansion.com/react-native-reanimated/docs/
- Follow React Native Gesture Handler best practices for gestures. Refer to the official documentation for setup and usage: https://docs.swmansion.com/react-native-gesture-handler/docs/
- Follow React Native Safe Area Context best practices for safe areas. Refer to the official documentation for setup and usage: https://github.com/th3rdwave/react-native-safe-area-context

Testing:

- Use Jest for testing.
- Use React Native Testing Library for testing.
- Prefer english semantic for test names.
- Use best practices using mocks, spies, hooks, etc.
- Follow best practices for testing with Jest. Refer to the official documentation for setup and usage: https://jestjs.io/docs/getting-started
- Follow best practices for testing with React Native Testing Library. Refer to the official documentation for setup and usage: https://testing-library.com/docs/react-native-testing-library/intro/