From 9d802f65102adb5fedc7728c5ae76d4587cab4b9 Mon Sep 17 00:00:00 2001 From: Osman Turan Date: Mon, 18 Sep 2023 22:16:54 +0300 Subject: [PATCH] fix: unfocused TextInput label disappears on new architecture (#3776) (#3899) --- src/components/TextInput/TextInputFlat.tsx | 9 ++++++--- src/components/TextInput/TextInputOutlined.tsx | 10 +++++++--- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/components/TextInput/TextInputFlat.tsx b/src/components/TextInput/TextInputFlat.tsx index 9ee30fac79..effe57fb00 100644 --- 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 index 80d8adcae7..5f4ab044d9 100644 --- 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',