Official package · Frameworks

React Native and Expo hooks for realtime WebSockets

The hooks of the React package on React Native and Expo, a connection that closes in the background and opens again when the app returns, payloads of any size, and push notifications through Hibira Push.

@hibira-io/react-nativenpm ↗GitHub ↗

• useEvent, usePresence, useTrigger and useStream on the React Native build of pusher-js, for Expo SDK 50 and later and bare React Native 0.70 and later.
• After 30 seconds in the background the connection closes, so a phone in a pocket does not hold one of your plan’s connections.
• triggerChunked() and useChunkedEvent() split and join payloads bigger than the 4 KB Free plan limit, and useHibiraPush() registers the device for push notifications.

Sign in to see these snippets with your own cluster host. Sign in

1. Install

   npx expo install @hibira-io/react-native pusher-js @react-native-community/netinfo

2. Set it up

   import { HibiraProvider } from '@hibira-io/react-native';
   
   export default function App() {
     return (
       <HibiraProvider
         appKey={process.env.EXPO_PUBLIC_HIBIRA_KEY}
         options={{
           wsHost: 'ws.hibira.io',
           channelAuthorization: { endpoint: 'https://api.example.com/hibira/auth', transport: 'ajax' },
         }}
       >
         <Home />
       </HibiraProvider>
     );
   }

3. Use it

   import { useEvent, usePresence } from '@hibira-io/react-native';
   
   function Orders() {
     const [orders, setOrders] = useState([]);
     useEvent('orders', 'order.created', (order) => setOrders((list) => [order, ...list]));
     const { count } = usePresence('presence-dashboard');
     return <OrderList orders={orders} watching={count} />;
   }

Before you start

• Private and presence channels need an auth endpoint on your backend that signs subscriptions with the app secret, as with pusher-js.
• For a server on your computer, set wsHost to its LAN address, not localhost, which on a phone is the phone itself.

Use the app key from your dashboard; the secret stays on your server. Channels, events and authorization endpoints work exactly as they do with Pusher. Create your free account →