npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-multipeer-connectivity

v0.1.0

Published

react-native-multipeer-connectivity

Downloads

11

Readme

react-native-multipeer-connectivity

API wrapper of apple multipeer-connectivity for react-native

Installation

npm install react-native-multipeer-connectivity
npx pod-install

Then update your Info.plist by adding:

<key>NSLocalNetworkUsageDescription</key>
<string>[a]</string>
<key>NSBonjourServices</key>
<array>
    <string>_[b]._tcp</string>
</array>
  • [a] will be used in the system permission request dialog
  • [b] is the service name that will be used in our api

API

import { initSession } from 'react-native-multipeer-connectivity';
const session = initSession(options);

Copied from the generated .d.ts file:

type RNPeerID = string;
export interface RNPeer {
  id: RNPeerID;
  displayName: string;
}
export declare enum PeerState {
  notConnected = 0,
  connecting = 1,
  connected = 2
}
export interface InitSessionOptions {
  /**
   * This name will be used for showing when other peers browsed you.
   * The peer’s name must be no longer than 63 bytes in UTF-8 encoding.
   */
  displayName: string;
  /**
   * This is the name corresponding to the value defined in Info.plist
   */
  serviceType: string;
  /**
   * Custom data available to browsers in the `onFoundPeer` event
   *
   * Limitations:
   *  - Object keys cannot contain an equals sign.
   *  - Each key and value must be string, and the key-value pair must be no longer than 255 bytes (total) when encoded in UTF-8 format with an equals sign (=) between the key and the value.
   *  - The total size of the keys and values should be no more than about 400 bytes.
   *
   * Check https://developer.apple.com/documentation/multipeerconnectivity/mcnearbyserviceadvertiser/1407102-init for detailed explanation.
   */
  discoveryInfo?: Record<string, string>;
}
export interface MPCSession {
  peerID: string;
  /**
   * Start browsing nearby peers which are advertizing
   */
  browse(): Promise<void>;
  /**
   * Start advertizing so it can be bound by the peers which are browsing
   */
  advertize(): Promise<void>;
  /**
   * Stop browsing
   */
  stopBrowsing(): Promise<void>;
  /**
   * Stop advetizing
   */
  stopAdvertizing(): Promise<void>;
  /**
   * Invite the peer you found
   */
  invite(peerID: string): Promise<void>;
  invite(options: {
    peerID: string;
    /**
     * Invite timeout seconds, default 30s
     */
    timeout?: number;
    /**
     * Context data sent to `onReceivedPeerInvitation` event
     */
    context?: Record<string, any>;
  }): Promise<void>;
  /**
   * Send utf-8 text to target peer
   * @param id
   * @param text
   */
  sendText(id: RNPeerID, text: string): Promise<void>;
  /**
   * Disconnect all peers
   */
  disconnect(): Promise<void>;
  onStartAdvertisingError(fn: (event: {
    text: string;
  }) => void): EmitterSubscription;
  /**
   * When you received a invitation by other peer using `invite`, this event will be called
   * @param fn
   */
  onReceivedPeerInvitation(fn: (event: {
    peer: RNPeer;
    context?: Record<string, any>;
    /**
     * You need to call this function to decide to accept(true) or reject(true) the invitation
     * @param accept
     */
    handler: (accept: boolean) => Promise<void>;
  }) => void): EmitterSubscription;
  onStartBrowsingError(fn: (event: {
    text: string;
  }) => void): EmitterSubscription;
  /**
   * When you (re-)call `advertize` and found a peer, this event will be called, even if the peer has found before
   */
  onFoundPeer(fn: (event: {
    peer: RNPeer;
    discoveryInfo?: Record<string, string>;
  }) => void): EmitterSubscription;
  /**
   * Called when the peer was disconnected, for example, the app was in background
   * @param fn
   */
  onLostPeer(fn: (event: {
    peer: RNPeer;
  }) => void): EmitterSubscription;
  /**
   * Called when the peer state changed
   * @param fn
   */
  onPeerStateChanged(fn: (event: {
    peer: RNPeer;
    state: PeerState;
  }) => void): EmitterSubscription;
  /**
   * Called when you received a utf-8 text
   * @param fn
   */
  onReceivedText(fn: (event: {
    peer: RNPeer;
    text: string;
  }) => void): EmitterSubscription;
}
/**
 * Call this function to initiate a session
 * @param options
 */
export declare function initSession(options: InitSessionOptions): MPCSession;

Example

Checkout example for a runnable demo

Others

This repo did the same thing, but it abandoned and seems not work well with latest react-native versions, so I created this repo.

License

MIT


Made with create-react-native-library