Changing the cursor (caret) color in NativeScript

NativeScript generalized native Android and iOS apps development, but for some customization, such as changing the cursor color, specific platform mechanism must be used.

Next instructions tested with NativeScript Core v5.x.

Android

To globally change caret color for all TextField and TextView components, which based on android.widget.EditText native component in Android application, colorAccent style attribute must be changed.

Scaffold NativeScript project already assign custom ns_accent color, which defined in app/App_Resources/Android/src/main/res/values/colors.xml and app/App_Resources/Android/src/main/res/values-v21/colors.xml files, for colorAccent style attribute. So to globally change caret color — ns_accent color need to be changed.

In fact, many of other components also use colorAccent style attribute (Progress, Slider, Switch, etc.), that is why with caret color these widgets coloring also changes.

iOS

To globally change caret color for all TextField and TextView components, which based on UITextField and UITextView native components in iOS application, application window tintColor value must be changed.

To set application window tintColor next technique could be used:

import * as app from "tns-core-modules/application";
import { Color } from "tns-core-modules/color";

app.on(app.launchEvent, (args: app.LaunchEventData) => {
    if (args.android !== undefined) {
        // For Android applications, args.android is an android.content.Intent class.
    } else if (args.ios !== undefined) {
        // For iOS applications, args.ios is NSDictionary (launchOptions).
        args.object.window.tintColor = new Color("red").ios;
    }
});

app.run({ moduleName: "app-root" });

The same as Android's colorAccent style attribute, tintColor change not only caret color but also other views coloring.

Also, it is rather simple to change tintColor for a specific component. For example to set tintColor of TextField after navigated to Page next code could be used:

import { NavigatedData, Page } from "tns-core-modules/ui/page";
import { Color } from "tns-core-modules/color";

export function onNavigatedTo(args: NavigatedData) {
    const page = <Page>args.object;
    
    const someTextField: TextField = page.getViewById("someTextField");
    someTextField.ios.tintColor = new Color("green").ios;
}