Horizontal ScrollView cutting child view at the end

Question

I have a Scrollview which I set to horizontal, but it when it doesn't show the componets fully, it cuts the last view or if the width and height of the child views are bigger, it won't show all the views and it will still cut the last view, i have tried changing the contentContainerStyle still it cuts, Please what may be wrong

BELOW IS MY CODE

   export default class Home extends Component {
    constructor(props) {
    const Width = Dimensions.get('window').width;
    super(props);
    this.state = {
        n: '0',
        no: 0,
        width: Width / 3
    };
 }
 return (
 <View style={styles.ox}>
 <View style={styles.firstColumn}>
  <Text style={styles.columnText}>
     Top Sold Items in your School{'\n'}
  </Text>
     <View style={styles.pictures}>
         <ScrollView contentContainerstyle={{flexGrow:1,
             flexDirection: 'row',}}  horizontal={true}
                     showsHorizontalScrollIndicator={false}
                     showsVerticalScrollIndicator={false}
                     automaticallyAdjustContentInsets={false}
                     directionalLockEnabled={true}
                     bounces={false}
                     scrollsToTop={false}>
             <View style={styles.miniPictures}>
         </View>
         <View style={styles.miniPictures}>
         </View>
             <View style={styles.miniPictures}>
             </View>
             <View style={styles.miniPictures}>
             </View>
             <View style={styles.miniPictures}>
             </View>
             <View style={styles.miniPictures}>
             </View>
         </ScrollView>
     </View>
 </View>
 </View>
    );
}
}
const dimensions = Dimensions.get('window');
const Height = (dimensions.height) / 5;
const Width = dimensions.width;
const styles = StyleSheet.create({
pictures: {
    flex: 1,
},
miniPictures: {
    height: 70,
    width: 70,
    marginRight: 10,
    borderTopRightRadius: 6,
    borderTopLeftRadius: 6,
    borderBottomLeftRadius: 6,
    borderBottomRightRadius: 6,
    backgroundColor: '#000',
    borderColor: '#d1d1d1'
},
columnText: {
    fontFamily: 'mont-medium',
    fontSize: 12,
    color: '#000'
},
firstColumn: {
    flexDirection: 'column',
    marginLeft: '6%',
    marginRight: '40%',
    paddingTop: 20,
    width: Width,
    height: 200
},
ox: {
    flexDirection: 'column',
    width: '100%',
    marginTop: 15,
},
headerCenter: {
    fontFamily: 'mont-bold',
    fontSize: 34,
    alignSelf: 'center',
    marginTop: 27,
    marginBottom: 14,
    letterSpacing: 0.7,
},
icons: {
    width: Width * (14.5/100),
    height: Width * (14.5/100),
    borderRadius: (Width* (14.5/100))/2,
    backgroundColor: '#F2C490',
    alignContent: 'center'
},
iconRow:{
    flex: 1,
    alignContent: 'center',
    justifyContent: 'space-between',
    marginLeft: 15,
    marginRight: 15,
    flexDirection: 'row'
}
});

Actually, how you want the scrollView to show your horizontal cards?. If the size is big or if the card cannot be completely shown it will cut. Do you want only to show cards which can be completely shown? then what will happen ones they scroll?. — Ravi Raj, Aug 18 '18 at 10:22
All the cards are the same size, so I want the scroll view to show all the cards fully — Adokiye Iruene, Aug 18 '18 at 10:36

score 3 · Accepted Answer · answered Aug 18 '18 at 11:02

Problem at:

firstColumn: {
    flexDirection: 'column',
    marginLeft: '6%',// Problem
    marginRight: '40%',
    paddingTop: 20,
    width: Width,// Problem
    height: 200
},

This styles has marginLeft 6% but still has width is Width, you can change width to Width - Width * 0.12 or remove marginLeft

Horizontal ScrollView cutting child view at the end

1 Answers1