CODEWITHSUNDEEP
reactjsreact-nativeexporeact-native-maps
vincent O
vincent O

Reputation: 538

Placing a component on MapView in react native

I am trying to place a location icon on the map, sometimes after a reload, the icon leaves the container it is supposed to be wrapped in. below are images of what I am referring to, can anyone help with this.

sometimes it shows this enter image description here

other times it aligns properly enter image description here

below is my code 

              <MapView
                style={map}
                region={region}
                showsUserLocation
                loadingEnabled
                showsCompass
                showsTraffic
                onRegionChangeComplete={this.onRegionChangeComplete}
                onRegionChange={this.onRegionChange}
                ref={el => (this.mapView = el)}
              >
              <Fragment>
                <LocationButton
                  onPress={this.refocus}
                  style={locationFocus}
                />
              </Fragment>
              </MapView>
            )}
            </View>
        );
      }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
      },
      map: {
        position: 'absolute',
        flex: 1,
        width: '100%',
        height: '100%',
      },
      locationFocus: {
        position: 'absolute',
        bottom: 200,
        right: 20,
      }

});

Upvotes: 0

Views: 1027

Answers (1)

Mehran Khan
Mehran Khan

Reputation: 3636

Remove "LocationButton" from MapView Container and add in main container

<View style={{flex:1}}>
      <MapView
          style={map}
          region={region}
          showsUserLocation
          loadingEnabled
          showsCompass
          showsTraffic
          onRegionChangeComplete={this.onRegionChangeComplete}
          onRegionChange={this.onRegionChange}
          ref={el => (this.mapView = el)}
        >
    </MapView>
    <Fragment>
      <LocationButton
        onPress={this.refocus}
        style={locationFocus}
      />
    </Fragment>
</View>

Upvotes: 1

Related Questions