Registry / messaging / react-native-use-websocket

react-native-use-websocket

JSON →
library0.2.6jsnpmunverified

A React Native hook for robust WebSocket integrations. Current version 0.2.6, maintained as a fork of react-use-websocket adapted for React Native. Provides auto-reconnect, message queueing, shared WebSocket support across components, and TypeScript types. Differentiator: handles mobile-specific scenarios like network transitions and backgrounding. Release cadence is low; last update October 2021.

npm install react-native-use-websocket
INSTALL
IMPORT
SIG · REACT-NATIVE-USE-W
R
react-native-use-websocket
messagingjavascriptv0.2.6
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.

useWebSocket
import useWebSocket from 'react-native-use-websocket'
import { useWebSocket } from 'react-native-use-websocket'
Default export only; named import will fail.
ReadyState
import useWebSocket, { ReadyState } from 'react-native-use-websocket'
const ReadyState = require('react-native-use-websocket').ReadyState
Named export available for TypeScript enum of connection states.
SendMessage
import useWebSocket from 'react-native-use-websocket'; const { sendMessage } = useWebSocket(url);
import { sendMessage } from 'react-native-use-websocket'
sendMessage is returned by the hook, not a standalone export.

Basic React Native component using useWebSocket to send messages and display connection status.

import React, { useState, useCallback } from 'react'; import { Button, Text } from 'react-native'; import useWebSocket, { ReadyState } from 'react-native-use-websocket'; export default function App() { const [url] = useState('wss://echo.websocket.org'); const { sendMessage, lastMessage, readyState } = useWebSocket(url, { shouldReconnect: (closeEvent) => true, }); const handleSend = useCallback(() => sendMessage('Hello'), [sendMessage]); const status = { [ReadyState.CONNECTING]: 'Connecting', [ReadyState.OPEN]: 'Open', [ReadyState.CLOSING]: 'Closing', [ReadyState.CLOSED]: 'Closed', [ReadyState.UNINSTANTIATED]: 'Uninstantiated', }[readyState]; return ( <> <Button onPress={handleSend} title="Send Hello" disabled={readyState !== ReadyState.OPEN} /> <Text>Status: {status}</Text> {lastMessage && <Text>Last: {lastMessage.data}</Text>} </> ); }
Debug
Known issues
gotchauseWebSocket is a default export, not named. import { useWebSocket } will result in undefined.
fix
Use default import: import useWebSocket from 'react-native-use-websocket'
affects: >=0.0.0
gotchaThe `shouldReconnect` option defaults to false, meaning the WebSocket will NOT automatically reconnect on close unless explicitly set.
fix
Pass `shouldReconnect: (closeEvent) => true` to enable auto-reconnect.
affects: >=0.0.0
deprecatedThe `onMessage` callback option is deprecated; use the `lastMessage` return value instead.
fix
Remove onMessage from options object and read lastMessage from hook return.
affects: >=0.2.0
Errors
Common errors & fixes
TypeError: Cannot destructure property 'sendMessage' of 'undefined' or 'null'
Named import instead of default import: `import { useWebSocket }` returns undefined.
fix
Change to: `import useWebSocket from 'react-native-use-websocket'`
WebSocket is closed before the connection is established.
Component unmounts quickly or url changes trigger new connection.
fix
Ensure url is stable or add cleanup logic: return () => {} in useEffect.
Upgrade
Version history
0.2.6latest on npm
Audit
Dependencies
reactrequiredpeer dependency, requires React 16.8+ for hooks
react-nativerequiredpeer dependency, core environment
Agent activity
16 hits · last 30 days
node
14
Amazon
1
OpenAI (training)
1
Resources
react-native-use-websocket — npm install react-native-use-websocket · libregistry