Merge pull request #23547 from kosmydel/@swm/migration/text-input-label

Migrate TextInputLabel/index.js to a functional component

Author: marcaaron

src/components/TextInput/TextInputLabel/index.js

@@ -1,32 +1,34 @@
-import React, {PureComponent} from 'react';
+import React, {useRef, useEffect} from 'react';
 import {Animated} from 'react-native';
 import styles from '../../../styles/styles';
 import {propTypes, defaultProps} from './TextInputLabelPropTypes';
 import CONST from '../../../CONST';
 
-class TextInputLabel extends PureComponent {
-    componentDidMount() {
-        if (!this.props.for) {
+function TextInputLabel({for: inputId, label, labelTranslateY, labelScale}) {
+    const labelRef = useRef(null);
+
+    useEffect(() => {
+        if (!inputId || !labelRef.current) {
             return;
         }
-        this.label.setAttribute('for', this.props.for);
-    }
+        labelRef.current.setAttribute('for', inputId);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
 
-    render() {
-        return (
-            <Animated.Text
-                ref={(el) => (this.label = el)}
-                pointerEvents="none"
-                accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
-                style={[styles.textInputLabel, styles.textInputLabelDesktop, styles.textInputLabelTransformation(this.props.labelTranslateY, 0, this.props.labelScale)]}
-            >
-                {this.props.label}
-            </Animated.Text>
-        );
-    }
+    return (
+        <Animated.Text
+            ref={labelRef}
+            pointerEvents="none"
+            accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
+            style={[styles.textInputLabel, styles.textInputLabelDesktop, styles.textInputLabelTransformation(labelTranslateY, 0, labelScale)]}
+        >
+            {label}
+        </Animated.Text>
+    );
 }
 
+TextInputLabel.displayName = 'TextInputLabel';
 TextInputLabel.propTypes = propTypes;
 TextInputLabel.defaultProps = defaultProps;
 
-export default TextInputLabel;
+export default React.memo(TextInputLabel);