[Android][TextInput] Cursor color

[efkan]

TextInput needs a prop like 'syncCursorColor' to change cursor color.

syncCursorColor prop value should be a bool. If there is a syncCursorColor prop in the textInput component (it means the prop value is true) then the java code of android:textCursorDrawable="@null" has to be run in Android side.

I've never contribute to this repository. So I don't know what the React-Native textInput component code and how should it be changed.

The cursor color cannot be changed yet. And if placeholderTextColor and underlineColorAndroid are assigned the component appearance is not good like the following.

However this blog says;

Set the android:textCursorDrawable attribute value to @null, then EditText widget will display text color as cursor color

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rl"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    tools:context=".MainActivity"
    android:background="#ced4cb"
    >
    <!--
        android:textCursorDrawable="@null"
        android:textColor

            Set the android:textCursorDrawable attribute value to @null,
            then EditText widget will display text color as cursor color
    -->
    <EditText
        android:id="@+id/et"
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:hint="Input your country"
        android:padding="10dp"
        android:textCursorDrawable="@null"
        />
    <EditText
        android:id="@+id/et_city"
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:hint="Input your City"
        android:padding="10dp"
        android:layout_below="@+id/et"
        android:textCursorDrawable="@null"
        android:textColor="#ff0004"
        />
</RelativeLayout>

[grabbou]

@mkonicek shouldn't this be default behaviour?

[efkan]

@grabbou , you didn't ask me but I think shouldn't.

Because Android sets the EditText cursor and placeholder as gray as default. However, when developing Android app this color can be changed.

For instance; YouTube search EditText's cursor color. When pressing the magnifying glass to search a video, the title and menu icon are removed and showing an EditText with the 'red' cursor color. But placeholder is gray. (Sony music app sets search EditText's color as 'cyan' etc.)

In my case I use a dark color (deep purple) as toolbox color. I can color everything as white except cursor. And the user can not be aware of the cursor on the textInput.

[mkonicek]

See https://github.com/facebook/react-native/blob/master/ISSUE_TEMPLATE.md

This is a feature request that should live on Product Pains so people can see how many people want this feature and prioritize based on that. Also, this should be implemented by the community, fb won't add this unless it's needed in one of the fb apps. GitHub should be used for tracking bugs.

I'll close this but feel free to move this to Product Pains / continue the discussion here.