Registry / messaging / react-native-websocket

react-native-websocket

library1.0.2jsnpmunverified

Provides a React Native component wrapper around the WebSocket API for managing real-time connections declaratively. Current stable version 1.0.2 (last release in 2019) receives minimal maintenance. Key differentiator: turns WebSocket lifecycle into a React component with props for events (onOpen, onMessage, onClose, onError) and a ref-based send() method. Alternatives like 'react-native-use-websocket' offer hooks-based usage and better maintenance. Requires polyfill for older React Native versions (0.60+) and does not support React Native Web or Expo managed workflow natively.

messaging testing

npm install react-native-websocket

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-NATIVE-WEBSO

react-native-websocket

messagingjavascriptv1.0.2

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

WebSocket

✓ import WS from 'react-native-websocket'

✗ import { WebSocket } from 'react-native-websocket'

Default export only; named import will result in undefined.

default

✓ import WS from 'react-native-websocket'

✗ const WS = require('react-native-websocket')

CommonJS require works but not recommended; package is ESM-compatible. Named require will get the default export.

WebSocketRef

✓ const wsRef = useRef(null); <WS ref={wsRef} ... />

Use ref to call wsRef.current.send() or check wsRef.current.readyState. Do not access underlying WebSocket directly.

Sets up a React Native component with a WebSocket connection, message input, send button, and echo display using WS component and refs.

import React, { useRef, useState } from 'react'; import { View, TextInput, Button, Text, StyleSheet } from 'react-native'; import WS from 'react-native-websocket'; const WS_URL = process.env.WS_URL ?? 'wss://echo.websocket.org'; export default function App() { const wsRef = useRef(null); const [message, setMessage] = useState(''); const [echo, setEcho] = useState(''); const sendMessage = () => { if (wsRef.current && wsRef.current.send) { wsRef.current.send(message); } }; return ( <View style={styles.container}> <TextInput style={styles.input} value={message} onChangeText={setMessage} placeholder="Type a message" /> <Button title="Send" onPress={sendMessage} /> <Text>Echo: {echo}</Text> <WS ref={wsRef} url={WS_URL} onOpen={() => console.log('Connected')} onMessage={(msg) => setEcho(msg)} onError={(err) => console.error(err)} onClose={() => console.log('Disconnected')} reconnect onReconnect={(attempt) => console.log('Reconnecting attempt:', attempt)} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', padding: 20 }, input: { borderWidth: 1, marginBottom: 10, padding: 8 }, });

Debug

Known issues

deprecatedPackage last updated in 2019; no support for React Native 0.60+ autolinking or modern workflows.

fix

Consider alternative like 'react-native-use-websocket' or 'WebSocket' from react-native directly.

affects: >=1.0.0

gotchaThe onMessage prop returns the raw event object, not parsed data. You must extract event.data or call JSON.parse.

fix

Use onMessage={(event) => setMessage(event.data)} inside callback.

affects: >=1.0.0

gotchareconnect prop triggers exponential backoff; default max reconnect attempts is 5.

fix

Customize with onReconnect callback or set reconnectAttempts prop.

affects: >=1.0.0

gotchaDoes not work out-of-the-box with React Native Web or Expo managed workflow; requires polyfills or eject.

fix

Use platform-specific code or eject to bare workflow.

affects: >=1.0.0

Errors

Common errors & fixes

undefined is not an object (evaluating 'this.ws.send')

WebSocket not initialized when calling send before connection open.

fix

Check wsRef.current.readyState === WebSocket.OPEN before sending, or wrap send in onOpen callback.

TypeError: Cannot read property 'send' of undefined

Using ref.current.send before component mounts or before WebSocket connection established.

fix

Call send only after onOpen fires. Use guarded function: if (wsRef.current && wsRef.current.send) wsRef.current.send(data);

Network request failed when connecting to wss://...

Self-signed certificate or missing SSL certificate in development; React Native doesn't accept self-signed certs by default.

fix

Use ws:// for local development (not production), or configure certificate pinning.

Upgrade

Version history

1.0.2latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React component

react-nativerequiredPeer dependency for React Native environment

Agent activity

16 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/tiaanduplessis/react-native-websocket ↗

packagereact-native-websocket ↗

homepagehttps://github.com/tiaanduplessis/react-native-websocket ↗