A comprehensive example application demonstrating how to integrate and use the ExpoFP SDKs for interactive floor plan visualization and real-time location tracking in React Native applications.
This example showcases:
- Interactive Floor Plans - Display and interact with customizable floor plans using @expofp/react-native-efp-sdk
- Real-time Location Tracking - Integrated location provider using @expofp/react-native-efp-crowdconnected
- Cross-platform Support - Runs on iOS and Android with a shared codebase using Expo and React Native
- Permission Management - Proper handling of location and Bluetooth permissions
- Background Tracking - Support for background location updates
 |
 |
 |
| Floor Plan View | Map Controls & Floor Plan Selector | Permissions & Tracking Controls |
Before you begin, ensure you have the following installed:
- Node.js (v18 or higher) and npm
- Expo CLI - Install with
npm install -g expo-cli - Xcode (for iOS development) or Android Studio (for Android development)
- Watchman (recommended for macOS file watching)
git clone https://github.com/expofp/react-native-efp-sdk-example.git
cd react-native-efp-sdk-examplenpm installCreate config/crowdconnected.ts from the example:
cp config/crowdconnected.example.ts config/crowdconnected.tsEdit config/crowdconnected.ts and add your CrowdConnected credentials:
export const CROWDCONNECTED_CONFIG = {
appKey: "YOUR_APP_KEY",
token: "YOUR_TOKEN",
secret: "YOUR_SECRET",
// ... other config
};npm run expo:prebuildiOS:
npm run iosAndroid:
npm run android# Development
npm start # Start Expo development server
npm run ios # Build and run on iOS
npm run android # Build and run on Android
npm run web # Start web development server
# Build & Native
npm run expo:prebuild # Generate native iOS/Android code
npm run prebuild # Clean rebuild with watchman reset
# Code Quality
npm run lint # Run ESLintThe following permissions are configured in app.json for iOS:
NSLocationWhenInUseUsageDescription- Foreground location accessNSLocationAlwaysAndWhenInUseUsageDescription- Background location accessNSBluetoothAlwaysUsageDescription- Bluetooth accessUIBackgroundModes- Location and Bluetooth updates in background
Android permissions are requested at runtime for:
- Fine and coarse location
- Bluetooth scanning and connecting (Android 12+)
- Background location (Android 10+)
├── app/ # Expo Router entry point
│ └── index.tsx # Root page
├── components/
│ └── App.tsx # Main application component
├── config/
│ ├── crowdconnected.ts # SDK configuration (create from example)
│ └── crowdconnected.example.ts# Configuration template
├── assets/ # Images, icons, splash screens
├── ios/ # Native iOS code (generated)
├── android/ # Native Android code (generated)
├── app.json # Expo configuration
├── tsconfig.json # TypeScript configuration
└── package.json # Dependencies and scripts
- Grant Permissions - Click "Perms" to request location permissions
- Optional: Background Permission - Click "BG" for background location access
- Initialize SDK - Click "Init" to initialize the location provider
- Start Tracking - Click "Start" to begin real-time location updates
- View Location - Location data displays at the bottom of the screen
- Enter a floor plan key in the textbox (e.g., "demo", "cloudnext25")
- Click "OK" to load that floor plan
- Use map controls:
- + - Zoom in
- - - Zoom out
- ⤢ - Fit to bounds
Toggle "BG" switch to enable/disable background location updates before initializing the SDK. Note: This cannot be changed after initialization.
- Dual map instances for demonstrating different configurations
- Interactive booth selection
- Zoom and pan controls
- Fit-to-bounds functionality
- Real-time location updates via CrowdConnected
- Toggle background mode tracking
- Location display with latitude/longitude coordinates
- Bluetooth scanning for improved accuracy
- Platform-aware permission requests (Android/iOS)
- Version-specific requirements (Bluetooth on Android 12+)
- Visual status indicators for permissions, SDK, and tracking states
- TypeScript support with strict mode
- Consistent styling with React Native StyleSheet
- Comprehensive logging for debugging
- ESLint configuration for code quality
| Technology | Version | Purpose |
|---|---|---|
| React | 19.1.0 | UI library |
| React Native | 0.81.4 | Cross-platform framework |
| Expo | 54.0.12 | Development platform |
| Expo Router | 6.0.10 | Navigation |
| TypeScript | 5.9.2 | Type safety |
| React Native Reanimated | 4.1.1 | Animations |
Error: Info.plist missing location permissions
- Ensure
app.jsonhas the properinfoPlistconfiguration - Run
npm run prebuildto regenerate native code
Error: Bluetooth permission required
- Add
NSBluetoothAlwaysUsageDescriptiontoapp.json - Rebuild with
npm run prebuild
Error: Gradle build failure
- Clear cache:
npm run prebuild - Ensure Android SDK is properly installed
- Check Android Studio SDK Manager for required API levels
Location not updating
- Verify permissions are granted
- Check SDK is initialized (Init button shows success)
- Ensure location services are enabled on device
SDK initialization fails
- Verify CrowdConnected credentials in
config/crowdconnected.ts - Check device has internet connectivity
- Review console logs for detailed error messages
We welcome contributions! Please feel free to submit pull requests with improvements.
- ExpoFP SDK Documentation
- CrowdConnected SDK Documentation
- Expo Documentation
- React Native Documentation
This example is provided as-is for educational and development purposes.
For issues related to:
- ExpoFP SDK - Visit the NPM package page
- This Example - Open an issue on GitHub
- CrowdConnected - Check the SDK documentation
Built with ❤️ using Expo and React Native