{"filename":"nativescript.mdc","content":"---\ndescription: \"NativeScript best practices and patterns for mobile applications\"\nglobs: **/*.tsx, **/*.ts, **/*.vue, **/*.svelte, src/**/*.ts, app/**/*.ts, src/**/*.tsx, app/**/*.tsx, src/**/*.vue, app/**/*.vue, src/**/*.svelte\nalwaysApply: false\n---\n# NativeScript Best Practices\n\n## Code Style and Structure\n- Organize code using modular components and services for maintainability.\n- Use platform-specific files (`.ios.ts`, `.android.ts`) when code exceeds 20 platform-specific lines.\n- When creating custom native code, use a folder structure like `custom-native/index.ios.ts`, `custom-native/index.android.ts`, `custom-native/common.ts`, `custom-native/index.d.ts` to keep platform-specific code organized and easy to import with single import elsewhere, replacing `custom-native` with the name of the custom code.\n  \n## Naming Conventions\n- Prefix platform-specific variables with `ios` or `android` (e.g., `iosButtonStyle`).\n- Name custom components and styles descriptively (`primaryButtonStyle`, `userProfileView`).\n \n## Usage\n- Use `@NativeClass()` when extending native classes when needed\n- For iOS, when extending native classes, always use `static ObjCProtocols = [AnyUIKitDelegate];` to declare custom delegates if a delegate is required or used.\n- For iOS, always retain custom delegate instances to prevent garbage collection. For example, `let delegate = MyCustomDelegate.new() as MyCustomDelegate`, and ensure it is retained in the class scope.\n- Favor `__ANDROID__` and `__APPLE__` for conditional platform code with tree-shaking.\n- Track and clean up all timers (`setTimeout`, `setInterval`) to avoid memory leaks.\n\n## UI and Styling\n- Always TailwindCSS as the CSS Framework using `\"@nativescript/tailwind\": \"^2.1.0\"` for consistent styling paired with `\"tailwindcss\": \"~3.4.0\"`.\n- Add ios: and android: style variants for platform-specific styling, addVariant('android', '.ns-android &'), addVariant('ios', '.ns-ios &');\n- darkMode: ['class', '.ns-dark']\n- Leverage `GridLayout` or `StackLayout` for flexible, responsive layouts. Place more emphasis on proper GridLayout usage for complex layouts but use StackLayout for simpler, linear arrangements.\n- Use `visibility: 'hidden'` for elements that should not affect layout when hidden.\n \n## Performance Optimization\n- Try to avoid deeply nesting layout containers but instead use `GridLayout` wisely to setup complex layouts.\n- Avoid direct manipulation of the visual tree during runtime to minimize rendering overhead.\n- Optimize images using compression tools like TinyPNG to reduce memory and app size.\n- Clean the project (`ns clean`) after modifying files in `App_Resources` or `package.json`.\n \n## Key Conventions\n- Reuse components and styles to avoid duplication.\n- Use template selectors (`itemTemplateSelector`) for conditional layouts in `ListView` and `RadListView`.\n- Minimize heavy computations in UI bindings or methods.\n- Only if using plain xml bindings, use `Observable` or `ObservableArray` properties to reflect state changes efficiently.\n- When using Angular, React, Solid, Svelte or Vue, always leverage their respective state management, lifecycle hooks, rendering optimizations and reactive bindings for optimal performance.\n"}