Multiple Flip Cards not able to scroll in Flatlist - reactjs

Question

native-card-flip" for creating flip cards and I need to have multiple flip cards so I have added that flip card in FlatList but the issue is that the list is not scrolling at all. I have tried it with ScrollView and .map() function but scrolling not working at all.
<FlatList
data={revision}
renderItem={({item, index}) => (
<CardFlip
style={{
width: width * 0.95,
height: height * 0.3,
marginBottom: height * 0.015,
marginTop: height * 0.015,
}}
duration={3000}
ref={card => (this['card' + index] = card)}>
<Card
style={{
width: width * 0.9,
borderRadius: 16,
backgroundColor: 'transparent',
height: height * 0.8,
}}>
<TouchableOpacity onPress={() => this['card' + index].flip()}>
<View
style={{
flexDirection: 'row',
backfaceVisibility: 'hidden',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: Colors.lightGrey,
borderRadius: 22,
width: width * 0.95,
height: height * 0.3,
}}>
<Text
style={{
color: Colors.heading,
textAlign: 'center',
marginBottom: 1,
fontSize: 20,
width: '92%',
}}>
Lorem Ipsum
</Text>
</View>
<View
style={{
position: 'absolute',
bottom: 10,
right: 10,
}}>
{/* <TouchableOpacity
onPress={() => {
this.card.flip();
setIsFlipped(!isFlipped);
}}
style={{justifyContent: 'flex-end'}}> */}
<Image
source={require('../assets/images/flip-front.png')}
/>
{/* </TouchableOpacity> */}
</View>
</TouchableOpacity>
</Card>
<Card
style={{
width: width * 0.95,
borderRadius: 16,
backgroundColor: 'transparent',
height: height * 0.8,
alignSelf: 'center',
}}>
<TouchableOpacity
style={{
width: width * 0.95,
height: height * 0.3,
}}
onPress={() => this['card' + index].flip()}>
{/* Flip Back */}
<View
style={{
flexDirection: 'column',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
flex: 1,
paddingHorizontal: width * 0.05,
backgroundColor: Colors.white,
borderRadius: 22,
}}>
<Text
style={{
color: Colors.heading,
fontSize: 20,
marginBottom: '2%',
fontFamily: 'FiraSans-ExtraBold',
}}>
Lorem Ipsum
</Text>
<Text
style={{
color: Colors.heading,
fontSize: 16,
marginBottom: '2%',
textAlign: 'justify',
fontFamily: 'OpenSans-Regular',
}}>
{strings.dummyText}
</Text>
</View>
<View
style={{
position: 'absolute',
bottom: 10,
right: 10,
}}>
{/* <TouchableOpacity
onPress={() => {
this.card.flip();
setIsFlipped(!isFlipped);
}}
style={{justifyContent: 'flex-end'}}> */}
<Image source={require('../assets/images/flip-back.png')} />
{/* </TouchableOpacity> */}
</View>
</TouchableOpacity>
</Card>
</CardFlip>
)}
numColumns={1}
keyExtractor={(item, index) => index.toString()}
style={{marginTop: height * 0.01}}
showsVerticalScrollIndicator={false}
maxToRenderPerBatch={1}
/>
Please help me to figure out how can I achieve scrolling.