Odtnhj

https://ufile.io/1bdoq

Bug:
Mapview wrapped children components may or may not leave the parent component when app loads.

Simulator:
iOS iPhone 6
xCode 10

Environment :
react-native-cli: 2.0.1
react-native: 0.57.0
"react-native-maps": "^0.22.1",

import React, Component from 'react';
import View, Text, TouchableOpacity from 'react-native'
import MapView from 'react-native-maps';
import SearchBar from 'react-native-elements'
import FontAwesome5 from 'react-native-vector-icons/dist/FontAwesome5'
export default class Search extends Component 
 static navigationOptions = 
 title: 'Search',
 header: null
 ;

 constructor(props)
 super(props);
 this.state = 
 region: 
 latitude: 37.78825,
 longitude: -122.4324,
 latitudeDelta: 0.0922,
 longitudeDelta: 0.0421,
 ,
 
 

 onRegionChange(region) 
 this.setState( region );
 

 render()
 return(
 <View style=flex:1>
 <MapView
 style=flex: 1
 onRegionChange=(region) => this.onRegionChange(region)
 initialRegion=this.state.region
 >
 <SearchBar
 containerStyle=backgroundColor: 'rgba(0,0,0,0)', borderTopWidth: 0, borderBottomWidth: 0, marginLeft: 10, marginRight: 10
 inputStyle=backgroundColor: 'white', marginTop: 30
 icon=type: 'material', color: '#86939e', name: 'search',style:marginTop: 22, zIndex: 9999999
 lightTheme
 />
 <TouchableOpacity style= height: 30, width: 150, backgroundColor:'white', justifyContent: 'center', paddingLeft: 10, paddingRight: 10>
 <Text style=textAlign: 'center'>Current Location</Text>
 </TouchableOpacity>
 <TouchableOpacity style= height: 30, width: 30, backgroundColor:'blue', justifyContent: 'center'>
 <FontAwesome5 name="location-arrow" size=20 color="white"/>
 </TouchableOpacity>
 </MapView>
 </View>
 )
 

please close. READ THE DOCS do not wrap your components within the mapview, but put it underneath, and use absolute.

I would rather choose a visual testing framework in such cases to help me detect those visual differences.

So far I've been using Applitools and they are powerful in their support to many frameworks out there. The most recent feature they offer is the Root Cause Analysis (RCA) which saves you a lot of time by detecting the DOM and CSS style differences, all that you have to do then is just fix the problem without having to waste your time trying to find the problem.

I believe in your case, RCA is the best fit!

Give it a try.