Usage Guide
Usage Guide
The Vibes SDK provides a simple interface for integrating push notifications and messaging features into your React Native app. After installation, you can import the required functions and start using the SDK immediately.
The main functions you'll use are:
registerDevice()- Register the device with VibesregisterPush()- Enable push notificationsassociatePerson()- Link a user to the devicegetPerson()- Get current user informationfetchInboxMessages()- Retrieve inbox messages
Importing the SDK
// Import the entire module
import ExpoVibesSDK from 'vibes-react-native-expo';Basic Setup and Initialization
Important: The registerDevice() and registerPush() functions return Promises that resolve when the registration is complete.
You must ensure registerDevice() completes before calling registerPush() by using .then() chains or await.
A correct implementation should be based on events/callbacks. For example:
import { useEffect } from 'react';
import ExpoVibesSDK from 'vibes-react-native-expo';
useEffect(() => {
// Example: listening to onChange event
const subscription = ExpoVibesSDK.addListener('onChange', (event) => {
console.log('Value changed:', event.value);
});
// Example: registering device and handling event
ExpoVibesSDK.registerDevice().then((deviceId) => {
console.log('Device registered:', deviceId);
// Register push after device registration completes
return ExpoVibesSDK.registerPush();
}).then((result) => {
console.log('Push registered:', result);
});
// Example: listening to onGetPerson event
const personSub = ExpoVibesSDK.addListener('onGetPerson', (event) => {
console.log('Person event:', event.person);
});
// Example: listening to onFetchInboxMessages event
const inboxSub = ExpoVibesSDK.addListener('onFetchInboxMessages', (event) => {
console.log('Inbox messages event:', event.messages);
});
// Cleaning up subscriptions on unmount
return () => {
subscription.remove();
personSub.remove();
inboxSub.remove();
};
}, []);User Management
import ExpoVibesSDK from 'vibes-react-native-expo';
// Associate a user with the device
const associateUser = async (userId: string) => {
try {
await ExpoVibesSDK.associatePerson(userId);
console.log('User associated successfully');
} catch (error) {
console.error('Failed to associate user:', error);
}
};
// Get current user information
const getCurrentUser = async () => {
try {
const person = await ExpoVibesSDK.getPerson();
console.log('Current user:', person);
return person;
} catch (error) {
console.error('Failed to get user:', error);
return null;
}
};Inbox Messages
import ExpoVibesSDK from 'vibes-react-native-expo';
// Fetch all inbox messages
const loadInboxMessages = async () => {
try {
const messages = await ExpoVibesSDK.fetchInboxMessages();
console.log('Inbox messages:', messages);
return messages;
} catch (error) {
console.error('Failed to fetch messages:', error);
return [];
}
};
// Fetch specific message
const loadMessage = async (messageId: string) => {
try {
const message = await ExpoVibesSDK.fetchInboxMessage(messageId);
console.log('Message details:', message);
return message;
} catch (error) {
console.error('Failed to fetch message:', error);
return null;
}
};
// Mark message as read
const markAsRead = async (messageId: string) => {
try {
await ExpoVibesSDK.markInboxMessageAsRead(messageId);
console.log('Message marked as read');
} catch (error) {
console.error('Failed to mark message as read:', error);
}
};
// Expire message
const expireMessage = async (messageId: string) => {
try {
await ExpoVibesSDK.expireInboxMessage(messageId);
console.log('Message expired');
} catch (error) {
console.error('Failed to expire message:', error);
}
};Device Updates
import ExpoVibesSDK from 'vibes-react-native-expo';
// Update device location and credentials
const updateDeviceInfo = async (latitude: number, longitude: number) => {
try {
await ExpoVibesSDK.updateDevice(true, latitude, longitude);
console.log('Device updated successfully');
} catch (error) {
console.error('Failed to update device:', error);
}
};Notification Events (Deep linking)
import {NativeEventEmitter, NativeModules, DeviceEventEmitter } from 'react-native';
const onPushReceived = (event) => {
console.log('Push received', event)
};
const onPushOpened = async (event) => {
console.log('Push opened', event)
};
const addEventListeners = () => {
const eventEmitter = Platform.OS === 'ios' ? new NativeEventEmitter(NativeModules.VibesPushEmitter) : DeviceEventEmitter;
eventEmitter.addListener('pushReceived', onPushReceived);
eventEmitter.addListener('pushOpened', onPushOpened);
}Complete Example App
import React, { useEffect, useState } from 'react';
import { View, Text, Button, Alert, ScrollView, NativeEventEmitter, NativeModules, DeviceEventEmitter } from 'react-native';
import ExpoVibesSDK from 'vibes-react-native-expo';
export default function VibesExampleApp() {
const [user, setUser] = useState<string | null>(null);
const [messages, setMessages] = useState<any[]>([]);
const onPushReceived = (event) => {
console.log('Push received', event)
};
const onPushOpened = async (event) => {
console.log('Push opened', event)
};
const addEventListeners = () => {
const eventEmitter = Platform.OS === 'ios' ? new NativeEventEmitter(NativeModules.VibesPushEmitter) : DeviceEventEmitter;
eventEmitter.addListener('pushReceived', onPushReceived);
eventEmitter.addListener('pushOpened', onPushOpened);
}
useEffect(() => {
initializeVibes();
addEventListeners()
}, []);
const initializeVibes = async () => {
try {
// Register device first (required before push registration)
await ExpoVibesSDK.registerDevice();
// Register push notifications (will wait for device registration to complete)
await ExpoVibesSDK.registerPush();
Alert.alert('Success', 'Vibes SDK initialized!');
} catch (error) {
Alert.alert('Error', 'Failed to initialize Vibes SDK');
}
};
const handleLogin = async () => {
try {
await ExpoVibesSDK.associatePerson('user123');
const currentUser = await ExpoVibesSDK.getPerson();
setUser(currentUser);
Alert.alert('Success', 'User logged in!');
} catch (error) {
Alert.alert('Error', 'Login failed');
}
};
const loadMessages = async () => {
try {
const inboxMessages = await ExpoVibesSDK.fetchInboxMessages();
setMessages(inboxMessages);
} catch (error) {
Alert.alert('Error', 'Failed to load messages');
}
};
const markMessageRead = async (messageId: string) => {
try {
await ExpoVibesSDK.markInboxMessageAsRead(messageId);
Alert.alert('Success', 'Message marked as read');
loadMessages(); // Refresh messages
} catch (error) {
Alert.alert('Error', 'Failed to mark message as read');
}
};
return (
<ScrollView style={{ flex: 1, padding: 20 }}>
<Text style={{ fontSize: 24, marginBottom: 20 }}>Vibes SDK Example</Text>
<Button title="Login User" onPress={handleLogin} />
{user && (
<Text style={{ marginVertical: 10 }}>Logged in as: {user}</Text>
)}
<Button title="Load Messages" onPress={loadMessages} />
{messages.map((message, index) => (
<View key={index} style={{ marginVertical: 10, padding: 10, backgroundColor: '#f0f0f0' }}>
<Text>{message.title || 'No title'}</Text>
<Button
title="Mark as Read"
onPress={() => markMessageRead(message.id)}
/>
</View>
))}
</ScrollView>
);
}Full SDK API Usage Examples
Below are examples for all additional SDK functions available in the demo app:
// Get device info
const getDeviceInfo = async () => {
try {
const info = await ExpoVibesSDK.getVibesDeviceInfo();
console.log('Device info:', info);
return info;
} catch (error) {
console.error('Failed to get device info:', error);
return null;
}
};
// Unregister device
const unregisterDevice = async () => {
try {
const result = await ExpoVibesSDK.unregisterDevice();
console.log('Device unregistered:', result);
} catch (error) {
console.error('Failed to unregister device:', error);
}
};
// Unregister push
const unregisterPush = async () => {
try {
const result = await ExpoVibesSDK.unregisterPush();
console.log('Push unregistered:', result);
} catch (error) {
console.error('Failed to unregister push:', error);
}
};
// Open inbox message (track open event)
const openInboxMessage = async (messageId: string) => {
try {
const result = await ExpoVibesSDK.onInboxMessageOpen(messageId);
console.log('Inbox message opened:', result);
} catch (error) {
console.error('Failed to open inbox message:', error);
}
};
// Track inbox messages fetched event
const trackInboxMessagesFetched = async () => {
try {
const result = await ExpoVibesSDK.onInboxMessagesFetched();
console.log('Inbox messages fetched event:', result);
} catch (error) {
console.error('Failed to track inbox messages fetched:', error);
}
};
// Set value async (test event)
const setValue = async (value: string) => {
try {
await ExpoVibesSDK.setValueAsync(value);
console.log('Value set:', value);
} catch (error) {
console.error('Failed to set value:', error);
}
};
// Initialize Vibes SDK manually
const initializeVibes = async () => {
try {
await ExpoVibesSDK.initializeVibes();
console.log('Vibes SDK initialized');
} catch (error) {
console.error('Failed to initialize Vibes SDK:', error);
}
};
// Get SDK version
const getSdkVersion = async () => {
try {
const version = await ExpoVibesSDK.getSDKVersion();
console.log('SDK Version:', version);
return version;
} catch (error) {
console.error('Failed to get SDK version:', error);
return null;
}
};Updated about 18 hours ago