OddSockets React Native SDK Documentation

Overview & Features

The OddSockets React Native SDK provides a powerful, easy-to-use interface for real-time messaging in React Native applications, with full TypeScript support and React Native-specific optimizations.

React Native Optimized

Built specifically for React Native with proper Metro bundler support and native performance.

Full TypeScript

Complete TypeScript implementation with comprehensive type definitions and strict typing.

PubNub Compatible

Drop-in replacement for PubNub with migration utilities included.

High Performance

Optimized for mobile with efficient WebSocket connections and smart routing.

Cost Effective

No per-message pricing, industry-standard 32KB message limits, transparent pricing.

Automatic Failover

Built-in redundancy and intelligent error handling for 99.9% uptime.

Installation

bash

npm install @oddsocketsai/react-native-sdk

bash

yarn add @oddsocketsai/react-native-sdk

bash

expo install @oddsocketsai/react-native-sdk

Quick Start

Basic Usage

typescript

import OddSockets from '@oddsocketsai/react-native-sdk';

const client = new OddSockets({
  apiKey: 'ak_live_1234567890abcdef',
  userId: 'user-123'
});

const channel = client.channel('my-channel');

// Subscribe to messages
await channel.subscribe((message) => {
  console.log('Received:', message);
});

// Publish a message
await channel.publish('Hello, React Native!');

React Component Example

typescript

import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, TouchableOpacity } from 'react-native';
import OddSockets from '@oddsocketsai/react-native-sdk';

const ChatComponent = () => {
  const [client] = useState(() => new OddSockets({
    apiKey: 'ak_live_1234567890abcdef',
    userId: 'user-123'
  }));
  
  const [messages, setMessages] = useState([]);
  const [inputText, setInputText] = useState('');

  useEffect(() => {
    const channel = client.channel('chat');
    
    channel.subscribe((message) => {
      setMessages(prev => [...prev, message]);
    });

    return () => {
      client.disconnect();
    };
  }, []);

  const sendMessage = async () => {
    if (inputText.trim()) {
      const channel = client.channel('chat');
      await channel.publish(inputText);
      setInputText('');
    }
  };

  return (
    <View>
      {messages.map((msg, index) => (
        <Text key={index}>{msg.message}</Text>
      ))}
      <TextInput
        value={inputText}
        onChangeText={setInputText}
        placeholder="Type a message..."
      />
      <TouchableOpacity onPress={sendMessage}>
        <Text>Send</Text>
      </TouchableOpacity>
    </View>
  );
};

PubNub Migration

typescript

import { PubNubCompat } from '@oddsocketsai/react-native-sdk';

// Drop-in replacement for PubNub
const pubnub = new PubNubCompat({
  subscribeKey: 'ak_live_1234567890abcdef',
  userId: 'user123'
});

pubnub.addListener({
  message: function(messageEvent) {
    console.log('Message:', messageEvent.message);
  }
});

pubnub.subscribe({
  channels: ['my-channel']
});

Configuration

Client Options

typescript

const client = new OddSockets({
  apiKey: 'your-api-key',           // Required: Your OddSockets API key
  userId: 'user-id',                // Optional: User identifier
  autoConnect: true,                // Optional: Auto-connect on creation
  options: {                        // Optional: Socket.IO options
    timeout: 10000,
    transports: ['websocket', 'polling']
  }
});

Channel Options

typescript

channel.subscribe(callback, {
  enablePresence: true,             // Enable presence tracking
  retainHistory: true,              // Retain message history
  maxHistory: 100                   // Max history size
});

channel.publish(message, {
  ttl: 3600,                        // Time to live (seconds)
  metadata: { priority: 'high' },   // Additional metadata
  storeInHistory: true              // Store in message history
});

Examples

Explore comprehensive examples demonstrating the OddSockets React Native SDK in action:

View All Examples

Browse all available examples including React Native components, hooks, and complete app examples

Performance & Compatibility

OddSockets React Native SDK delivers superior performance with broad compatibility:

<50ms

Latency

99.9%

Uptime

32KB

Max Message

1M+

Messages/sec

React Native Support

React Native 0.68+ (2022)
iOS 11+ / Android API 21+
Expo SDK 46+
Metro bundler compatible

TypeScript Support

TypeScript 4.5+
Full type definitions
Strict mode compatible
IntelliSense support

React Native Specific Features

The OddSockets React Native SDK includes several React Native-specific optimizations and features:

Mobile Optimized

Optimized for mobile networks with intelligent reconnection and battery-efficient polling.

Metro Compatible

Fully compatible with Metro bundler and React Native's module resolution system.

Fetch API

Uses React Native's built-in fetch API instead of external HTTP libraries for better compatibility.

Background Support

Handles app backgrounding gracefully with automatic reconnection when returning to foreground.

React Hooks Integration

typescript

// Custom hook for OddSockets
const useOddSockets = (apiKey: string, userId: string) => {
  const [client] = useState(() => new OddSockets({ apiKey, userId }));
  const [isConnected, setIsConnected] = useState(false);

  useEffect(() => {
    client.on('connected', () => setIsConnected(true));
    client.on('disconnected', () => setIsConnected(false));

    return () => {
      client.disconnect();
    };
  }, [client]);

  return { client, isConnected };
};

// Usage in component
const MyComponent = () => {
  const { client, isConnected } = useOddSockets('your-api-key', 'user-123');
  
  return (
    <View>
      <Text>Status: {isConnected ? 'Connected' : 'Disconnected'}</Text>
    </View>
  );
};