fix: unfocused TextInput label disappears on new architecture (#3776) (…

…#3899)
callstack · Sep 18, 2023 · 9d802f6 · 9d802f6
1 parent 02e9fec
commit 9d802f6
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/src/components/TextInput/TextInputFlat.tsx b/src/components/TextInput/TextInputFlat.tsx
@@ -214,11 +214,14 @@ const TextInputFlat = ({
   const baseLabelTranslateY =
     -labelHalfHeight - (topPosition + MINIMIZED_LABEL_Y_OFFSET);
 
+  const { current: placeholderOpacityAnims } = React.useRef([
+    new Animated.Value(0),
+    new Animated.Value(1),
+  ]);
+
   const placeholderOpacity = hasActiveOutline
     ? parentState.labeled
-    : parentState.labelLayout.measured
-    ? 1
-    : 0;
+    : placeholderOpacityAnims[parentState.labelLayout.measured ? 1 : 0];
 
   const minHeight =
     height ||

diff --git a/src/components/TextInput/TextInputOutlined.tsx b/src/components/TextInput/TextInputOutlined.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  Animated,
   View,
   TextInput as NativeTextInput,
   StyleSheet,
@@ -175,11 +176,14 @@ const TextInputOutlined = ({
   const baseLabelTranslateY =
     -labelHalfHeight - (topPosition + OUTLINE_MINIMIZED_LABEL_Y_OFFSET);
 
+  const { current: placeholderOpacityAnims } = React.useRef([
+    new Animated.Value(0),
+    new Animated.Value(1),
+  ]);
+
   const placeholderOpacity = hasActiveOutline
     ? parentState.labeled
-    : parentState.labelLayout.measured
-    ? 1
-    : 0;
+    : placeholderOpacityAnims[parentState.labelLayout.measured ? 1 : 0];
 
   const placeholderStyle = {
     position: 'absolute',