feat: add textColor prop for input content text custom color

src/components/TextInput/TextInput.tsx

@@ -55,7 +55,7 @@ export type Props = React.ComponentPropsWithRef<typeof NativeTextInput> & {
    */
   onChangeText?: Function;
   /**
-   * Selection color of the input
+   * Selection color of the input.
    */
   selectionColor?: string;
   /**
@@ -74,6 +74,11 @@ export type Props = React.ComponentPropsWithRef<typeof NativeTextInput> & {
    * Active outline color of the input.
    */
   activeOutlineColor?: string;
+  /**
+   * @supported Available in v5.x
+   * Color of the text in the input.
+   */
+  textColor?: string;
   /**
    * Sets min height with densed layout. For `TextInput` in `flat` mode
    * height is `64dp` or in dense layout - `52dp` with label or `40dp` without label.

src/components/TextInput/TextInputFlat.tsx

@@ -51,6 +51,7 @@ const TextInputFlat = ({
   selectionColor,
   underlineColor,
   activeUnderlineColor,
+  textColor,
   dense,
   style,
   theme,
@@ -139,6 +140,7 @@ const TextInputFlat = ({
   } = getFlatInputColors({
     underlineColor,
     activeUnderlineColor,
+    textColor,
     disabled,
     error,
     theme,

src/components/TextInput/TextInputOutlined.tsx

@@ -49,6 +49,7 @@ const TextInputOutlined = ({
   underlineColor: _underlineColor,
   outlineColor: customOutlineColor,
   activeOutlineColor,
+  textColor,
   dense,
   style,
   theme,
@@ -98,6 +99,7 @@ const TextInputOutlined = ({
   } = getOutlinedInputColors({
     activeOutlineColor,
     customOutlineColor,
+    textColor,
     disabled,
     error,
     theme,

src/components/TextInput/helpers.tsx

@@ -322,10 +322,15 @@ type Mode = 'flat' | 'outlined';
 
 const getInputTextColor = ({
   theme,
+  textColor,
   disabled,
   mode,
-}: BaseProps & { mode: Mode }) => {
+}: BaseProps & { mode: Mode; textColor?: string }) => {
   const isFlat = mode === 'flat';
+  if (textColor) {
+    return textColor;
+  }
+
   if (theme.isV3) {
     if (disabled) {
       return theme.colors.onSurfaceDisabled;
@@ -476,19 +481,25 @@ const getOutlinedOutlineInputColor = ({
 export const getFlatInputColors = ({
   underlineColor,
   activeUnderlineColor,
+  textColor,
   disabled,
   error,
   theme,
 }: {
   underlineColor?: string;
   activeUnderlineColor?: string;
+  textColor?: string;
   disabled?: boolean;
   error?: boolean;
   theme: Theme;
 }) => {
   const baseFlatColorProps = { theme, disabled };
   return {
-    inputTextColor: getInputTextColor({ ...baseFlatColorProps, mode: 'flat' }),
+    inputTextColor: getInputTextColor({
+      ...baseFlatColorProps,
+      textColor,
+      mode: 'flat',
+    }),
     activeColor: getActiveColor({
       ...baseFlatColorProps,
       error,
@@ -508,12 +519,14 @@ export const getFlatInputColors = ({
 export const getOutlinedInputColors = ({
   activeOutlineColor,
   customOutlineColor,
+  textColor,
   disabled,
   error,
   theme,
 }: {
   activeOutlineColor?: string;
   customOutlineColor?: string;
+  textColor?: string;
   disabled?: boolean;
   error?: boolean;
   theme: Theme;
@@ -523,6 +536,7 @@ export const getOutlinedInputColors = ({
   return {
     inputTextColor: getInputTextColor({
       ...baseOutlinedColorProps,
+      textColor,
       mode: 'outlined',
     }),
     activeColor: getActiveColor({

src/components/__tests__/TextInput.test.js

@@ -271,8 +271,9 @@ it('correctly applies padding offset to input label on Android when LTR', () =>
     paddingRight: 56,
   });
 });
+
 ['outlined', 'flat'].forEach((mode) =>
-  it('renders input with correct line height', () => {
+  it(`renders ${mode} input with correct line height`, () => {
     const input = render(
       <TextInput
         mode={mode}
@@ -289,6 +290,25 @@ it('correctly applies padding offset to input label on Android when LTR', () =>
   })
 );
 
+['outlined', 'flat'].forEach((mode) =>
+  it(`renders ${mode} input with passed textColor`, () => {
+    const input = render(
+      <TextInput
+        mode={mode}
+        multiline
+        label="Flat input"
+        testID={'text-input'}
+        style={style.lineHeight}
+        textColor={'purple'}
+      />
+    );
+
+    expect(input.getByTestId(`text-input-${mode}`)).toHaveStyle({
+      color: 'purple',
+    });
+  })
+);
+
 describe('maxFontSizeMultiplier', () => {
   const createInput = (type, maxFontSizeMultiplier) => {
     return (
@@ -408,6 +428,26 @@ describe('getFlatInputColor - underline color', () => {
 });
 
 describe('getFlatInputColor - input text color', () => {
+  it('should return custom color, if not disabled, no matter what the theme is', () => {
+    expect(
+      getOutlinedInputColors({
+        textColor: 'beige',
+        theme: getTheme(),
+      })
+    ).toMatchObject({
+      inputTextColor: 'beige',
+    });
+
+    expect(
+      getOutlinedInputColors({
+        textColor: 'beige',
+        theme: getTheme(false, false),
+      })
+    ).toMatchObject({
+      inputTextColor: 'beige',
+    });
+  });
+
   it('should return correct disabled color, for theme version 3', () => {
     expect(
       getFlatInputColors({
@@ -653,7 +693,7 @@ describe('getFlatInputColor - active color', () => {
     expect(
       getFlatInputColors({
         activeUnderlineColor: 'beige',
-        theme: getTheme(false, true),
+        theme: getTheme(false, false),
       })
     ).toMatchObject({
       activeColor: 'beige',
@@ -740,7 +780,7 @@ describe('getOutlinedInputColors - outline color', () => {
     expect(
       getOutlinedInputColors({
         customOutlineColor: 'beige',
-        theme: getTheme(),
+        theme: getTheme(false, false),
       })
     ).toMatchObject({
       outlineColor: 'beige',
@@ -940,7 +980,7 @@ describe('getOutlinedInputColors - active color', () => {
     expect(
       getOutlinedInputColors({
         activeOutlineColor: 'beige',
-        theme: getTheme(false, true),
+        theme: getTheme(false, false),
       })
     ).toMatchObject({
       activeColor: 'beige',