fix: Fix initial label position when value is set on React Native >= 0.61

Author: RichardLindhout

src/components/TextInput/Label/InputLabel.tsx

@@ -25,6 +25,7 @@ const InputLabel = (props: InputLabelProps) => {
     topPosition,
     paddingOffset,
     placeholderColor,
+    errorColor,
   } = props.labelProps;
 
   const labelTranslationX = {
@@ -123,7 +124,7 @@ const InputLabel = (props: InputLabelProps) => {
           labelStyle,
           paddingOffset,
           {
-            color: placeholderColor,
+            color: error && errorColor ? errorColor : placeholderColor,
             opacity: placeholderOpacity,
           },
         ]}

src/components/TextInput/TextInput.tsx

@@ -184,11 +184,20 @@ class TextInput extends React.Component<TextInputProps, State> {
   }
 
   state = {
-    labeled: new Animated.Value(this.props.value || this.props.error ? 0 : 1),
+    labeled: new Animated.Value(
+      (this.props.value !== undefined
+      ? this.props.value
+      : this.props.defaultValue)
+        ? 0
+        : 1
+    ),
     error: new Animated.Value(this.props.error ? 1 : 0),
     focused: false,
-    placeholder: this.props.error ? this.props.placeholder : '',
-    value: this.props.value || this.props.defaultValue,
+    placeholder: '',
+    value:
+      this.props.value !== undefined
+        ? this.props.value
+        : this.props.defaultValue,
     labelLayout: {
       measured: false,
       width: 0,
@@ -202,27 +211,27 @@ class TextInput extends React.Component<TextInputProps, State> {
     if (
       prevState.focused !== this.state.focused ||
       prevState.value !== this.state.value ||
-      prevProps.error !== this.props.error ||
-      this.props.defaultValue
+      // workaround for animated regression for react native > 0.61
+      // https://github.com/callstack/react-native-paper/pull/1440
+      prevState.labelLayout !== this.state.labelLayout
     ) {
       // The label should be minimized if the text input is focused, or has text
       // In minimized mode, the label moves up and becomes small
-      if (this.state.value || this.state.focused || this.props.error) {
-        this.minmizeLabel();
+      if (this.state.value || this.state.focused) {
+        this.minimizeLabel();
       } else {
         this.restoreLabel();
       }
     }
 
     if (
       prevState.focused !== this.state.focused ||
-      prevProps.label !== this.props.label ||
-      prevProps.error !== this.props.error
+      prevProps.label !== this.props.label
     ) {
-      // Show placeholder text only if the input is focused, or has error, or there's no label
+      // Show placeholder text only if the input is focused, or there's no label
       // We don't show placeholder if there's a label because the label acts as placeholder
       // When focused, the label moves up, so we can show a placeholder
-      if (this.state.focused || this.props.error || !this.props.label) {
+      if (this.state.focused || !this.props.label) {
         this.showPlaceholder();
       } else {
         this.hidePlaceholder();
@@ -305,7 +314,7 @@ class TextInput extends React.Component<TextInputProps, State> {
       }),
     }).start();
 
-  private minmizeLabel = () =>
+  private minimizeLabel = () =>
     Animated.timing(this.state.labeled, {
       toValue: 0,
       duration: BLUR_ANIMATION_DURATION,

src/components/TextInput/TextInputFlat.tsx

@@ -88,7 +88,11 @@ class TextInputFlat extends React.Component<ChildTextInputProps, {}> {
       paddingHorizontal: number;
     };
 
-    let inputTextColor, activeColor, underlineColorCustom, placeholderColor;
+    let inputTextColor,
+      activeColor,
+      underlineColorCustom,
+      placeholderColor,
+      errorColor;
 
     if (disabled) {
       inputTextColor = activeColor = color(colors.text)
@@ -101,6 +105,7 @@ class TextInputFlat extends React.Component<ChildTextInputProps, {}> {
       inputTextColor = colors.text;
       activeColor = error ? colors.error : colors.primary;
       placeholderColor = colors.placeholder;
+      errorColor = colors.error;
       underlineColorCustom = underlineColor || colors.disabled;
     }
 
@@ -202,6 +207,7 @@ class TextInputFlat extends React.Component<ChildTextInputProps, {}> {
       hasActiveOutline,
       activeColor,
       placeholderColor,
+      errorColor,
     };
 
     const minHeight =

src/components/TextInput/TextInputOutlined.tsx

@@ -84,6 +84,7 @@ class TextInputOutlined extends React.Component<ChildTextInputProps, {}> {
       activeColor,
       outlineColor,
       placeholderColor,
+      errorColor,
       containerStyle;
 
     if (disabled) {
@@ -96,6 +97,7 @@ class TextInputOutlined extends React.Component<ChildTextInputProps, {}> {
       inputTextColor = colors.text;
       activeColor = error ? colors.error : colors.primary;
       placeholderColor = outlineColor = colors.placeholder;
+      errorColor = colors.error;
     }
 
     const labelScale = MINIMIZED_LABEL_FONT_SIZE / fontSize;
@@ -177,6 +179,7 @@ class TextInputOutlined extends React.Component<ChildTextInputProps, {}> {
       activeColor,
       placeholderColor,
       backgroundColor,
+      errorColor,
     };
 
     const minHeight = height || (dense ? MIN_DENSE_HEIGHT : MIN_HEIGHT);

src/components/TextInput/types.tsx

@@ -57,6 +57,7 @@ export type LabelProps = {
   label?: string | null | undefined;
   hasActiveOutline: boolean | null | undefined;
   activeColor: string;
+  errorColor?: string;
   error: boolean | null | undefined;
   onLayoutAnimatedText: (args: any) => void;
 };