icon in button is not centered

[pstanton]

v0.19.0

1. Explain what you did

<Button icon={{ name: "home" }} buttonStyle={{ width: 50 }} />
<Button icon={{ name: "home" }} containerViewStyle={{ width: 50 }} />

2. What you expected to happen

According to the docs, without text the button should display centered.

https://github.com/react-native-training/react-native-elements/blob/v0.19.0/docs/API/buttons.md

"leftIcon or icon"
"displays a centered icon (when no text) or to the left (with text). (can be used along with rightIcon as well)"

3. What actually happens

The button is shifted left of center.

[iRoachie]

Hey there!

When the icon prop is passed in, it's automatically set to leftIcon as you can see here.

The icon has a default style of {{ marginRight: 10 }} defined here.

However that default style is overrided by the style prop on the icon object we pass in here.

Which means we can override it like this!

<Button icon={{ name: "home",  style: { marginRight: 0 } }} buttonStyle={{ width: 50 }} />

Takes breath:
This will be alot easier to do in future versions, actually the Button component was completely rewritten in the beta. Try it out when you get a chance.

[xavier-villelegier]

Closing this as it seems to be resolved (thanks @iRoachie)
Feel free to try the new Button in the beta

[mohammad7t]

@xavier-villelegier it seems padding of <Text/> component for the title is also another cause of this issue as I checked in beta. I just submitted a pull request to fix it.

[methodbox]

This appears to be yet another issue that was "fixed" that isn't fixed. This is my first experience with the library and so far it seems many fundamental elements are missing or broken.

I'm trying to make a round button with an icon.

You have round icons, which apparently can be made into buttons (that's not confusing) but adding an icon to a button results in the icon being, seemingly permanently so, stuck on the left side.

There's nothing in the docs to indicate how to make a round icon, so it's unclear what exactly can be done with props to do this, though there's about 15 examples at the top of the page.

You might have fewer github issues if your docs were more complete.

[iRoachie]

@methodbox The issue is closed because the user filed an issue with v19.0.1 as the version they were using. There's no "fix" for his issue in a subsequent stable release so the resulting method was given as a solution for his particular version.

The last stable release was v19.0.1. However, since then, we have had 6 beta versions with a lot of changes - the latest one being 1.0.0-beta7.

Docs are an ongoing process and this library originally released a long time ago as being one of the first react native UI libraries on launch. The Button docs are made very less confusing in the next version, and I'd love if you have any constructive feedback that could improve the library. All changes for the next release are on the next branch.