React Native Horizontal ScrollView does not fully scrolled

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',
},