Back to snippets

mappls_intouch_react_native_device_tracking_quickstart.ts

typescript

This quickstart demonstrates how to initialize the Mappls In

Agent Votes
1
0
100% positive
mappls_intouch_react_native_device_tracking_quickstart.ts
1import React, { useEffect } from 'react';
2import { SafeAreaView, StyleSheet, Button, View, Alert } from 'react-native';
3import MapplsIntouch from 'mappls-intouch-react-native';
4
5const App = () => {
6  useEffect(() => {
7    // Initialize the SDK with your credentials
8    // Note: These should be obtained from the Mappls API dashboard
9    const clientId: string = "YOUR_CLIENT_ID";
10    const clientSecret: string = "YOUR_CLIENT_SECRET";
11
12    MapplsIntouch.initialize(clientId, clientSecret)
13      .then(() => {
14        console.log("Mappls Intouch SDK Initialized successfully");
15      })
16      .catch((error: any) => {
17        console.error("SDK Initialization failed", error);
18      });
19  }, []);
20
21  const startTracking = () => {
22    // Start tracking with a specific tracking ID (e.g., User ID or Order ID)
23    const trackingId: string = "example_user_123";
24    
25    MapplsIntouch.startTracking(trackingId)
26      .then(() => {
27        Alert.alert("Success", "Tracking started");
28      })
29      .catch((error: any) => {
30        Alert.alert("Error", "Failed to start tracking");
31      });
32  };
33
34  const stopTracking = () => {
35    MapplsIntouch.stopTracking()
36      .then(() => {
37        Alert.alert("Stopped", "Tracking stopped successfully");
38      })
39      .catch((error: any) => {
40        console.error(error);
41      });
42  };
43
44  return (
45    <SafeAreaView style={styles.container}>
46      <View style={styles.buttonContainer}>
47        <Button title="Start Tracking" onPress={startTracking} color="#2196F3" />
48        <View style={{ marginVertical: 10 }} />
49        <Button title="Stop Tracking" onPress={stopTracking} color="#f44336" />
50      </View>
51    </SafeAreaView>
52  );
53};
54
55const styles = StyleSheet.create({
56  container: {
57    flex: 1,
58    justifyContent: 'center',
59    backgroundColor: '#F5FCFF',
60  },
61  buttonContainer: {
62    paddingHorizontal: 20,
63  },
64});
65
66export default App;