Skip to content

jonra1993/GeoCamera

Repository files navigation

GeoCamera

It is a React Native App that takes a picture and then it shows the picture as a marker over a map in its GPS coordinates where it was taken. Uses permissions, Geolocation Google Ap, React Native Camera among other packages.

Pictures are saved at root/Pictures

Instructions

  • Install react-native packages
  • Link packages
  • Setup Google maps key, guide here

Setup

npm install
react-native link

Prerequisites

  • Intall nodejs
  • Intall JavaSDK, JavaJRE and configure vairables
  • Intall Android studio and configure variable
  • Intall Xcode

Install, Init and Execute React Native

react-native run-android
react-native run-ios

Packages used

React Navigation

npm install --save react-navigation
npm install --save react-native-gesture-handler
react-native link react-navigation
react-native link react-native-gesture-handler

make changes from: https://reactnavigation.org/docs/en/getting-started.html cheatsheet: https://blog.usejournal.com/react-navigation-cheatsheet-bf99f09d8060

React Native Vector Icons

npm install --save react-native-vector-icons
react-native link react-native-vector-icons

Documentation: https://oblador.github.io/react-native-vector-icons/

Native Base

npm install native-base --save
react-native link

Documentation: https://docs.nativebase.io/

React Native Maps

npm install react-native-maps --save
react-native link react-native-maps

Documentation: https://github.com/react-native-community/react-native-maps/blob/master/docs/installation.md Video: https://www.youtube.com/watch?v=97OtSGw7BPs

for iOS issues: react-native-maps/react-native-maps#1842 react-native-maps/react-native-maps#2876

React Native Geolocation Service

npm install --save react-native-geolocation-service
react-native link react-native-geolocation-service

Documentation and configuration: https://github.com/Agontuk/react-native-geolocation-service

Redux

npm install redux react-redux --save
npm install redux-logger --save-dev
react-native link

Documentation: https://redux.js.org/introduction/getting-started Video: https://www.youtube.com/watch?v=ENJfnyIfe-I

React Native Camera

npm install react-native-camera --save
react-native link react-native-camera
react-native link

Documentation: https://react-native-community.github.io/react-native-camera/docs/installation Tutorial: https://www.toptal.com/react-native/react-native-camera-tutorial

React Native Fs

npm install react-native-fs --save
react-native link react-native-fs

Documentation: https://github.com/itinance/react-native-fs

solve multiple problems in ios: oblador/react-native-vector-icons#851

License

License