[React-Native] react-native-google-autocomplete를 이용해서 위치 자동완성 기능 만들기

1. 라이브러리 설치

npm install --save react-native-google-places-autocomplete

2. key

구글 api에서 key를 발급해야 한다.

이때 반드시 place 라이브러리를 활성화 시켜주고 key를 발급해준다.

3. 적용하기

import { GooglePlacesAutocomplete } from "react-native-google-places-autocomplete";를 import해줘야 한다.

import { GooglePlacesAutocomplete } from "react-native-google-places-autocomplete";

<GooglePlacesAutocomplete/>

props를 사용하여 완성하면 된다.

여기서 사용할 props는
최소 검색 단어 글자 수minLength
input 표시값placeholder
key관리, 검색범위설정, 언어설정query
뭔지 모름 keyboardShouldPersistTaps
디테일 검색 허용fetchDetails
검색버튼 pressonPress
실패시onFail
검색 후 검색목록 지울지 결정keepResultsAfterBlur
밑에 google 표시할지enablePoweredByContainer
스타일styles
이다.

const autoCompleteHandler = (data, details = null) => {
  // data는 검색결과에 대한 간략한 정보
  // details는 검색결과에 대한 자세한 값 예) 평점, 사진, 주소 등등
  
  // 실행할 함수
  // ex) setPlace(data.블라블라)
}


<GooglePlacesAutocomplete
              minLength={2}
              placeholder="검색어 입력"
              query={{
                key: 내 구글 api 키,
                language: "ko",
                components: "country:kr",
              }}
              keyboardShouldPersistTaps={"handled"}
              fetchDetails={true}
              onPress={autoCompleteHandler}
              onFail={(error) => console.log(error)}
              onNotFound={() => console.log("no results")}
              keepResultsAfterBlur={true}
              enablePoweredByContainer={false}
              styles={styles.search}
            />
                
                
const styles = StyleSheet.create({
search: {
  // container 감싸고 있는 컴포넌트
    container: {},
  // input을 감싸는 컴포넌트
    textInputContainer: {
      flexDirection: "row",
    },
  // input창
    textInput: {
      backgroundColor: `${theme.colors.gray}`,
      borderRadius: 8,
      paddingVertical: 9,
      paddingHorizontal: 12,
      fontSize: 16,
      fontFamily: "spoqaR",
      color: "#6c6c6e",
    },
  // 검색결과 리스트 컴포넌트
    listView: {
      backgroundColor: "#ffffff",
      borderRadius: 10,
      paddingHorizontal: 10,
      elevation: 8,
      shadowColor: "#6164BB",
    },
  // 검색결과 행
    row: {
      paddingVertical: 20,
    },
  // 검색결과 divided line
    separator: {
      height: 2,
      backgroundColor: "#c8c7cc",
    },
  // 검색결과 text
    description: {
      fontSize: 15,
      fontFamily: "spoqaR",
    },
  // 필요없음
    loader: {
      flexDirection: "row",
      justifyContent: "flex-end",
      height: 20,
    },
  },
})

위의 코드 처럼 하면 작동이 된다.

4. 에러

안드로이드에서 keepResultsAfterBlur를 false로 지정하면 onpress가 실행이 안된다.

true로 하게 되면 검색 후 리스트의 데이터는 지워지지만 리스트가 적용되었던 스타일이 사라지지 않는다.

즉 검색결과 리스트의 배경이 그대로 남아있다.

이를 해결하지 못해서 제작자에게 문의를 남겼지만 자기도 안된다고 한다.

아마도 버그인듯 싶은데,,,,

나는 그래서 따로 컴포넌트를 만들어서 저 기능만 사용할 수 있도록 만들었다.

5. 제작자에게 문의를 올린 결과

자기들도 IOS에서는 되지만 안드로이드에게서 실행이 되지 않는다고 답변을 받았다.

자세한 사항을 말해달라고 해서 올려줬지만 더이상 답변이 달리지 않는다.

조금 찝찝하네...