react-native-snap-carousel not scrolling in Android when put inside a ScrollView React Native

Question

I want to render react-native-snap-carousel inside cards which scrolls horizontally for which i am using ScrollView(horizontal), but the "Carousel" of the react-native-snap-carousel is not scrolling only in android . Please run this expo snack in your android phone to recreate the issue https://snack.expo.io/@sagar293/flatlist-inside-scrollview

import React from 'react';
import { StyleSheet, Text, View, Dimensions, SafeAreaView, TouchableHighlight, ScrollView, 
TouchableOpacity, TouchableWithoutFeedback, Image, Linking, Platform } from 'react-native';
import Carousel, { Pagination } from 'react-native-snap-carousel';
import { Input, Button, Divider, Card, Overlay } from 'react-native-elements';

export default class Cart extends React.Component {
  state = {
    data: [
        { title: 'a', url: require("./Light-Hover34x34.png") },
        { title: 'b', url: require("./Light-Hover34x34.png") },
        { title: 'c', url: require("./Light-Hover34x34.png") },
        { title: 'd', url: require("./Light-Hover34x34.png") },
        { title: 'e', url: require("./Light-Hover34x34.png") },
    ],
    activeSlide: 0,
    room: ["one", "two", "three"]
}

_renderItem = ({ item, index }) => {
    console.log("active slide", this.state.activeSlide)
    const isActive = index === this.state.activeSlide;

    return (
    <TouchableHighlight
        // onPress={() => Linking.openURL(item.url)}
        style={{
        backgroundColor: isActive ? '#FFD845' : null,
        width: 60,
        height: 60,
        borderRadius: 60/2,
        justifyContent: 'center',
        alignItems: 'center',
        }}>
        <Image
            source={item.url}
            style={{ width: '50%', height: '40%' }}
        />
    </TouchableHighlight>
    );
 };

render() {
    return (
        <View style={{alignItems: 'center', justifyContent: 'center', paddingVertical: 100}}>
          <ScrollView horizontal={true}>
            {
              this.state.room.map((r, i) => {
                return(
                  <View key={i}>
                    <TouchableWithoutFeedback>
                      <Card containerStyle={[styles.cardEleBig,]}>
                          <SafeAreaView style={{ height: 150 }}>
                              <Carousel
                                  data={this.state.data}
                                  renderItem={this._renderItem}
                                  sliderWidth={120}
                                  itemWidth={50}
                                  onSnapToItem={index => this.setState({ activeSlide: index })} //for pagination
                              />
                          </SafeAreaView>
                        </Card>
                    </TouchableWithoutFeedback>
                  </View>
                )
              })
            }
          </ScrollView>
        </View>
    );
  }
}

const styles = StyleSheet.create({
  cardCircleParking: {
    backgroundColor: "yellow",
    // marginBottom: 10,
    // marginLeft: '5%',
    width: 50,
    height: 50,
    borderRadius: 50/2,
    borderColor: 'white',
},
cardEleBig: {
  borderRadius: 20,
  borderBottomWidth: 0,
  borderColor: 'white',
  width: 159,
  height: Platform == "ios" ? 210 : 200,
  shadowColor: "#000",
  shadowOffset: {
      width: 0,
      height: 2,
  },
  shadowOpacity: 0.25,
  shadowRadius: 3.84,
  elevation: 5,
  marginLeft: 5,
  marginRight: 5,
  marginTop: 10,
  marginBottom: 2
},
})