memoize TextField inner components style to avoid redundant renders

src/incubator/TextField/FloatingPlaceholder.tsx

@@ -27,6 +27,15 @@ const FloatingPlaceholder = ({
   const animation = useRef(new Animated.Value(Number(context.isFocused))).current;
   const hidePlaceholder = !context.isValid && validationMessagePosition === ValidationMessagePosition.TOP;
 
+  useEffect(() => {
+    const toValue = floatOnFocus ? context.isFocused || context.hasValue : context.hasValue;
+    Animated.timing(animation, {
+      toValue: Number(toValue),
+      duration: 200,
+      useNativeDriver: true
+    }).start();
+  }, [floatOnFocus, context.isFocused, context.hasValue]);
+
   const animatedStyle = useMemo(() => {
     return {
       transform: [
@@ -46,14 +55,8 @@ const FloatingPlaceholder = ({
     };
   }, [placeholderOffset, extraOffset]);
 
-  useEffect(() => {
-    const toValue = floatOnFocus ? context.isFocused || context.hasValue : context.hasValue;
-    Animated.timing(animation, {
-      toValue: Number(toValue),
-      duration: 200,
-      useNativeDriver: true
-    }).start();
-  }, [floatOnFocus, context.isFocused, context.hasValue]);
+  const style = useMemo(() => [styles.placeholder, floatingPlaceholderStyle, animatedStyle],
+    [floatingPlaceholderStyle, animatedStyle]);
 
   const onPlaceholderLayout = useCallback((event: LayoutChangeEvent) => {
     const {width, height} = event.nativeEvent.layout;
@@ -70,7 +73,7 @@ const FloatingPlaceholder = ({
       <Text
         animated
         color={getColorByState(floatingPlaceholderColor, context)}
-        style={[styles.placeholder, floatingPlaceholderStyle, animatedStyle]}
+        style={style}
         onLayout={onPlaceholderLayout}
         testID={testID}
       >

src/incubator/TextField/Label.tsx

@@ -1,4 +1,4 @@
-import React, {useContext} from 'react';
+import React, {useContext, useMemo} from 'react';
 import {StyleSheet} from 'react-native';
 import {Colors} from '../../style';
 import Text from '../../components/text';
@@ -20,12 +20,16 @@ const Label = ({
 
   const forceHidingLabel = !context.isValid && validationMessagePosition === ValidationMessagePosition.TOP;
 
+  const style = useMemo(() => {
+    return [styles.label, labelStyle, floatingPlaceholder && styles.dummyPlaceholder];
+  }, [labelStyle, floatingPlaceholder]);
+
   if ((label || floatingPlaceholder) && !forceHidingLabel) {
     return (
       <Text
         testID={testID}
         color={getColorByState(labelColor, context)}
-        style={[styles.label, labelStyle, floatingPlaceholder && styles.dummyPlaceholder]}
+        style={style}
         {...labelProps}
       >
         {label}

src/incubator/TextField/ValidationMessage.tsx

@@ -1,4 +1,4 @@
-import React, {useContext} from 'react';
+import React, {useContext, useMemo} from 'react';
 import {StyleSheet} from 'react-native';
 import Text from '../../components/text';
 import FieldContext from './FieldContext';
@@ -15,6 +15,8 @@ const ValidationMessage = ({
 }: ValidationMessageProps) => {
   const context = useContext(FieldContext);
 
+  const style = useMemo(() => [styles.validationMessage, validationMessageStyle], [validationMessageStyle]);
+
   if (!enableErrors || (!retainSpace && context.isValid)) {
     return null;
   }
@@ -23,7 +25,7 @@ const ValidationMessage = ({
   const showValidationMessage = !context.isValid || (!validate && !!validationMessage);
 
   return (
-    <Text testID={testID} $textDangerLight style={[styles.validationMessage, validationMessageStyle]}>
+    <Text testID={testID} $textDangerLight style={style}>
       {showValidationMessage ? relevantValidationMessage : ''}
     </Text>
   );

src/incubator/TextField/index.tsx

@@ -84,6 +84,7 @@ const TextField = (props: InternalTextFieldProps) => {
   const {margins, paddings, typography, color} = modifiers;
   const typographyStyle = useMemo(() => omit(typography, 'lineHeight'), [typography]);
   const colorStyle = useMemo(() => color && {color}, [color]);
+  const _floatingPlaceholderStyle = useMemo(() => [typographyStyle, floatingPlaceholderStyle], [typographyStyle, floatingPlaceholderStyle]);
 
   const fieldStyle = [fieldStyleProp, dynamicFieldStyle?.(context, {preset: props.preset})];
   const hidePlaceholder = shouldHidePlaceholder(props, fieldState.isFocused);
@@ -118,7 +119,7 @@ const TextField = (props: InternalTextFieldProps) => {
             {floatingPlaceholder && (
               <FloatingPlaceholder
                 placeholder={placeholder}
-                floatingPlaceholderStyle={[typographyStyle, floatingPlaceholderStyle]}
+                floatingPlaceholderStyle={_floatingPlaceholderStyle}
                 floatingPlaceholderColor={floatingPlaceholderColor}
                 floatOnFocus={floatOnFocus}
                 validationMessagePosition={validationMessagePosition}