nativescript-cursorrules-prompt-file
description: Applies general NativeScript best practices. globs: /*.tsx, /*.ts, /*.vue, /*.svelte, src//*.ts, app//*.ts, src//*.tsx, app//.tsx, src/**/.vue, app//*.vue, src//*.svelte
- Organize code using modular components and services for maintainability.
- Use platform-specific files (
.ios.ts,.android.ts) when code exceeds 20 platform-specific lines. - 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.tsto keep platform-specific code organized and easy to import with single import elsewhere, replacingcustom-nativewith the name of the custom code. - Prefix platform-specific variables with
iosorandroid(e.g.,iosButtonStyle). - Name custom components and styles descriptively (
primaryButtonStyle,userProfileView). - Use
@NativeClass()when extending native classes when needed - For iOS, when extending native classes, always use
static ObjCProtocols = [AnyUIKitDelegate];to declare custom delegates if a delegate is required or used. - 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. - Favor
__ANDROID__and__APPLE__for conditional platform code with tree-shaking. - Track and clean up all timers (
setTimeout,setInterval) to avoid memory leaks. - Always TailwindCSS as the CSS Framework using
"@nativescript/tailwind": "^2.1.0"for consistent styling paired with"tailwindcss": "~3.4.0". - Add ios: and android: style variants for platform-specific styling, addVariant('android', '.ns-android &'), addVariant('ios', '.ns-ios &');
- darkMode: ['class', '.ns-dark']
- Leverage
GridLayoutorStackLayoutfor flexible, responsive layouts. Place more emphasis on proper GridLayout usage for complex layouts but use StackLayout for simpler, linear arrangements. - Use
visibility: 'hidden'for elements that should not affect layout when hidden. - Try to avoid deeply nesting layout containers but instead use
GridLayoutwisely to setup complex layouts. - Avoid direct manipulation of the visual tree during runtime to minimize rendering overhead.
- Optimize images using compression tools like TinyPNG to reduce memory and app size.
- Clean the project (
ns clean) after modifying files inApp_Resourcesorpackage.json. - Reuse components and styles to avoid duplication.
- Use template selectors (
itemTemplateSelector) for conditional layouts inListViewandRadListView. - Minimize heavy computations in UI bindings or methods.
- Only if using plain xml bindings, use
ObservableorObservableArrayproperties to reflect state changes efficiently. - When using Angular, React, Solid, Svelte or Vue, always leverage their respective state management, lifecycle hooks, rendering optimizations and reactive bindings for optimal performance.
Source: Tryboy869/dojutsu-for-ai — distributed by TomeVault.