야니와 충스의 햄볶기

rn 에서 위도, 경도 값으로 googlemap api 통해 주소 얻어오는 코드 공유 합니다. 우선, react-native reverse geocoding 관련 library 를 활용해봤는데 제대로 동작이 되진 않았습니다. github.com/devfd/react-native-geocoder github.com/marlove/react-native-geocoding 더 찾아보니, library 는 불필요했고 바로 googlemap url 을 fetch() 해오면 정상적으로 주소를 얻어올 수 있습니다. 코드는 다음과 같이 적용합니다. fetch('https://maps.googleapis.com/maps/api/geocode/json?address=' + latitude + ',' + longitude ..

google firebase 의 realtime database 와 react-native-gitfted-chat library 를 활용하면 간단하게 채팅 화면을 구성할 수 있습니다. 왼쪽은 gifted-chat 가이드 화면, 우측은 제가 직접 적용한 화면입니다. firebase 를 미리 구성했다는 전제하에, gitfted chat 을 프로젝트에 install 합니다. github.com/FaridSafi/react-native-gifted-chat - Using npm: npm install react-native-gifted-chat --save - Using Yarn: yarn add react-native-gifted-chat 아래는 전체 코드입니다. - firebase-xxx/chat/ 폴더 구..

이번 '우동피플' 앱 개발하면서 활용한 library 모음입니다. react native 는 개발도 개발이지만 괜찮은 library 발굴해다가 살을 입히는 재미도 있는 것 같습니다 :) "dependencies": { "@invertase/react-native-apple-authentication": "^2.1.0", "@react-native-community/async-storage": "^1.12.1", "@react-native-community/checkbox": "^0.5.6", "@react-native-community/geolocation": "^2.0.2", "@react-native-community/google-signin": "^5.0.0", "@react-native-commu..

이번에는 map based chat app, example 입니다. 개발 환경: react native, iphone, expo install : firebase, react-native-maps, mement 등등 android user 는 google map, iphone user 는 apple map app으로 동작하며 user message 입력 시 본인 위치와 message, 그리고 timestamp 이렇게 세가지정보가 다른 user에게 보이는 app 입니다. tinder app이 지도기반으로 이런식의 동작이 있었던 것 같네요. 완성 화면은 아래와 같습니다. expo project 생성하고 install 합니다. 그리고 필요한 pkg 들을 미리 install 해놓습니다. - moment: tim..

지난 번 React Native 네이버지도 연동에 이어 React Native 네이버지도 연동 리액트 네이티브 네이버지도 연동 방법 입니다. 개발환경 : Android, react-native cli (expo 아님) 구글링을 열심히 해본 결과 크게 2군데 react-naver map 브릿지를 제공하고 있었습니다. - zeakd.github.io/rea.. yannichoongs.tistory.com 오늘은 지도화면 클릭 시 marker 표시를 해보겠습니다. 변경 된 코드 적용 시 대략 이런 동작을 하게 됩니다. MapViewScreen function component 를 아래와 같이 변경합니다. 총 4곳 수정. - 동적 marker 이동을위해 useState 로 location 위도,경도 정의. 초기..

리액트 네이티브 네이버지도 연동 방법 입니다. 개발환경 : Android, react-native cli (expo 아님) 구글링을 열심히 해본 결과 크게 2군데 react-naver map 브릿지를 제공하고 있었습니다. - zeakd.github.io/react-naver-maps/#/React%20Naver%20Maps?id=introduction 장점, Guide Doc 제공. 단점, 지금 app run 안됨... err 발생. React Naver Maps Style Guide zeakd.github.io - github.com/QuadFlask/react-native-naver-map 장점, 아주 잘 동작함 단점, doc 이 없음 QuadFlask/react-native-naver-map 🗺️n..