Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Button with icon in the right side

See original GitHub issue

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?

Issue Analytics

State:
Created 5 years ago
Reactions:7
Comments:5

Top GitHub Comments

10reactions

Rajan-Savaliyacommented, Aug 23, 2021

contentStyle={{flexDirection: ‘row-reverse’}} work for me

7reactions

jpaulomottacommented, Aug 12, 2021

I was able to get the icon on the right with the following code:

contentStyle={{flexDirection: 'row-reverse'}}

Full example:

<Button
  mode="contained"
  onPress={addPhoneNumber}
  style={{ padding: spacing.s3, marginTop: spacing.s8, backgroundColor: colors.grey200 }}
  dark={false}
  icon="chevron-right"
  contentStyle={{flexDirection: 'row-reverse'}}
>
  Next
</Button>

Result: Screen Shot 2021-08-12 at 19 15 38