feat: add activity indicator to TextInput (#1)

example/src/Examples/TextInputExample.tsx

@@ -214,6 +214,19 @@ const TextInputExample = () => {
                 />
               }
             />
+            <TextInput
+              style={styles.inputContainerStyle}
+              label="Flat input with Activity Indicator"
+              placeholder="Type something"
+              value={text}
+              onChangeText={(text) => inputActionHandler('text', text)}
+              maxLength={100}
+              right={
+                <TextInput.ActivityIndicator
+                  useNativeActivityIndicator={true}
+                />
+              }
+            />
             <TextInput
               style={[styles.inputContainerStyle, styles.fontSize]}
               label="Flat input large font"
@@ -291,6 +304,20 @@ const TextInputExample = () => {
               maxLength={100}
               right={<TextInput.Affix text={`${outlinedText.length}/100`} />}
             />
+            <TextInput
+              mode="outlined"
+              style={styles.inputContainerStyle}
+              label="Outlined with Activity Indicator"
+              placeholder="Press the icon to submit"
+              value={text}
+              onChangeText={(text) => inputActionHandler('text', text)}
+              maxLength={100}
+              right={
+                <TextInput.ActivityIndicator
+                  useNativeActivityIndicator={true}
+                />
+              }
+            />
             <TextInput
               mode="outlined"
               style={[styles.inputContainerStyle, styles.fontSize]}

src/components/TextInput/Adornment/TextInputActivityIndicator.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import {
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+  View,
+  ActivityIndicator as RNActivityIndicator,
+} from 'react-native';
+
+import { getIconColor } from './utils';
+import { useInternalTheme } from '../../../core/theming';
+import { $Omit, ThemeProp } from '../../../types';
+import ActivityIndicator from '../../ActivityIndicator';
+import { Props as ActivityIndicatorProps } from '../../ActivityIndicator';
+import { ICON_SIZE } from '../constants';
+import { getConstants } from '../helpers';
+
+export type Props = $Omit<
+  ActivityIndicatorProps,
+  'size' | 'hidesWhenStopped'
+> & {
+  /**
+   * When true, the loading indicator will be the React Native default ActivityIndicator.
+   */
+  useNativeActivityIndicator?: boolean;
+};
+
+type StyleContextType = {
+  style: StyleProp<ViewStyle>;
+  isTextInputFocused: boolean;
+  testID: string;
+  disabled?: boolean;
+};
+
+const StyleContext = React.createContext<StyleContextType>({
+  style: {},
+  isTextInputFocused: false,
+  testID: '',
+});
+
+const ActivityIndicatorAdornment: React.FunctionComponent<
+  {
+    testID: string;
+    indicator: React.ReactNode;
+    topPosition: number;
+    side: 'left' | 'right';
+    theme?: ThemeProp;
+    disabled?: boolean;
+    useNativeActivityIndicator?: boolean;
+  } & Omit<StyleContextType, 'style'>
+> = ({
+  indicator,
+  topPosition,
+  side,
+  isTextInputFocused,
+  testID,
+  theme: themeOverrides,
+  disabled,
+}) => {
+  const { isV3 } = useInternalTheme(themeOverrides);
+  const { ICON_OFFSET } = getConstants(isV3);
+
+  const style: StyleProp<ViewStyle> = {
+    top: topPosition,
+    [side]: ICON_OFFSET,
+  };
+  const contextState = {
+    style,
+    isTextInputFocused,
+    side,
+    testID,
+    disabled,
+  };
+
+  return (
+    <StyleContext.Provider value={contextState}>
+      {indicator}
+    </StyleContext.Provider>
+  );
+};
+
+const TextInputActivityIndicator = ({
+  useNativeActivityIndicator,
+  color: customColor,
+  theme: themeOverrides,
+  ...rest
+}: Props) => {
+  const { style, isTextInputFocused, testID, disabled } =
+    React.useContext(StyleContext);
+
+  const theme = useInternalTheme(themeOverrides);
+
+  const indicatorColor = getIconColor({
+    theme,
+    disabled,
+    isTextInputFocused,
+    customColor,
+  });
+
+  return (
+    <View style={[styles.container, style]}>
+      {useNativeActivityIndicator ? (
+        <RNActivityIndicator color={indicatorColor} testID={testID} {...rest} />
+      ) : (
+        <ActivityIndicator {...rest} color={indicatorColor} testID={testID} />
+      )}
+    </View>
+  );
+};
+
+TextInputActivityIndicator.displayName = 'TextInput.ActivityIndicator';
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default TextInputActivityIndicator;
+
+// @component-docs ignore-next-line
+export { ActivityIndicatorAdornment };

src/components/TextInput/Adornment/TextInputAdornment.tsx

@@ -1,14 +1,17 @@
-import React from 'react';
-import type {
-  LayoutChangeEvent,
-  TextStyle,
-  StyleProp,
-  Animated,
+import React, { isValidElement } from 'react';
+import {
+  type LayoutChangeEvent,
+  type TextStyle,
+  type StyleProp,
+  type Animated,
 } from 'react-native';
 
 import type { ThemeProp } from 'src/types';
 
 import { AdornmentSide, AdornmentType, InputMode } from './enums';
+import TextInputActivityIndicator, {
+  ActivityIndicatorAdornment,
+} from './TextInputActivityIndicator';
 import TextInputAffix, { AffixAdornment } from './TextInputAffix';
 import TextInputIcon, { IconAdornment } from './TextInputIcon';
 import type {
@@ -36,6 +39,8 @@ export function getAdornmentConfig({
           type = AdornmentType.Affix;
         } else if (adornment.type === TextInputIcon) {
           type = AdornmentType.Icon;
+        } else if (adornment.type === TextInputActivityIndicator) {
+          type = AdornmentType.ActivityIndicator;
         }
         adornmentConfig.push({
           side,
@@ -120,6 +125,7 @@ export interface TextInputAdornmentProps {
       [AdornmentSide.Right]: number | null;
     };
     [AdornmentType.Icon]: number;
+    [AdornmentType.ActivityIndicator]: number;
   };
   onAffixChange: {
     [AdornmentSide.Left]: (event: LayoutChangeEvent) => void;
@@ -193,6 +199,21 @@ const TextInputAdornment: React.FunctionComponent<TextInputAdornmentProps> = ({
                 maxFontSizeMultiplier={maxFontSizeMultiplier}
               />
             );
+          } else if (type === AdornmentType.ActivityIndicator) {
+            const { useNativeActivityIndicator } =
+              isValidElement(inputAdornmentComponent) &&
+              inputAdornmentComponent.props;
+            return (
+              <ActivityIndicatorAdornment
+                {...commonProps}
+                key={side}
+                indicator={inputAdornmentComponent}
+                topPosition={topPosition[AdornmentType.ActivityIndicator]}
+                theme={theme}
+                disabled={disabled}
+                useNativeActivityIndicator={useNativeActivityIndicator}
+              />
+            );
           } else {
             return null;
           }

src/components/TextInput/Adornment/enums.tsx

@@ -1,6 +1,7 @@
 export enum AdornmentType {
   Icon = 'icon',
   Affix = 'affix',
+  ActivityIndicator = 'activityIndicator',
 }
 export enum AdornmentSide {
   Right = 'right',

src/components/TextInput/TextInput.tsx

@@ -10,6 +10,9 @@ import {
   TextLayoutEventData,
 } from 'react-native';
 
+import TextInputActivityIndicator, {
+  Props as TextInputActivityIndicatorProps,
+} from './Adornment/TextInputActivityIndicator';
 import TextInputAffix, {
   Props as TextInputAffixProps,
 } from './Adornment/TextInputAffix';
@@ -180,6 +183,7 @@ interface CompoundedComponent
   > {
   Icon: React.FunctionComponent<TextInputIconProps>;
   Affix: React.FunctionComponent<Partial<TextInputAffixProps>>;
+  ActivityIndicator: React.FunctionComponent<TextInputActivityIndicatorProps>;
 }
 
 type TextInputHandles = Pick<
@@ -572,4 +576,7 @@ TextInput.Icon = TextInputIcon;
 // @ts-ignore Types of property 'theme' are incompatible.
 TextInput.Affix = TextInputAffix;
 
+// @component ./Adornment/TextInputActivityIndicator.tsx
+TextInput.ActivityIndicator = TextInputActivityIndicator;
+
 export default TextInput;

src/components/TextInput/TextInputFlat.tsx

@@ -238,6 +238,8 @@ const TextInputFlat = ({
 
   const iconTopPosition = (flatHeight - ADORNMENT_SIZE) / 2;
 
+  const loadingTopPosition = iconTopPosition;
+
   const leftAffixTopPosition = leftLayout.height
     ? calculateFlatAffixTopPosition({
         height: flatHeight,
@@ -315,6 +317,7 @@ const TextInputFlat = ({
     topPosition: {
       [AdornmentType.Affix]: affixTopPosition,
       [AdornmentType.Icon]: iconTopPosition,
+      [AdornmentType.ActivityIndicator]: loadingTopPosition,
     },
     onAffixChange,
     isTextInputFocused: parentState.focused,

src/components/TextInput/TextInputOutlined.tsx

@@ -285,6 +285,12 @@ const TextInputOutlined = ({
     labelYOffset: -yOffset,
   });
 
+  const loadingTopPosition = calculateOutlinedIconAndAffixTopPosition({
+    height: outlinedHeight,
+    affixHeight: ADORNMENT_SIZE,
+    labelYOffset: -yOffset,
+  });
+
   const rightAffixWidth = right
     ? rightLayout.width || ADORNMENT_SIZE
     : ADORNMENT_SIZE;
@@ -316,6 +322,7 @@ const TextInputOutlined = ({
     topPosition: {
       [AdornmentType.Icon]: iconTopPosition,
       [AdornmentType.Affix]: affixTopPosition,
+      [AdornmentType.ActivityIndicator]: loadingTopPosition,
     },
     onAffixChange,
     isTextInputFocused: parentState.focused,

src/components/TextInput/types.tsx

@@ -21,6 +21,8 @@ type TextInputProps = React.ComponentPropsWithRef<typeof NativeTextInput> & {
   left?: React.ReactNode;
   right?: React.ReactNode;
   disabled?: boolean;
+  useNativeActivityIndicator?: boolean;
+  loading?: boolean;
   label?: TextInputLabelProp;
   placeholder?: string;
   error?: boolean;
@@ -45,6 +47,7 @@ type TextInputProps = React.ComponentPropsWithRef<typeof NativeTextInput> & {
   contentStyle?: StyleProp<TextStyle>;
   outlineStyle?: StyleProp<ViewStyle>;
   underlineStyle?: StyleProp<ViewStyle>;
+  loadingStyle?: StyleProp<ViewStyle>;
 };
 
 export type RenderProps = {