React Native. Lagged scroll animation in ScrollView - reactjs

Question

When I scroll vertically up and down, animation starts lagging in the first two components (CompetitionsList, CampList) after the slider (BannerSwiper). I couldn’t fix it. I tried using Animation.ScrollView with "UseNativeDriver: true", but it didn’t help. Something might be wrong with css.
Here is a gif of screen:
https://i.yapx.ru/DT9CR.gif
This is my code:
export default class HomeComponent extends React.Component {
render() {
return (
<View style={styles.container}>
<ScrollView >
<BannerSwiper/>
<CompetitionsList home={true} {...this.props}/>
<CustomDivider/>
<CampList home={true} {...this.props}/>
<CustomDivider/>
<NewsComponent home={true} {...this.props}/>
<CustomDivider/>
<AthletesBirthdayList {...this.props}/>
<CustomDivider/>
<RatingsBlock/>
<CustomDivider/>
<SocialBlock/>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f2f2f2',
}
});
export default class CompetitionsList extends React.Component {
...
render() {
const {
compListForHome
} = this.props.competitions;
return (
<View style={styles.homeContainer}>
<View style={styles.headerContainer}>
<Text style={[styles.header, {marginRight: 'auto'}]}>СОРЕВНОВАНИЯ</Text>
<Text
style={[styles.header, {marginLeft: 'auto', color: '#2f95dc'}]}
onPress={() => this.props.routing('navigate', 'Competitions')}
>ВСЕ</Text>
</View>
<View style={{alignItems: 'center'}}>
<View style={styles.contentContainer}>
<ScrollView
style={{flex: 1}}
horizontal={true}
showsHorizontalScrollIndicator={false}>
<AnimatedComponent>
<View style={styles.cardContainer}>
<View style={styles.cardWrapper}>
{
compListForHome.map(event =>
<TouchableWithoutFeedback key={event.id} onPress={() => console.log(event.id)}>
<Card
containerStyle={styles.cardWidth}
title={
<View style={styles.cardTitleStyleContainer}>
<Text numberOfLines={1} style={styles.cardTitleStyleText}>{event.name}</Text>
</View>
}
imageStyle={styles.image}
image={event.URL_logo? {uri: event.URL_logo} : SP_IMAGE}>
<View style={styles.cardLabeledContainer}>
<Text style={styles.cardTextLabeled} numberOfLines={1}>{dateFormatter(event.start_date)}</Text>
<Text style={styles.cardTextLabeled} numberOfLines={1}>{dateFormatter(event.end_date)}</Text>
</View>
<Text style={styles.cardText} numberOfLines={1}>{getFullCourseNameByCode(event.course)}</Text>
<Text style={styles.cardText} numberOfLines={1}>{getFullCompetitionStatusByCode(event.status)}</Text>
{
event.reg_status
? <Text style={styles.cardText} numberOfLines={1}>Регистрация: {getFullRegistrationStatusByCode(event.reg_status)}</Text>
: null
}
</Card>
</TouchableWithoutFeedback>
)
}
</View>
</View>
</AnimatedComponent>
</ScrollView>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
spinContainer: {
height: 50
},
overlay: {
flex: 1,
position: 'absolute',
bottom: 10,
width: SCREEN_WIDTH,
justifyContent: 'center',
alignItems: 'center'
},
filterBtn: {
backgroundColor: '#2f95dc',
alignSelf: 'center'
},
homeContainer: {
flex: 1,
marginHorizontal: 50
},
fullListContainer: {
flex:1
},
headerContainer: {
flex: 1,
flexDirection: 'row',
width: SCREEN_WIDTH-80
},
header: {
fontSize: 17,
color: 'rgba(96,100,109, 1)',
lineHeight: 24,
marginTop: 15
},
contentContainer: {
flex: 1,
marginTop: 10,
width: SCREEN_WIDTH
},
cardContainer: {
flex: 1,
flexDirection: 'column',
marginRight: 10
},
cardWrapper: {
flex: 1,
flexDirection: 'row'
},
cardTitleStyleContainer: {
padding: 20,
marginBottom: 15,
borderTopStartRadius: 5,
borderTopEndRadius: 5,
backgroundColor: "#2f95dc",
alignItems: 'center'
},
cardTitleStyleText: {
fontSize: 16,
lineHeight: 24,
color: '#fff',
fontWeight: 'bold'
},
cardWidth: {
width: 250,
height: 360,
borderWidth: 1,
borderRadius: 6,
borderColor: '#ddd',
shadowColor: '#000',
shadowOffset: { width: 5, height: 5 },
shadowOpacity: 0.8,
shadowRadius: 5,
elevation: 4,
marginBottom: 7
},
image: {
width: 100,
height: 100,
borderRadius: 100,
overflow: 'hidden',
alignSelf: 'center'
},
cardText: {
color: 'rgba(96,100,109, 0.8)',
fontSize: 14,
lineHeight: 14,
alignSelf: 'center',
marginBottom: 10
},
cardLabeledContainer: {
backgroundColor: 'rgba(0,0,0,0.05)',
borderRadius: 3,
marginTop: 10,
marginBottom: 20,
marginHorizontal: 30,
padding: 5
},
cardTextLabeled: {
alignSelf: 'center',
fontSize: 15,
color: 'rgba(96,100,109, 0.8)'
}
});
Thank you for your help!