React native maps showsMyLocationButton position

Question

I am using Expo react-native-app. I have some local data which I want show in maps. For maps I have used React-native-maps. I successfully pull the data and display in maps by using Marker. For user location I have used expo-location and expo-permission. That works fine. I have used React-native-maps one props called showsMyLocationButton, by default props boolean false. when I made it true I can able to see in IOS Emulator and i think by default position bottom-right. Android emulator I don't see the button at all. This is ios image and this android image. I want to display some data under the maps like a Bottom-Sheet, for that I have used this package. As a result it hide the ios' showsMyLocationButton.

I want to display the user current location Button like Uber. I tried lots of way to do that but could not able to achieve the goal. I want change the button icon as well but also failed. Really appreciate if someone Help me out.

I shared my code in Snack Ps. it only works in ios and Android, does not work in web View.

This is my code

import React, { useState, useEffect, useCallback } from 'react';
import {
  Dimensions, StatusBar, StyleSheet, Text,
  TextInput, TouchableOpacity, View, Button
} from 'react-native';
import Constants from 'expo-constants';
import Mapview, { Marker, Callout, PROVIDER_GOOGLE } from 'react-native-maps'
import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';
import datas from './datas.json'
// You can import from local files

import Animated from 'react-native-reanimated';
import BottomSheet from 'reanimated-bottom-sheet';

// or any pure javascript modules available in npm


export default function App() {
  const sheetRef = React.useRef(null);
  const renderContent = () => (
    <View
      style={{
        backgroundColor: 'white',
        padding: 16,
        height: 450,
      }}
    >
      <Text>Swipe down to close</Text>

      <Button
        title="Open Bottom Sheet"
        onPress={() => sheetRef.current.snapTo(0)}
      />

    </View>
  );



  const [state, setstate] = useState({
    "latitude": 60.1098678,
    "longitude": 24.7385084,
    "latitudeDelta": 1,
    "longitudeDelta": 1
  });

  useEffect(() => {
    _onMapReady();
  }, [_onMapReady]);

  const _onMapReady = useCallback(async () => {
    const { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== `granted`) {
      // console.log(`Permisson Denied`);
    }
    const location = await Location.getCurrentPositionAsync({ "accuracy": Location.Accuracy.High });
    setstate({
      ...state,
      "latitude": location.coords.latitude,
      "longitude": location.coords.longitude
    });
  }, [state]);



  return (
    <View style={styles.container}>
      <Mapview
        provider={PROVIDER_GOOGLE}
        initialRegion={state}
        showsIndoors={true}
        showsMyLocationButton={true}
        zoomControlEnabled={true}
        zoomEnabled={true}
        zoomTapEnabled={true}
        showsScale={true}

        showsBuildings={true}
        showsUserLocation={true}
        showsCompass={true}
        onMapReady={_onMapReady}

        style={styles.mapStyle}>
        {
          datas.data?.map((i) => {
            return (
              <Marker
                coordinate={{
                  "latitude": i.location.lat,
                  "longitude": i.location.lng
                }}
                animation={true}
                key={i.id}

              >
                <Callout
                  style={{ "width": 100, "height": 50 }}>
                  <View>
                    <Text>{i.Property}</Text>
                  </View>
                </Callout>
              </Marker>
            );
          })
        }

      </Mapview>


      <BottomSheet
        ref={sheetRef}
        snapPoints={[450, 300, 0]}
        borderRadius={10}
        renderContent={renderContent}
      />

    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    "flex": 1,
    "alignItems": `center`,
    "justifyContent": `center`
    // position: 'absolute',

  },
  mapStyle: {

    "height": Dimensions.get(`window`).height,
    "width": Dimensions.get(`window`).width

  },

});

React native maps showsMyLocationButton position

0 Answers0