React-Native make ScrollView childs take the width of the screen - react-native

Question

I have a component with a ScrollView that works, and I want to add a scenario where for an example I want to fit all content on the screen width, and for other scenarios I want to scroll through them. How Can I achieve that ?
Here is my current Implementation:
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
style={styles.container}
contentContainerStyle={styles.containerContainer}
>
<View>
<View style={styles.tabs}>
{Object.keys(tabs).map((item, index) => {
const isSelected = item === selectedTab;
return (
<Tab
key={item}
item={tabs[item]}
select={() => select(index, item)}
setMeasures={(width) => setWidth(width, index)}
isSelected={isSelected}
gap={gap}
/>
);
})}
</View>
<Animated.View
style={[
styles.indicator,
{
transform: [{ translateX: value }],
},
measures[selectedIndex]
? { width: measures[selectedIndex] - gap }
: null,
]}
/>
</View>
</ScrollView>
and here is the stylings
indicator: {
backgroundColor: BURNING_ORANGE,
height: hp(2),
width: 0,
},
label: {
alignItems: 'center',
color: CLOUD_BURST,
fontFamily: CIRCULARMEDIUM,
marginVertical: hp(10),
},
selectedLabel: {
alignItems: 'center',
color: BURNING_ORANGE,
fontFamily: CIRCULARMEDIUM,
marginVertical: hp(10),
},
tab: {
alignItems: 'center',
flex: 1,
flexDirection: 'row',
paddingEnd: wp(20),
},
tabs: {
flexDirection: 'row',
},
Also, If I added flex: 1 to contentContainerStyle of my ScrollView the View just dissappear