Support rendering a bottomAccessory in TextField (#1737)

Author: ethanshar

demo/src/screens/incubatorScreens/IncubatorTextFieldScreen.tsx

@@ -228,6 +228,11 @@ export default class TextFieldScreen extends Component {
             placeholder="Enter text..."
             multiline
             showCharCounter
+            bottomAccessory={
+              <Text text100>
+                {Assets.emojis.grapes} {Assets.emojis.melon} {Assets.emojis.banana}
+              </Text>
+            }
             charCounterStyle={{color: Colors.blue30}}
             maxLength={20}
             fieldStyle={styles.withFrame}

generatedTypes/src/incubator/TextField/index.d.ts

@@ -25,6 +25,10 @@ export declare type TextFieldProps = MarginModifiers & PaddingModifiers & Typogr
      * Pass to render a trailing element
      */
     trailingAccessory?: ReactElement;
+    /**
+     * Pass to render a bottom element below the input
+     */
+    bottomAccessory?: ReactElement;
     /**
      * Pass to add floating placeholder support
      */

generatedTypes/src/incubator/TextField/usePreset.d.ts

@@ -156,6 +156,7 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     charCounterStyle?: import("react-native").TextStyle | undefined;
     leadingAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     trailingAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    bottomAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     validateOnStart?: boolean | undefined;
     validateOnChange?: boolean | undefined;
     validateOnBlur?: boolean | undefined;
@@ -486,6 +487,7 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     charCounterStyle?: import("react-native").TextStyle | undefined;
     leadingAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     trailingAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    bottomAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     validateOnStart?: boolean | undefined;
     validateOnChange?: boolean | undefined;
     validateOnBlur?: boolean | undefined;
@@ -1048,6 +1050,7 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     charCounterStyle?: import("react-native").TextStyle | undefined;
     leadingAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     trailingAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    bottomAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     validateOnStart?: boolean | undefined;
     validateOnChange?: boolean | undefined;
     validateOnBlur: boolean;

src/incubator/TextField/index.tsx

@@ -52,6 +52,10 @@ export type TextFieldProps = MarginModifiers &
      * Pass to render a trailing element
      */
     trailingAccessory?: ReactElement;
+    /**
+     * Pass to render a bottom element below the input
+     */
+    bottomAccessory?: ReactElement;
     /**
      * Pass to add floating placeholder support
      */
@@ -140,6 +144,7 @@ const TextField = (props: InternalTextFieldProps) => {
     // Accessory Buttons
     leadingAccessory,
     trailingAccessory,
+    bottomAccessory,
     // Validation
     enableErrors, // TODO: rename to enableValidation
     validationMessageStyle,
@@ -236,6 +241,7 @@ const TextField = (props: InternalTextFieldProps) => {
               testID={`${props.testID}.validationMessage`}
             />
           )}
+          {bottomAccessory}
           {showCharCounter && <CharCounter maxLength={others.maxLength} charCounterStyle={charCounterStyle}/>}
         </View>
       </View>