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?
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>