Wondering what’s next for npm?Check out our public roadmap! »

    @foursquare/pilgrim-sdk-react-native
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.12 • Public • Published

    Pilgrim SDK React Native module

    CircleCI

    Table of Contents

    Installing

    1. Install module

      npm

      npm install @foursquare/pilgrim-sdk-react-native

      Yarn

      yarn add @foursquare/pilgrim-sdk-react-native
    2. Link native code

      With autolinking (react-native 0.60+)

      cd ios && pod install && cd .. 

      Pre 0.60

      react-native link @foursquare/pilgrim-sdk-react-native

    Usage

    Application Setup

    iOS Setup

    You must call [[FSQPPilgrimManager sharedManager] configureWithConsumerKey:secret:delegate:completion:] from application:didFinishLaunchingWithOptions in a your application delegate, for example:

    // AppDelegate.m 
    #import "AppDelegate.h"
     
    #import <React/RCTBridge.h>
    #import <React/RCTBundleURLProvider.h>
    #import <React/RCTRootView.h>
    #import <Pilgrim/Pilgrim.h>
     
    @implementation AppDelegate 
     
    (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    {
      [[FSQPPilgrimManager sharedManager] configureWithConsumerKey:@"CONSUMER_KEY"
                                                            secret:@"CONSUMER_SECRET"
                                                          delegate:nil
                                                        completion:nil];
     
      
      // Other react native initialization code 
      
      return YES;
    }
     
    ...
     
    @end
     

    Android Setup

    You must call PilgrimSdk.with(PilgrimSdk.Builder) from onCreate in a your android.app.Application subclass, for example:

    // MainApplication.java 
    import android.app.Application;
    import com.facebook.react.ReactApplication;
    import com.foursquare.pilgrim.PilgrimSdk;
     
    public class MainApplication extends Application implements ReactApplication {
     
        @Override
      public void onCreate() {
        super.onCreate();
     
        PilgrimSdk.Builder builder = new PilgrimSdk.Builder(this)
                .consumer("CONSUMER_KEY", "CONSUMER_SECRET")
                .enableDebugLogs();
        PilgrimSdk.with(builder);
     
        // Other react native initialization code 
      }
     
      ...
     
    }

    Basic Usage

    import React, { Component } from 'react';
    import { Text } from 'react-native';
    import PilgrimSdk from '@foursquare/pilgrim-sdk-react-native';
     
    export default class Screen extends Component {
        state = {
            installId: "-",
        };
     
        componentDidMount() {
            PilgrimSdk.getInstallId().then(installId => {
                this.setState({ installId: installId });
            });
        }
     
        render() {
            return (
                <>
                    <Text>Install ID: {this.state.installId}</Text>
                </>
            );
        }
    }

    Getting User's Current Location

    You can actively request the current location of the user by calling the PilgrimSdk.getCurrentLocation method. The return value will be a Promise<CurrentLocation>. The CurrentLocation object has the current venue the device is most likely at as well as any geofences that the device is in (if configured). More information here. Example usage below:

    import React, { Component } from 'react';
    import { Alert, Text } from 'react-native';
    import PilgrimSdk from '@foursquare/pilgrim-sdk-react-native';
     
    export default class Screen extends Component {
        state = {
            currentLocation: null
        };
     
        getCurrentLocation = async function () {
            try {
                const currentLocation = await PilgrimSdk.getCurrentLocation();
                this.setState({ currentLocation: currentLocation });
            } catch (e) {
                Alert.alert("Pilgrim SDK", `${e}`);
            }
        }
     
        componentDidMount() {
            this.getCurrentLocation();
        }
     
        render() {
            if (this.state.currentLocation != null) {
                const venue = this.state.currentLocation.currentPlace.venue;
                const venueName = venue.name || "Unnamed venue";
                return (
                    <>
                        <Text>Venue: {venueName}</Text>
                    </>
                );
            } else {
                return (
                    <>
                        <Text>Loading...</Text>
                    </>
                );
            }
        }
    }

    Passive Location Detection

    Passive location detection is controlled with the PilgrimSdk.start and PilgrimSdk.stop methods. When started Pilgrim SDK will send notifications to Webhooks and other third-party integrations. Example usage below:

    import React, { Component } from 'react';
    import { Alert, Button } from 'react-native';
    import PilgrimSdk from '@foursquare/pilgrim-sdk-react-native';
     
    export default class Screen extends Component {
        startPilgrim = async function () {
            const canEnable = await PilgrimSdk.canEnable();
            const isSupportedDevice = await PilgrimSdk.isSupportedDevice();
            if (canEnable && isSupportedDevice) {
                PilgrimSdk.start();
                Alert.alert("Pilrim SDK", "Pilgrim started");
            } else {
                Alert.alert("Pilrim SDK", "Error starting");
            }
        }
     
        stopPilgrim = function () {
            PilgrimSdk.stop();
            Alert.alert("Pilrim SDK", "Pilgrim stopped");
        }
     
        render() {
            return (
                <>
                    <Button title="Start" onPress={() => { this.startPilgrim(); }} />
                    <Button title="Stop" onPress={() => { this.stopPilgrim(); }} />
                </>
            );
        }
    }

    Debug Screen

    The debug screen is shown using the PilgrimSdk.showDebugScreen method. This screen contains logs sent from Pilgrim SDK and other debugging tools/information. Example usage below:

    import React, { Component } from 'react';
    import { Button } from 'react-native';
    import PilgrimSdk from '@foursquare/pilgrim-sdk-react-native';
     
    export default class Screen extends Component {
        showDebugScreen = function () {
            PilgrimSdk.showDebugScreen();
        }
     
        render() {
            return (
                <>
                    <Button title="Show Debug Screen" onPress={() => { this.showDebugScreen(); }} />
                </>
            );
        }
    }

    Test Visits

    Test arrival visits can be fired with the method PilgrimSdk.fireTestVisit. You must pass a location to be used for the test visit. The arrival notification will be received via Webhooks and other third-party integrations

    import React, { Component } from 'react';
    import { Button } from 'react-native';
    import PilgrimSdk from '@foursquare/pilgrim-sdk-react-native';
     
    export default class Screen extends Component {
        fireTestVisit = async function () {
            navigator.geolocation.getCurrentPosition((position) => {
                const latitude = position.coords.latitude;
                const longitude = position.coords.longitude;
                PilgrimSdk.fireTestVisit(latitude, longitude);
                Alert.alert("Pilgrim SDK", `Sent test visit with location: (${latitude},${longitude})`);
            }, err => {
                Alert.alert("Pilgrim SDK", `${err}`);
            });
        }
     
        render() {
            return (
                <>
                    <Button title="Fire Test Visit" onPress={() => { this.fireTestVisit(); }} />
                </>
            );
        }
    }

    Samples

    FAQ

    Consult the Pilgrim documentation here

    Keywords

    Install

    npm i @foursquare/pilgrim-sdk-react-native

    DownloadsWeekly Downloads

    88

    Version

    1.0.12

    License

    Apache-2.0

    Unpacked Size

    120 kB

    Total Files

    39

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar