React Native: flex - move content to far right - reactjs

Question

I'm trying to move the selection text to the far right on this Detail component. I've tried justifyContent on the View with the sideBySide style and alignSelf on the selectionStyle. I've tried various combinations but am not able to move the selection text to the far right, up until where the arrow might be. I feel like there's something simple I'm missing.
Here's what it looks like (Selection is not to the far right):
Thanks for any help!
const Detail = ({ onPress, selection, text, info }) => {
const wrapper = {
flex: 1,
paddingTop: 20,
paddingLeft: 16,
};
const sideBySide = {
flexDirection: 'row',
};
const textStyle = {
flex: 1.3,
fontWeight: '500',
fontSize: 12,
paddingRight: 5,
};
const selectionStyle = {
flex: 1,
color: 'blue',
fontWeight: '500',
fontSize: 12,
};
const infoWrapper = {
paddingTop: 8,
paddingBottom: 20,
};
return (
<ViewWrapper onPress={onPress} noArrow={true}>
<View style={wrapper}>
<View style={sideBySide}>
<Text style={textStyle}>
{text}
</Text>
<Text style={selectionStyle}>
{selection}
</Text>
</View>
<View style={infoWrapper}>
<Text style={subHeader}>
{info}
</Text>
</View>
</View>
</ViewWrapper>
);
};
const iconView = { position: 'absolute', right: 16 };
const icon = { color: 'gray', fontSize: 14 };
const ViewWrapper = ({ onPress, children, noArrow, style }) => {
const view = {
flexDirection: 'row',
alignItems: 'center',
paddingRight: Platform.OS === 'ios' && !noArrow ? 35 : 16,
backgroundColor: 'white',
};
return (
<TouchableHighlight underlayColor="#eee" onPress={onPress}>
<View style={[view, style]}>
{children}
{Platform.OS === 'ios' &&
!noArrow && (
<View style={iconView}>
<Icon name="arrow" style={icon} />
</View>
)}
</View>
</TouchableHighlight>
);
};

Answer 1

Remove flex: 1 from selectionStyle