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.
-
Install the package using
npm install maya-kai
inside your ReactNative applications.If you are running [email protected], you may need to patch ReactNative. Runnode ./node_modules/maya-kai/patch.js
to expose the functions needed for listening to events. -
_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 doadb reverse tcp:8082 tcp:8082
for Android. -
Client - Import and start this module in the ReactNative application's start file - like
index.ios.js
orindex.android.js
using
import MK from 'maya-kai';
MK.start();
- Start the ReactNative application on multiple devices. The application should now be able to connect to the server and start sending events.
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 totopLevelEvent
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: []}
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.
This modules comes with a set of utilities
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.
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.