Horizontal scrollview inside another horizontalscroll view in react-native - reactjs

Question

I'm designing UI in react native where I've a HorizontalScrollView inside another HorizontalScrollView. However, the child HorizontalScrollView doesn't work.
Is it possible to disable the parent HorizontalScrollView whenever a gesture is made in child HorizontalScrollView. I know this sounds tricky but I need to implement this in my UI.
note: working fine in IOS
code snippet:
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
},
})
But this code is working fine with IOS
Thanks in advance