Solution: react-native-maps showsUserLocation 동작 안함 해결 방법

react-navive-maps를 이용해서 지도를 구현하고 있는데 내 위치로 가기 버튼이 보이질 않았다.

First of all, a reminder: for the button to be visible, some criteria are needed (OK in the OP):

• showsUserLocation must be set true because the default is false
• showsMyLocationButton must stay true, as is the default

The issue is in a race condition between two asynchronous events: onMapReady and onLayout
(noted Ready and Layout, for short, below).
The decision to draw the button or not is done at the time of the Layout, and the setting of UserLocation can't be done before the Ready of the map (a handle to it is needed).
Unfortunately, usually, at launch, the Layout arrives before the Ready.

위 글을 참조해보면 showUserLocation과 showsMyLocationButton이 모두 true로 설정되어 있어야 하고, 

문제는 onMapReady과 onLayout의 동기화 문제라고한다.

버튼을 그릴지 말지가 Layout이 다 마무리 되는 시점에 결정되고 

유저의 위치는 맵이 다 준비 되어야만 작동을 하는데

일반적으로 맵이 다 준비되기 전에 Layout이 먼저 그려져 버려서 버튼이 안보이는 거라고 한다.

밑에 댓글들을 쭉보면 componentWillMount를 써서 맵이 다 그려진 뒤에 강제로 다시 그리게 하거나, 

Timeout을 주어서 topPadding이나 bottomPadding 혹은 width 같은걸 1px씩 이동했다가 

원 위치로 돌리는 등 아주 무식하고 기묘한 방법들을 많이 쓰신다...

나도 달리 방법이 없으니 여러 방법들을 시도해 보았는데 다 제대로 동작 안하다가 아래 해결방법이

구원해주셨다.

처음에 생성자에서 this.state에 flex를 넣어주고

componentDidMount에서 timeout을 주어서 500ms 후에 flex를 변경해준다.

그러면 맵 로딩 시간이 쪼끔 늘어나긴 하는데 맵을 repaint해주어서 userLocation버튼이 보인다!!

provider="google"이 필요하다는 글도 있으니 넣어주자.

The re-render workaround using padding property didn't work for me. I was able to make it work using the following approach:

  constructor(props) {
    super(props);
    this.state = {flex: 0};
  }

  componentDidMount(){
    setTimeout(()=>this.setState({flex: 1}),500);
  }

<MapView
        provider="google"
        style={{flex: this.state.flex}}
        showsMyLocationButton={true}
        showsUserLocation={true}
        followsUserLocation={true}
      />

reference - https://github.com/react-community/react-native-maps/issues/1033