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

maya-kai

v1.0.0

Published

Gesture and user interaction sync library for ReactNative

Downloads

14

Readme

Maya-Kai ( மாய கை )

A way to mirror gestures and user interactions in ReactNative applications. Useful for testing apps on devices with different screen sizes at the same time - just interact with one device and all other devices follow the interactions. Can also be used for recording and then replaying user interactions.

ReactNative uses React's EventPluginHub and this module adds an additional plugin to listen to events and send them to a server. The server broadcasts these events to all other connected clients, enabling mirroring of gestures.

Usage

  1. Install the package using npm install maya-kai inside your ReactNative applications.If you are running [email protected], you may need to patch ReactNative. Run node ./node_modules/maya-kai/patch.js to expose the functions needed for listening to events.

  2. _Server _- Start the server at port 8082 using node_modules/.bin/maya-kai-server. Note that this server should be accessible to the device and you may need to do adb reverse tcp:8082 tcp:8082 for Android.

  3. Client - Import and start this module in the ReactNative application's start file - like index.ios.js or index.android.js using

import MK from 'maya-kai';
MK.start();
  1. Start the ReactNative application on multiple devices. The application should now be able to connect to the server and start sending events.

API / Options

Server

By default the server starts on localhost on port 8082, this can be changed by using the -p|--port and -s|--server options:

node_modules/.bin/maya-kai-server -s myserver.com -p 8088

Client

If the server is started on a different server or port, it can be passed to the ReactNative application using

import MK from 'maya-kai';
MK.start('myserver.com:8088', {}).then(successCallback, errorCallback)

The second parameter to MK.start is an options object, that can takae the following keys

  • ignoredEvents: An array to topLevelEvent items that should be ignored and NOT sent to other devices. By default, topLayout is ignored and not sent to other devices. To send ALL events, simply set {ignoredEvents: []}

Troubleshooting

If you see a "Yellow BOX" warning on the ReactNative application, it means that the app was not able to connect to the Maya-Kai server. Check if you have run adb reverse, or are able to access the server URL from a browser on the device.

Note that gesture sync between iOS and Android may be buggy since the internal implementation may not always create the exact Object tree and elements may not be present on one of the platforms.

Utilities

This modules comes with a set of utilities

Record/Replay

This is a client that lets you record and play back the gestures at a later time. To run this, start the server, add the client code to as described in the usage section. Start the ReactNative app. Then run node_modules/maya-kai/src/clients/record.js [_actions.log]. Perform actions on the ReactNative app and once you are done, hit Ctrl+C on the record.js process.

Then reload the ReactNative app and run node_modules/maya-kai/src/clients/replay.js [_actions.log]. The replay process will read the actions and send them back to the application.

Delayed Echo

The echo client listens to events, and send them back to the same app after a 5 second delay. Can be used to test actions like counters, etc. Typically useful to see if the setup works.