nativescript

NativeScript Best Practices

Code Style and Structure

• 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.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.

Naming Conventions

• Prefix platform-specific variables with ios or android (e.g., iosButtonStyle).
• Name custom components and styles descriptively (primaryButtonStyle, userProfileView).

Usage

• 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.

UI and Styling

• 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 GridLayout or StackLayout for 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.