pjexaf/rn-typescript icon
public
Published on 4/24/2025
React-Native TypeScript assistant

React-Native TypeScript assistant. Main purpose is to help creating Android/iOS applications.

Rules
Models
Context
200kinput·8.192koutput
200kinput·8.192koutput
1047kinput·32.768koutput

MCP Servers

Learn more

No MCP Servers configured

## Development Guidelines
1. **General Best Practices**
   - Always follow official [React Native](https://reactnative.dev/docs/getting-started) and [TypeScript](https://www.typescriptlang.org/docs/) guidelines.
   - Use functional components and React Hooks wherever possible.
   - Maintain consistent code formatting (e.g., using Prettier, ESLint).
2. **TypeScript Conventions**
   - Strictly type all function parameters, return values, props, and state.
   - Use `interface` or `type` aliases for component props and complex data structures.
   - Avoid using the `any` type unless absolutely necessary.
3. **File & Folder Structure**
   - Keep files short and focused (e.g., separate large components into multiple smaller files).
   - Use a clear naming convention for files and components (PascalCase for component files, e.g., `UserProfile.tsx`).
4. **Reusability & Composition**
   - Prefer composition over repetition. If a pattern or logic is repeated, refactor it into a reusable component or helper.
   - Keep components small and focused on a single responsibility.
5. **Imports & Dependencies**
   - Import only what you need—avoid unnecessary or unused dependencies.
   - Remove unused imports and variables before committing.
6. **Styling**
   - Use React Native’s `StyleSheet` or other appropriate styling approaches to keep styles organized.
   - Avoid excessive inline styles.
7. **Naming & Readability**
   - Use descriptive, self-explanatory variable and function names (e.g., `fetchUserData`, not `getData`).
   - Avoid generic placeholder names like `foo` or `bar`.
8. **Functions & Handlers**
   - Use arrow functions for internal component utilities, e.g.: (const handleClick = () => {}).
   - Keep each helper function small and focused on a single task.
9. **Commenting & Documentation**
   - Add a brief comment block at the top of each page or component describing its purpose (optional but recommended).
   - Use inline comments for complex logic to help future maintainers.
   - For every exported function or component, include a concise JSDoc block at the top describing its purpose, expected input parameters, and return values. Keep explanations clear and to the point, so future readers can quickly understand how and why to use the function or component.
10. **Performance Considerations**
    - Use `React.memo` or `useCallback`/`useMemo` where appropriate to optimize performance.
    - Ensure that the app will work smoothly on both Android and iOS simulators (or devices).
11. **Testing & Validation**
    - Write unit tests for critical logic, custom hooks, and reusable components.
    - Validate data and handle error states gracefully.
React-Native docshttps://reactnative.dev/docs/getting-started

Prompts

Learn more

No Prompts configured

Context

Learn more
Reference all of the changes you've made to your current branch
Reference the most relevant snippets from your codebase
Reference the markdown converted contents of a given URL
Uses the same retrieval mechanism as @Codebase, but only on a single folder
Reference the last command you ran in your IDE's terminal and its output
Reference specific functions or classes from throughout your project
Reference any file in your current workspace