TouchableOpacity is acting weird inside mapview in React Native - ios

Question

So i have 2 problems with TouchableOpacities inside my MapView:
The text and Icon inside my touchableopacities go outside of the touchableopacity, and in other components that doesn't happen.
One of the touchableopacities does nothing when clicked, it doesn't even change the opacity of the touchableopacity.
I haven't tried anything yet, except for revising my state and how it acts, and affects the elements, but nothing appears to be wrong.
this is my state:
this.state = {
lats: this.tempVars.homelat,
longs: this.tempVars.homelong,
latDs: [0.04],
longDs: [0.05],
numStores: this.tempVars.numStores,
StoreLats: this.tempVars.allLats,
StoreLongs: this.tempVars.allLongs,
StoreNames: this.tempVars.allNames,
createMarker: false,
placeMarker: false,
removeAmarker: false,
}
Helper Methods:
locChooser(){
if(this.state.createMarker){
console.log('Permanent Loc: '+JSON.stringify(this.MapLocs.permanentLoc));
return (
<Image style={{width: 65, height: 100, alignSelf: 'center', marginTop: Math.round(Dimensions.get('window').height/2)-150}} source={require('C:/Users/youse/FetcherApp/app/ping.png')}/>
);
}else if(this.state.placeMarker){
return (<Marker coordinate={this.MapLocs.permanentLoc} onPress={() => {if(this.state.removeAmarker){this.setState({placeMarker: false, removeAmarker: false})}}} image={{uri: 'https://i.pinimg.com/originals/30/98/49/309849c5815761081926477e5e872f1e.png'}}/>);
}else{
return null;
}
}
createHelpers(){
var bigarr = new Array(3);
if(this.state.createMarker){
bigarr[0] =
<View style={{flexDirection: 'column', justifyContent: 'space-between'}}>
<TouchableOpacity style={styles.DrawerOpener} onPress={() => this.props.navigation.dispatch(DrawerActions.openDrawer())}><Icon style={{marginTop: 20, marginLeft: 10}} name='reorder'/></TouchableOpacity>
<TouchableOpacity style={[styles.next, {borderColor: '#000000', backgroundColor: '#000000', marginLeft: 10}]} onPress={() => {this.setState({createMarker: false, placeMarker: true})}}><Text style={{color: '#fff', fontSize: 15}}>Select this Location</Text></TouchableOpacity>
</View>;
return bigarr[0];
}else{
bigarr[1] = <View key={0} style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<TouchableOpacity style={styles.DrawerOpener} onPress={() => this.props.navigation.dispatch(DrawerActions.openDrawer())}><Icon style={{marginTop: 20, marginLeft: 10}} name='reorder'/></TouchableOpacity>
<TouchableOpacity style={[styles.next, {borderColor: '#000000', backgroundColor: '#000000', marginLeft: 10}]} onPress={() => {this.setState({createMarker: true})}}><Text style={{color: '#fff', fontSize: 15}}>Choose a location to order from</Text></TouchableOpacity>
</View>;
bigarr[2] =
<View key={1}>
<TouchableOpacity style={[styles.next, {borderColor: this.BtnColor(!this.state.placeMarker), backgroundColor: this.BtnColor(!this.state.placeMarker), marginLeft: 10}]} disabled={!this.state.placeMarker} onPress={() => {console.log('Placemarker: '+this.state.placeMarker+', removeMarker: '+this.state.removeAmarker+', createmarker: '+this.state.createMarker);this.setState({removeAmarker: true})}}><Text style={{color: '#fff', fontSize: 15}}>Remove a Marker</Text></TouchableOpacity>
</View>;
return [bigarr[1], bigarr[2]];
}
}
And the render method:
render(){
return (
<MapView style={{flex: 2}} onRegionChange={this.__ChangeRegion} showsUserLocation={true} style={{position: 'absolute', left: 0, bottom: 0, right: 0, top: 0}} initialRegion={this.MapLocs.startloc}>
<View>
{this.createHelpers()}
</View>
{this.locChooser()}
{this.AllStores()}
<Marker image={require('C:/Users/youse/FetcherApp/app/home.png')} coordinate={this.MapLocs.homeLoc}/>
{this.displayCars(1)}
</MapView>
)
}

Answer 1

So I figured it out, it appears that components act very abnormally inside a Mapview, however when i nested it inside a View with a width and height of the screen dimensions, and put the components outside of the Mapview they acted normal again and they stayed in their styling and formatting.