Exercise 07 : My Places

Purpose and learning process

In this exercise you will learn use map in React Native App.

App requirements

Create a React Native app (Expo or Native) which displays a map. User can add a new place to map with a marker. New data will be asked via dialog (for example). Places are saved to local storage. Previously saved places are displayed in the map when the app is launched again.

Example video

Here is an sample video how the app will work when this exercise is finished: https://youtu.be/JaMhqmbzz4Y.

Help

You might need the following npm packages or website infos:

• react-native-maps
• React Native Floating Action
• react-native-dialogs
• React Native Async Storage
• Expo: Location

Tip

Expo location can use geocode to translate address to latitude and logitude values.

Tip

OpenStreetMap Nominatim can also to translate address to latitude and logitude values. Try for example this one

https://nominatim.openstreetmap.org/search?city=$helsinki&format=json&limit=1

Will give to you JSON

So, you can use for example axios to load location JSON data from city address.

Yes, that's all. Be innovative!

Push to GitLab

Test your application in emulator, take screenshots (add those to your project folder) and commit/push your mobile-exercises repository back to JAMKIT/GitLab. Remember move your exercise/issue ticket from Doing to In Review in Issues Board and write your learning comments to issue comments.