react native alignself not working with position absolute - react-native

Question

I am trying to create a small tooltip in react native. For the most part it works. But want to use alignself, to auto size the view that contains text. It works with position relative, but that pushes the content away. Position absolute puts all the text inside the tooltip below each other and the tooltip is very narrow.
I have seen some modules for react native tooltip, but those use actions, and I just need to use text.
Anybody an idea on how to get this working?
The is what I have:
constructor(props) {
super(props);
this.state = {
visible: false,
};
}
toggleStatus() {
this.setState({visible: true});
setTimeout(() => {
this.setState({visible: false});
}, 3000);
}
toolTip = () => {
return (
<View style={styles.containerMain}>
{renderIf(this.state.visible,
<View style={styles.tooltipWrapper}>
<Text style={styles.tooltipStyle}>{this.props.tooltipText}</Text>
</View>
)}
<View style={styles.questionMarkWrapper}>
<TouchableOpacity disabled={this.state.visible} onPress={()=>this.toggleStatus()}>
<Text style={styles.questionMark}>?</Text>
</TouchableOpacity>
</View>
</View>
)
}
render() {
return (
<View style={styles.containerStyle}>
{this.toolTip()}
</View>
)
}
And styling I use:
containerMain: {
alignItems: 'flex-end',
},
tooltipWrapper: {
position: 'absolute',
top: 0,
right: 10,
padding: 5,
borderRadius: 4,
backgroundColor: 'rgba(0,0,0,0.6)',
},
tooltipStyle: {
fontSize: 11,
color: 'white',
},
questionMarkWrapper: {
justifyContent: 'center',
flexDirection: 'row',
marginRight: 10,
},
questionMark: {
fontSize: 16,
color: 'rgba(255,255,255,0.4)',
borderRadius: 50,
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.4)',
borderStyle: 'solid',
height: 26,
width: 26,
paddingLeft: 9,
paddingTop: 2,
}
This is how the tooltip should look like (not the actual location):
And this is how it looks like now: