Strange detection area

[dejawho]

Hi, I have a component defined like this prerry much

<View style={{flex: 1, alignItems: 'stretch'}}>
	<View style={{flex: 92}}>
		<GestureRecognizer onSwipeLeft={this.showNext} onSwipeRight={this.showPrevious} config={config} style={{flex: 1}}>
			<View style={{flex: 93, alignItems: 'stretch'}}>
				<View style={{flex: 18}}/>
				<View style={{flex: 9, alignItems: 'center'}}>
					<Image source={LOGO} style={{flex:1, resizeMode: 'contain'}}/>
				</View>
				<View style={{flex: 11}}/>
				<View style={{flex: 62}}>
					{this.getTab()}
				</View>
			</View>
			<View style= {{flex: 7, alignItems: 'center', justifyContent: 'center'}}>
				<View style={{flexDirection: 'row'}}>
					<View style={{height: circleSize, width: circleSize, marginRight: 5, borderRadius: circleSize / 2, backgroundColor: this.getDotBackground(0)}}/>
					<View style={{height: circleSize, width: circleSize, borderRadius: circleSize / 2, backgroundColor: this.getDotBackground(1)}}/>
					<View style={{height: circleSize, width: circleSize, marginLeft: 5, borderRadius: circleSize / 2, backgroundColor: this.getDotBackground(2)}}/>
				</View>
			</View>
		</GestureRecognizer>
	</View>
	<View style={{flex: 8, backgroundColor: 'rgb(23,168,104)', alignItems: 'center', justifyContent: 'center'}}>
		<Text style={[Styles.buttonTextAttributes]}>SALTA</Text>
	</View>
</View>

Essentially it is a bigger view with most of the content and a view on the bottom that will act like a button and I want to catch the swipes on the bigger view. Where I call the getTab function I got some code to render inside (an image and some text, nothing incredible here). The strange thing is that by default the GestureRecognizer seems to stop to grab the swipes after the last component returned by the getTab function, and also it seems to not be able to get it on the three view on the bottom (essentially they are three view shaped like a dot), even if they are all inside the GestureRecognizer.
The strange thing is that if I set a background on the gesture recognizer I see it is filling the expected area and also it starts to catch the swipes correctly. As workaround for now I use a transparent background, like
<GestureRecognizer onSwipeLeft={this.showNext} onSwipeRight={this.showPrevious} config={config} style={{flex: 1, backgroundColor: 'rgba(255,0,0,0)'}}>

and like this it seems to works, but there is something strange happening there.