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

When making a Button with an icon only, the icon is not centered #771

Closed
hendrul opened this issue Dec 8, 2017 · 5 comments
Closed

When making a Button with an icon only, the icon is not centered #771

hendrul opened this issue Dec 8, 2017 · 5 comments

Comments

@hendrul
Copy link

hendrul commented Dec 8, 2017 •
edited

The icon component inside Button adds a marginRight: 15px, what makes the icon get uncentered... the only way I found to fix this is...

<Button icon={{ name: 'filter-list', style: { marginRight: 0 } }}/>

captura de pantalla 2017-12-08 a la s 1 20 10 p m
@xavier-villelegier
Copy link
Collaborator

Hey @hendrul, I advise you to use the Icon component if you just need a clickable icon, as suggested in #639

@santoshzp
Copy link

same issue

@xavier-villelegier
Copy link
Collaborator

Closing this since the Icon component does the job.
We updated the Button component in the v1.0.0-beta, if this is really necessary we will fix it in the v1.

@mohammad7t
Copy link
Contributor

@xavier-villelegier Some features like disabled and loading props are not implemented in Icon but it is reasonable to have a button with only a centered icon.

mohammad7t added a commit to mohammad7t/react-native-elements that referenced this issue Mar 30, 2018
@mohammad7t
Remove Text from Button if title is empty
2ad41e9 
Fixes (react-native-elements#639 , react-native-elements#771 , react-native-elements#901) by not adding redundant `<Text/>` component with `styles.title.padding = 8` if title is empty.
@mohammad7t mohammad7t mentioned this issue Mar 30, 2018
Merged
xavier-villelegier pushed a commit that referenced this issue Apr 1, 2018
@mohammad7t @xavier-villelegier
Remove Text from Button if title is empty (#1049)
fa14656 
* Remove Text from Button if title is empty

Fixes (#639 , #771 , #901) by not adding redundant `<Text/>` component with `styles.title.padding = 8` if title is empty.

* Handle empty string in title prop of Button

Without this change, `title={null}` works correctly, but `title=""` throws an exception described and resolved in following issue: facebook/react-native#13243 (comment)
This commit makes handles both `title={null}` and `title=""`.
@xavier-villelegier
Copy link
Collaborator

Just FYI, in the v1.0.0-beta4 coming soon, the icon should be centered if you provide title={null} or title=""

@mohammad7t mohammad7t mentioned this issue Apr 5, 2018
Closed
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

No branches or pull requests
5 participants
@mohammad7t @hendrul @iRoachie @santoshzp @xavier-villelegier