react-native-paper icon indicating copy to clipboard operation
react-native-paper copied to clipboard

How to center Textinput icon

Open medonagy45 opened this issue 3 years ago • 4 comments

How to vertically center textinput Icon when multiline as it is forced to top

medonagy45 avatar Nov 27 '22 09:11 medonagy45

I have made a patch to make that happen

diff --git a/node_modules/react-native-paper/src/components/TextInput/Adornment/TextInputIcon.tsx b/node_modules/react-native-paper/src/components/TextInput/Adornment/TextInputIcon.tsx
index f84d907..46ee100 100644
--- a/node_modules/react-native-paper/src/components/TextInput/Adornment/TextInputIcon.tsx
+++ b/node_modules/react-native-paper/src/components/TextInput/Adornment/TextInputIcon.tsx
@@ -114,7 +114,7 @@ const TextInputIcon = ({
   }, [forceTextInputFocus, forceFocus, isTextInputFocused, onPress]);
 
   return (
-    <View style={[styles.container, style]}>
+    <View style={[styles.container, {right: style.right,height: '100%'}]}>
       <IconButton
         icon={name}
         style={styles.iconButton}
@@ -138,7 +138,7 @@ const styles = StyleSheet.create({
     width: ICON_SIZE,
     height: ICON_SIZE,
     justifyContent: 'center',
-    alignItems: 'center',
+    alignItems: 'flex-end'
   },
   iconButton: {
     margin: 0,

medonagy45 avatar Nov 28 '22 09:11 medonagy45

Hi @medonagy45,

Could you please provide more details when the TextInput.Icon component is not vertically aligned? A minimal repro would be highly appreciated.

I have made an example, where the icon by default is aligned to the center. It might be helpful, and it might be the case that the patch is not necessary.

raduly-zalan avatar Mar 02 '23 14:03 raduly-zalan

If you decrease the height to 45 and make it outlined mode you'll see its not centered

Mallain23 avatar Mar 12 '24 02:03 Mallain23

image

Mallain23 avatar Mar 12 '24 02:03 Mallain23