React Native: Component occuping 100% width of his parent container - css

Question

Good morning everyone, I wanted to ask you about this problem I'm having with my React Native App. Basically it treats that my StatusComponent occupies 100% of the width of its container. I tried in many ways but I can't make its width independent. I share some images and part of my code so it is easier to understand.
In this case the width of the status component its okey because the name of the Event, is smaller than the width of the status component:
Link to Image
MatchComponent Code:
<TouchableOpacity
onPress={() => console.log('Test')})
}>
<LinearGradient
start={{x: 0, y: 0}}
end={{x: 1, y: 2}}
colors={['#FE7062', '#FE8762']}
style={styles.matchContainer}>
<View style={styles.subContainer}>
<View
style={[
styles.footballContainer,
{
backgroundColor: '#4D6FE2',
},
]}>
<Text
style={[
styles.footballText,
{color: 'white'},
]}>
F5
</Text>
</View>
<View>
<Text
style={[
styles.matchTitle,
{color: 'white'},
]}>
Partido 2
</Text>
<Text
style={[
styles.matchField,
{color: 'white'},
]}>
Cancha
</Text>
<StatusComponent
/>
</View>
</View>
<View
style={{
alignItems: 'center',
width: 110,
}}>
<Text style={styles.dateText}>27/08/22</Text>
<View style={{flexDirection: 'row'}}>
<Text
style={[
styles.dateText,
{color: 'white'},
]}>
10:00
</Text>
</View>
</View>
</LinearGradient>
</TouchableOpacity>
);
};
MatchComponent Style:
matchContainer: {
position: 'relative',
height: 95,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: 15,
borderRadius: 20,
marginBottom: 15,
},
subContainer: {
flexDirection: 'row',
alignItems: 'center',
},
footballContainer: {
backgroundColor: '#4D6FE2',
height: 43,
width: 43,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 10,
marginRight: 15,
},
footballText: {
color: 'white',
fontFamily: 'OpenSans-SemiBold',
fontSize: 18,
},
matchTitle: {
fontFamily: 'OpenSans-Bold',
color: 'white',
fontSize: Platform.OS === 'ios' ? 19 : 18,
},
matchField: {
fontFamily: 'OpenSans-Regular',
color: 'white',
fontSize: 14,
},
dateText: {
fontFamily: 'Inter-Medium',
fontSize: 14,
color: 'white',
},
joinContainer: {
backgroundColor: 'orange',
height: 28,
justifyContent: 'center',
borderRadius: 30,
paddingHorizontal: 5,
marginBottom: 4,
},
joinText: {
color: 'white',
fontFamily: 'Inter-Bold',
fontSize: Platform.OS === 'ios' ? 16 : 14,
},
StatusComponent
<View
style={[
styles.matchStatusContainer,
{
backgroundColor: 'red'
},
]}>
<Text
style={[
styles.matchStatusText,
{
color: 'white'
},
]}>
RESER
</Text>
)}
</View>
StatusComponent Style
matchStatusContainer: {
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 8,
marginVertical: 5,
borderRadius: 30,
height: 18,
},
matchStatusText: {
fontFamily: 'Inter-Medium',
fontSize: 12,
marginLeft: 4,
},