fix(text-input): remove text duplication of label as component (#4115)

Co-authored-by: Lev Shapiro <levshapiro@MacBook-Air-2.local>
callstack · Oct 12, 2023 · 2bb6256 · 2bb6256
1 parent d698282
commit 2bb6256
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 3 deletions.
diff --git a/example/src/Examples/TextInputExample.tsx b/example/src/Examples/TextInputExample.tsx
@@ -32,6 +32,7 @@ const initialState: State = {
   largeText: '',
   flatTextPassword: 'Password',
   outlinedLargeText: '',
+  outlinedCustomLabel: '',
   outlinedTextPassword: '',
   nameNoPadding: '',
   customStyleText: '',
@@ -89,6 +90,7 @@ const TextInputExample = () => {
     largeText,
     flatTextPassword,
     outlinedLargeText,
+    outlinedCustomLabel,
     outlinedTextPassword,
     nameNoPadding,
     customStyleText,
@@ -290,6 +292,16 @@ const TextInputExample = () => {
                 />
               }
             />
+            <TextInput
+              mode="outlined"
+              style={[styles.inputContainerStyle, styles.fontSize]}
+              label={<Text style={styles.inputLabelText}>Custom label</Text>}
+              placeholder="Type something"
+              value={outlinedCustomLabel}
+              onChangeText={(outlinedCustomLabel) =>
+                inputActionHandler('outlinedCustomLabel', outlinedCustomLabel)
+              }
+            />
             <TextInput
               mode="outlined"
               style={[styles.inputContainerStyle, styles.fontSize]}
@@ -812,6 +824,9 @@ const styles = StyleSheet.create({
     flex: 1,
     marginLeft: 4,
   },
+  inputLabelText: {
+    color: MD3Colors.tertiary70,
+  },
 });
 
 export default TextInputExample;
diff --git a/example/utils/index.ts b/example/utils/index.ts
@@ -1,7 +1,7 @@
 import { Platform } from 'react-native';
 
 import ExpoMaterial3ThemeModule from '@pchmn/expo-material3-theme/build/ExpoMaterial3ThemeModule';
-import { MD3LightTheme, MD3DarkTheme, MD3Theme } from 'react-native-paper';
+import { MD3DarkTheme, MD3LightTheme, MD3Theme } from 'react-native-paper';
 
 type ReducerAction<T extends keyof State> = {
   payload: State[T];
@@ -24,6 +24,7 @@ export type State = {
   largeText: string;
   flatTextPassword: string;
   outlinedLargeText: string;
+  outlinedCustomLabel: string;
   outlinedTextPassword: string;
   nameNoPadding: string;
   customStyleText: string;

diff --git a/src/components/TextInput/Label/InputLabel.tsx b/src/components/TextInput/Label/InputLabel.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Animated, StyleSheet, Dimensions } from 'react-native';
+import { Animated, Dimensions, StyleSheet } from 'react-native';
 
 import AnimatedText from '../../Typography/AnimatedText';
 import type { InputLabelProps } from '../types';

diff --git a/src/components/TextInput/Label/LabelBackground.tsx b/src/components/TextInput/Label/LabelBackground.tsx
@@ -77,7 +77,7 @@ const LabelBackground = ({
       numberOfLines={1}
       maxFontSizeMultiplier={maxFontSizeMultiplier}
     >
-      {label}
+      {typeof label === 'string' ? label : label?.props.children}
     </AnimatedText>,
   ];
 };