phone input screen

src/components/forms/TextField.tsx

@@ -141,17 +141,28 @@ export function useSharedInputStyles() {
   }, [t])
 }
 
-export type InputProps = Omit<TextInputProps, 'value' | 'onChangeText'> & {
+export type InputProps = Omit<
+  TextInputProps,
+  'value' | 'onChangeText' | 'placeholder'
+> & {
   label: string
   /**
    * @deprecated Controlled inputs are *strongly* discouraged. Use `defaultValue` instead where possible.
    *
    * See https://github.com/facebook/react-native-website/pull/4247
+   *
+   * Note: This guidance no longer applies once we migrate to the New Architecture!
    */
   value?: string
   onChangeText?: (value: string) => void
   isInvalid?: boolean
   inputRef?: React.RefObject<TextInput | null> | React.ForwardedRef<TextInput>
+  /**
+   * Note: this currently falls back to the label if not specified. However,
+   * most new designs have no placeholder. We should eventually remove this fallback
+   * behaviour, but for now just pass `null` if you want no placeholder -sfn
+   */
+  placeholder?: string | null | undefined
 }
 
 export function createInput(Component: typeof TextInput) {
@@ -255,7 +266,7 @@ export function createInput(Component: typeof TextInput) {
             ctx.onBlur()
             onBlur?.(e)
           }}
-          placeholder={placeholder || label}
+          placeholder={placeholder === null ? undefined : placeholder || label}
           placeholderTextColor={t.palette.contrast_500}
           keyboardAppearance={t.name === 'light' ? 'light' : 'dark'}
           style={flattened}
@@ -292,12 +303,7 @@ export function LabelText({
   return (
     <Text
       nativeID={nativeID}
-      style={[
-        a.text_sm,
-        a.font_semi_bold,
-        t.atoms.text_contrast_medium,
-        a.mb_sm,
-      ]}>
+      style={[a.text_sm, a.font_medium, t.atoms.text_contrast_medium, a.mb_sm]}>
       {children}
     </Text>
   )