ScrollView not scrolling all components properly - react-native

Question

I have cards written like this, they scroll horizontal but the last card, whenever I scroll it's not shown, below, is the image of the current code.
They are price cards that scroll horizontally, kindly help me fix this. I have banged my head around it and it seems I have failed
Please help me guys am in need of real help
class Pricing extends React.Component {
state = {
...
};
render() {
return (
<ScrollView
showsHorizontalScrollIndicator={false}
horizontal={true}
scrollEnabled
pagingEnabled
scrollEnabled
showsHorizontalScrollIndicator={false}
scrollEventThrottle={16}
snapToAlignment="center"
>
{this.state.FlatListItems.map(item => (
<View style={styles.subContainer} key={item.id}>
<View style={{
justifyContent: "center",
alignItems: "center",
}}>
<View>
<Image
source={item.image}
/></View>
<View>
<Text style={styles.subType}>{item.subType}</Text>
<Text style={styles.textSub}>{item.textSub}</Text>
</View>
<View>
<Text style={styles.currency}>{item.amount}<Text style={styles.currencyText}> Month</Text></Text>
</View>
</View>
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Subscribe</Text>
</TouchableOpacity>
</View>
))}
</ScrollView>
);
}
}
const styles = StyleSheet.create({
subContainer: {
justifyContent: "center",
alignItems: "center",
backgroundColor: "transparent",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 0,
},
shadowOpacity: 0.22,
shadowRadius: 10,
elevation: 1,
borderRadius: 10,
padding: 15,
marginTop: 20,
width: '50%'
},
})
Pricing.navigationOptions = {
header: null
}
export default withNavigation(Pricing);