Fix flex issues in TextFiled Incubator (#2345)

Author: adids1221

demo/src/screens/incubatorScreens/IncubatorTextFieldScreen.tsx

@@ -277,12 +277,7 @@ export default class TextFieldScreen extends Component {
             Centered
           </Text>
 
-          <TextField
-            label="PIN"
-            placeholder="XXXX"
-            labelStyle={{alignSelf: 'center'}}
-            containerStyle={{alignSelf: 'center'}}
-          />
+          <TextField label="PIN" placeholder="XXXX" centered/>
         </View>
         <KeyboardAwareInsetsView/>
       </ScrollView>

src/incubator/TextField/index.tsx

@@ -6,6 +6,7 @@
  * other elements (leading/trailing accessories). It usually best to set lineHeight with undefined
  */
 import React, {useMemo} from 'react';
+import {StyleSheet} from 'react-native';
 import {isEmpty, trim, omit} from 'lodash';
 import {asBaseComponent, forwardRef} from '../../commons/new';
 import View from '../../components/view';
@@ -70,6 +71,7 @@ const TextField = (props: InternalTextFieldProps) => {
     // Input
     placeholder,
     children,
+    centered = false,
     ...others
   } = usePreset(props);
   const {ref: leadingAccessoryRef, measurements: leadingAccessoryMeasurements} = useMeasure();
@@ -96,14 +98,16 @@ const TextField = (props: InternalTextFieldProps) => {
   const fieldStyle = [fieldStyleProp, dynamicFieldStyle?.(context, {preset: props.preset})];
   const hidePlaceholder = shouldHidePlaceholder(props, fieldState.isFocused);
   const retainTopMessageSpace = !floatingPlaceholder && isEmpty(trim(label));
+  const centeredContainerStyle = centered && styles.centeredContainer;
+  const centeredLabelStyle = centered && styles.centeredLabel;
 
   return (
     <FieldContext.Provider value={context}>
-      <View style={[margins, positionStyle, containerStyle]}>
+      <View style={[margins, positionStyle, containerStyle, centeredContainerStyle]}>
         <Label
           label={label}
           labelColor={labelColor}
-          labelStyle={labelStyle}
+          labelStyle={[labelStyle, centeredLabelStyle]}
           labelProps={labelProps}
           floatingPlaceholder={floatingPlaceholder}
           validationMessagePosition={validationMessagePosition}
@@ -122,7 +126,7 @@ const TextField = (props: InternalTextFieldProps) => {
         <View style={[paddings, fieldStyle]} row centerV>
           {/* <View row centerV> */}
           {leadingAccessoryClone}
-          <View flexG /* flex row */>
+          <View flex={!centered} flexG={centered} /* flex row */>
             {floatingPlaceholder && (
               <FloatingPlaceholder
                 placeholder={placeholder}
@@ -188,3 +192,12 @@ export default asBaseComponent<TextFieldProps, StaticMembers>(forwardRef(TextFie
     color: true
   }
 });
+
+const styles = StyleSheet.create({
+  centeredContainer: {
+    alignSelf: 'center'
+  },
+  centeredLabel: {
+    textAlign: 'center'
+  }
+});

src/incubator/TextField/types.ts

@@ -216,6 +216,10 @@ export type TextFieldProps = MarginModifiers &
      * Predefined preset to use for styling the field
      */
     preset?: 'default' | null | string;
+    /**
+     * Whether to center the TextField - container and label
+     */
+    centered?: boolean;
   };
 
 export type InternalTextFieldProps = PropsWithChildren<