React-native-paper: Button with icon in the right side

[yaronlevi]

Sometimes it is needed to put the icon in the Button component right to text, instead of left.
For example when using Buttons in a pagination screen (prev, next).

Tried setting styled={{flexDirection:'row-reverse'}} via the style prop but the style props is being applied to the outer AnimatedPaper element and not the inner view which sets the direction.

How can make so that the icon will appear right of the text?

[gawrysiak]

I've been looking into the guidelines and there's no such examples. If you try to google "material design pagination" and switch to images, it's not how it's normally done as well.

On the other side, your request is pretty basic and there's several ways to add support for it - maybe with an iconRight prop or a more flexible API, e.g.

<Button>
  <Text>Prev</Text>
  <Icon name="prev" />
</Button>

If you look at the official web material component, it's how they did it.

Should it be done? There's definitely other MD guidelines areas that aren't yet supported at this point and they should be maybe prioritized. But ultimately, it's up to the Callstack guys to decide.

What I normally do in such cases - simply copy the paper's component as your internal component and modify it to suit your needs. Paper grows rapidly and allows more every day, but the possible customization options are almost unlimited, so it will never cover them all.

[Noitidart]

I am also trying to get an icon in the right, I do the row-reverse on the contentStyle prop but the padding gets messed up:

[github-actions[bot]]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.