Skip to content

Exercise 08: Launch a Map

Purpose and learning process

In this exercise you will learn how launch a Map application from React Native Application.

Launch a Map 1 Launch a Map 2

Project

Create a new React Native project.

1
npx react-native init LaunchMap

UI

Ask latitude and longitude values from user with TextInput components.

Get Latitude and Longitude

Add React hooks to get latitude and longitude values. Add below codes inside your App function.

1
2
const [latitude, setLatitude] = useState(0);
const [longitude, setLongitude] = useState(0);

And call hooks from TextInput components

1
2
3
4
5
6
<TextInput  
  placeholder='Latitude' 
  onChangeText={text => setLatitude(text)}/>
<TextInput 
  placeholder='Longitude' 
  onChangeText={text => setLongitude(text)}/>

Launch a map

Use latitude and longitude values and launch a map when a button is pressed.

Add onPress event handling to Button.

1
<Button title="Launch a Map" onPress={launchMap}/>

Create launchMap function. First a location const will be create from latitude and longitude state variables. After that iOS or Android platform will be selected with Platfrom class (you will need to import it). Finally maps or geo will be used to launch a map application from the device. 

1
2
3
4
5
6
7
8
const launchMap = () => {
  const location = `${latitude},${longitude}`
  const url = Platform.select({
    ios: `maps:${location}`,
    android: `geo:${location}?center=${location}&q=${location}&z=16`,
  });
  Linking.openURL(url);
}

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.