Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to center Textinput icon #3492

Open
medonagy45 opened this issue Nov 27, 2022 · 4 comments
Open

How to center Textinput icon #3492

medonagy45 opened this issue Nov 27, 2022 · 4 comments
Labels
question Question related to the library, not an issue TextInput

Comments

@medonagy45
Copy link

medonagy45 commented Nov 27, 2022

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

@medonagy45 medonagy45 added the question Question related to the library, not an issue label Nov 27, 2022
@medonagy45
Copy link
Author

medonagy45 commented Nov 28, 2022

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,

@raduly-zalan
Copy link

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.

@Mallain23
Copy link

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

@Mallain23
Copy link

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Question related to the library, not an issue TextInput
Projects
None yet
Development

No branches or pull requests

4 participants