React Native Horizontal ScrollView does not fully scrolled - react-native

Question

I have the above ScrollViews( highlighted in yellow color ) each one with maximum 6 items. When I try to scroll it to the end, I can't scroll 100%. Part of the last item will not view. See the following screenshot.
The highlighted red area is not able to see or scroll.
Following is the component,
const Item = ({title, data}: any) => (
<View style={styles.itemRoot}>
<View style={styles.item}>
<View style={styles.itemLeft}>
{/* left inner container */}
</View>
<View style={styles.itemRightRoot}>
<View style={styles.itemRightTitle}>
<Text>TITLE</Text>
</View>
<View style={styles.itemRight}>
{/* area which render each ScrollViews */}
{title.items.map((item: any, index: number) => {
return (
<ScrollView horizontal>
{item.map((child, index) => {
return (
<View
key={index}
style={{
width: isTablet()
? (Dimensions.get('screen').width - 80) / 6
: (Dimensions.get('screen').width - 64) / 3,
marginRight: 8,
marginBottom: 8,
}}>
<SectionInnerItem />
</View>
);
})}
</ScrollView>
);
})}
</View>
</View>
</View>
{/* separator */}
<View
style={{
height: 2,
marginTop: 24,
marginBottom: 24,
backgroundColor: '#36363D',
width: Dimensions.get('screen').width - 64,
}}
/>
</View>
);
And this is the stylesheet,
const styles = StyleSheet.create({
itemRoot: {
marginLeft: 24,
marginRight: 16,
},
item: {
display: 'flex',
flexDirection: 'row',
},
itemRightRoot: {
display: 'flex',
flexDirection: 'column',
},
itemRightTitle: {
marginLeft: 24,
marginRight: 16,
},
itemRight: {
marginLeft: 24,
marginRight: 16,
paddingTop: 16,
paddingBottom: 16,
},
itemLeft: {},
});
What am I doing wrong here? Also, is there a way I can just use one single ScrollView but with a maximum of 6 items on each row and the rest of the items in the next row?

Answer 1

Please Give flex: 1 for the itemRightRoot. The problem is that, itemRightRoot doesn't know the width of the rest of the screen with the square on the left side of the screen.
itemRightRoot: {
flex: 1,
display: 'flex',
flexDirection: 'column',
},