React Native SDK Examples

Basic Usage

Available

Simple example showing how to connect, subscribe to a channel, and publish messages using the core SDK functionality in React Native.

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!');

View Full Code React Native Demo

React Component

Available

Complete React Native component example showing how to integrate OddSockets with React hooks and state management.

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();
  }, []);

  return (
    <View>
      {/* Chat UI */}
    </View>
  );
};

View Full Code React Native Demo

Custom Hook

Available

Reusable custom React hook for OddSockets that handles connection state, reconnection, and cleanup automatically.

// 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>
  );
};

View Full Code React Native Demo

PubNub Migration

Available

Drop-in replacement example showing how to migrate from PubNub to OddSockets in React Native with minimal code changes.

// Replace PubNub with OddSockets
import { PubNubCompat } from '@oddsocketsai/react-native-sdk';

const pubnub = new PubNubCompat({
  subscribeKey: 'ak_live_1234567890abcdef',
  userId: 'user123'
});

// Same API as PubNub!
pubnub.addListener({
  message: function(messageEvent) {
    console.log('Message:', messageEvent.message);
  }
});

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

View Full Code React Native Demo

Complete Chat App

Available

Full-featured chat application built with React Native and OddSockets, including message history, presence, and typing indicators.

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

const ChatApp = () => {
  const [client] = useState(() => new OddSockets({
    apiKey: 'your-api-key',
    userId: 'user-123'
  }));
  
  const [channel] = useState(() => client.channel('general'));
  const [messages, setMessages] = useState([]);
  const [inputText, setInputText] = useState('');
  const [isConnected, setIsConnected] = useState(false);

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

    // Subscribe to messages
    channel.subscribe((message) => {
      setMessages(prev => [...prev, message]);
    }, {
      enablePresence: true,
      retainHistory: true
    });

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

  const sendMessage = async () => {
    if (inputText.trim() && isConnected) {
      await channel.publish({
        text: inputText,
        timestamp: new Date().toISOString(),
        user: 'user-123'
      });
      setInputText('');
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>Chat Room</Text>
        <Text style={styles.status}>
          {isConnected ? '🟢 Connected' : '🔴 Disconnected'}
        </Text>
      </View>
      
      <FlatList
        data={messages}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => (
          <View style={styles.messageContainer}>
            <Text style={styles.messageText}>{item.message.text}</Text>
            <Text style={styles.timestamp}>
              {new Date(item.message.timestamp).toLocaleTimeString()}
            </Text>
          </View>
        )}
        style={styles.messagesList}
      />
      
      <View style={styles.inputContainer}>
        <TextInput
          value={inputText}
          onChangeText={setInputText}
          placeholder="Type a message..."
          style={styles.textInput}
          multiline
        />
        <TouchableOpacity 
          onPress={sendMessage}
          style={[styles.sendButton, !isConnected && styles.disabled]}
          disabled={!isConnected}
        >
          <Text style={styles.sendButtonText}>Send</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    padding: 16,
    backgroundColor: '#3b82f6',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: 'white',
  },
  status: {
    fontSize: 14,
    color: 'white',
  },
  messagesList: {
    flex: 1,
    padding: 16,
  },
  messageContainer: {
    backgroundColor: 'white',
    padding: 12,
    marginBottom: 8,
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 2,
  },
  messageText: {
    fontSize: 16,
    marginBottom: 4,
  },
  timestamp: {
    fontSize: 12,
    color: '#666',
  },
  inputContainer: {
    flexDirection: 'row',
    padding: 16,
    backgroundColor: 'white',
    borderTopWidth: 1,
    borderTopColor: '#e5e7eb',
  },
  textInput: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#d1d5db',
    borderRadius: 8,
    padding: 12,
    marginRight: 8,
    maxHeight: 100,
  },
  sendButton: {
    backgroundColor: '#3b82f6',
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderRadius: 8,
    justifyContent: 'center',
  },
  sendButtonText: {
    color: 'white',
    fontWeight: 'bold',
  },
  disabled: {
    backgroundColor: '#9ca3af',
  },
});

export default ChatApp;

View Full Code React Native Demo

Expo Integration

Available

Example showing how to integrate OddSockets with Expo, including proper setup and configuration for Expo Go and standalone builds.

// Install with Expo
// expo install @oddsocketsai/react-native-sdk

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import OddSockets from '@oddsocketsai/react-native-sdk';

export default function App() {
  const [client] = useState(() => new OddSockets({
    apiKey: 'your-api-key',
    userId: 'expo-user'
  }));
  
  const [connectionStatus, setConnectionStatus] = useState('Connecting...');

  useEffect(() => {
    client.on('connected', () => {
      setConnectionStatus('Connected to OddSockets!');
    });
    
    client.on('disconnected', () => {
      setConnectionStatus('Disconnected');
    });
    
    client.on('error', (error) => {
      setConnectionStatus(`Error: ${error.message}`);
    });

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

  return (
    <View style={styles.container}>
      <Text style={styles.title}>OddSockets + Expo</Text>
      <Text style={styles.status}>{connectionStatus}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 16,
  },
  status: {
    fontSize: 16,
    color: '#666',
  },
});

View Full Code Expo Snack