React Native: Text and Icon inline

Question

I am trying to aline a Icon and a Text inline and align the text to the left and the icon to the right...

This is how it is looking at the moment:

However, I want to have the text aligned to the left and the icon to the right and also both on the same height...

My code so far:

<Text
  style={{
    fontSize: 16,
    paddingTop: 15,
    paddingBottom: 15,
    paddingLeft: 10,
    paddingRight: 10,
    color: "black"
  }}
>
  Kategorien:
  <Icon
    style={{
      alignItems: "center",
      justifyContent: "center",
      textAlign: "right"
    }}
    name="keyboard-arrow-down"
    type="MaterialIcons"
  />
</Text>

I also tried to use the react native elements and make use of the right and left element, however, in this case the icon and text is not inline...

<View>
  <Left>
    Text...
  </Left>
  <Right>
    Icon...
  </Right>
</View>

You guys have any idea?

Answer 1

You need wrap with a View your Text and Icon component. And you can set just padding horizontal and vertical in there.

       <View style={{
            paddingVertical: 15,
            paddingHorizontal: 10,
            flexDirection: "row",
            justifyContent: "space-between",
            alignItems: "center"
        }}>
            <Text style={{
                    fontSize: 16,
                    color: "black"
                }}>Kategorien:</Text>
            <Icon/>
        </View>