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.

Sign up for GitHub

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

Jump to bottom

Icon.Button has margin right by default #1020

Closed
jayleeman12 opened this issue Jun 13, 2019 · 4 comments
Closed

Icon.Button has margin right by default #1020

jayleeman12 opened this issue Jun 13, 2019 · 4 comments

Comments

@jayleeman12
Copy link

jayleeman12 commented Jun 13, 2019 •
edited

When using Icon.Button, the icon has marginRight: 10 by default - which means in order for the icon to be in the center of the container, you have to add a margin or padding to the left, or remove the marginRight (by specifying iconStyle={{marginRight: 0}} on the Icon.Button).
As seen in https://github.com/oblador/react-native-vector-icons/blob/master/lib/icon-button.js#L19
I assume this is because if Text is inserted as a child to the Icon.Button the Icon needs to be moved left, to create spacing between the Icon and the Text
Is there any built in way to center an Icon within an Icon.Button?
Or does this need to be fixed?
@jayleeman12 jayleeman12 mentioned this issue Jun 29, 2019
Closed
@sakethaquarterlyai
Copy link

we can pass use it

<Icon.Button
name="arrow-forward"
iconStyle={{marginRight:0}}
backgroundColor={APP_PLACE_HOLDER}
color="#ffffff"
size={35}
></Icon.Button>

@jayleeman12
Copy link
Author

@sakethaquarterlyai Well yes, you can. But don't you think it should be a part of the component's responsibility to create that spacing only if there's text? Instead of you, the one using the component, checking that yourself and adding/removing the spacing within your code?

@inspire22
Copy link

Just adding that this was an issue I experienced as well, specifically with ionicons when used in the header bar.

@johnf
Copy link
Collaborator

johnf commented May 13, 2024

Closing as Icon.Button is being removed from the next version of RNVI

@johnf johnf closed this as completed May 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Remove default iconStyle for Icon.Button jayleeman12/react-native-vector-icons
4 participants
@johnf @inspire22 @jayleeman12 @sakethaquarterlyai