feat: paddinghorizontal props for legacy input

example/src/Examples/TextInputExample.js

@@ -18,6 +18,7 @@ type State = {
   text: string,
   name: string,
   outlinedText: string,
+  standardInput: string,
 };
 
 class TextInputExample extends React.Component<Props, State> {
@@ -27,6 +28,7 @@ class TextInputExample extends React.Component<Props, State> {
     text: '',
     name: '',
     outlinedText: '',
+    standardInput: '',
   };
 
   _isUsernameValid = () => /^[a-zA-Z]*$/.test(this.state.name);
@@ -75,6 +77,13 @@ class TextInputExample extends React.Component<Props, State> {
             style={styles.inputContainerStyle}
             label="Disabled outlined input"
           />
+          <TextInput
+            mode="flat"
+            paddingHorizontal={0}
+            style={styles.inputContainerStyle}
+            label="Standard input"
+            onChangeText={standardInput => this.setState({ standardInput })}
+          />
           <View style={styles.inputContainerStyle}>
             <TextInput
               label="Input with helper text"

src/components/TextInput/TextInput.js

@@ -60,6 +60,10 @@ export type TextInputProps = {|
    * The number of lines to show in the input (Android only).
    */
   numberOfLines?: number,
+  /**
+   * The number of lines to show in the input (Android only).
+   */
+  paddingHorizontal?: number,
   /**
    * Callback that is called when the text input is focused.
    */
@@ -152,6 +156,7 @@ class TextInput extends React.Component<TextInputProps, State> {
     error: false,
     multiline: false,
     editable: true,
+    paddingHorizontal: 12,
     render: (props: RenderProps) => <NativeTextInput {...props} />,
   };
 
@@ -360,7 +365,7 @@ class TextInput extends React.Component<TextInputProps, State> {
   }
 
   render() {
-    const { mode, ...rest } = this.props;
+    const { mode, paddingHorizontal, ...rest } = this.props;
 
     return mode === 'outlined' ? (
       <TextInputOutlined
@@ -381,6 +386,7 @@ class TextInput extends React.Component<TextInputProps, State> {
         innerRef={ref => {
           this._root = ref;
         }}
+        paddingHorizontal={paddingHorizontal}
         onFocus={this._handleFocus}
         onBlur={this._handleBlur}
         onChangeText={this._handleChangeText}

src/components/TextInput/TextInputFlat.js

@@ -27,6 +27,7 @@ class TextInputFlat extends React.Component<ChildTextInputProps, {}> {
     error: false,
     multiline: false,
     editable: true,
+    paddingHorizontal: 12,
     render: (props: RenderProps) => <NativeTextInput {...props} />,
   };
 
@@ -47,6 +48,7 @@ class TextInputFlat extends React.Component<ChildTextInputProps, {}> {
       onBlur,
       onChangeText,
       onLayoutAnimatedText,
+      paddingHorizontal,
       ...rest
     } = this.props;
 
@@ -188,6 +190,7 @@ class TextInputFlat extends React.Component<ChildTextInputProps, {}> {
                     inputRange: [0, 1],
                     outputRange: [hasActiveOutline ? 1 : 0, 0],
                   }),
+                  paddingHorizontal,
                 },
               ]}
               numberOfLines={1}
@@ -202,6 +205,7 @@ class TextInputFlat extends React.Component<ChildTextInputProps, {}> {
                 {
                   color: placeholderColor,
                   opacity: hasActiveOutline ? parentState.labeled : 1,
+                  paddingHorizontal,
                 },
               ]}
               numberOfLines={1}
@@ -238,6 +242,7 @@ class TextInputFlat extends React.Component<ChildTextInputProps, {}> {
                 color: inputTextColor,
                 fontFamily,
                 textAlignVertical: multiline ? 'top' : 'center',
+                paddingHorizontal,
               },
             ],
           }: RenderProps)