React Native example

[jamesholcomb]

Anyone have a working example?

[zalmoxisus]

Is there a maintained uptodate MobX React Native boilerplate? If so, I would send a PR to include DevTools there. Like https://github.com/chentsulin/react-native-counter-ios-android for Redux.

Last time I was checking, most of boilerplates was either outdated or didn't work at all.

[zalmoxisus]

Hopefully, I found one which was just updated. Though it still has some issues with android, I got it run for iOS.

You can try it from here. The integration is really simple.

[jamesholcomb]

Yep, I threw together a quick sample using react-native-mobx

https://github.com/jamesholcomb/mobx-remotedev/tree/master/examples/react-native-counter

I can send a PR to his repo if you don't want it.

[zalmoxisus]

@jamesholcomb, does it work for Android? I also saw some warnings when running on iOS (though it was working fine).

I don't mind having here an example for React Native, but someone should maintain it, keeping uptodate everytime React Native has something new. I'm not using MobX on React Native yet. So, better to contribute to a boilerplate.

[jamesholcomb]

Have not tested on Android.

I cloned your repo and got the same warnings about synthetic events.

Were you using the Remote DevTools chrome extension? I could not get any instances to appear that way. My example resorted to using remote-redux-devtools-on-debugger

[zalmoxisus]

@jamesholcomb, yes, I tried it with the extension, and it works. You should open Remote DevTools window.

It should work with remote-redux-devtools-on-debugger as well, but if you have runserver or hostname parameter, you should specify the port here.

[zalmoxisus]

@jamesholcomb, when you'll have a chance to try it again, please let me know whether it works that way. Additionally you could use the web monitor.

That React synthetic events warning comes from react-native-button and can be solved by adding bindings to the actions. Not sure if we could and should solve it from here.

[jamesholcomb]

Is there an advantage to using the extension over the UI debugger integration?

Thanks for pointing out the issue with react-native-button 👍

[zalmoxisus]

All of them use remotedev-app under the hood, so there isn't a big difference. However, React Native Debugger could be more handy for React Native as it includes also React DevTools.

[lulutia]

I tried the repo of yours. And as for the warning of iOS, i just add the e.persist() before store.increase(). And i test the tool on the android. it works fine. just let you know.

[HaveF]

@lulutia what's your version of mobx, RN? I tried on ios, it works. Btw, I donot know what you said about e.persist() things, could you explain it more? thanks!

But I tried on android(genymotion), it doesnot work. mobx 3.0 RN 0.40

In these commits, commit add mobx-remotedev · HaveF/mobx-react-native-template-remotedev@fe9b577 cause the problem, but the previous commit has no problem.

suspect it is the problem of socketcluster? but the ios works, very strange. this issue v5.0.17 'socket hangup' error for React Native iOS Only, works for Browser and Andriod · Issue #68 · SocketCluster/socketcluster-client did just the opposite.

[zalmoxisus]

Socket hung up means that the connection to remotedev.io cannot be established. It can be for various reasons. You can use a local server to be sure that everything is on you control.

Regarding e.persist(), that example above was passing synthetic events, which is not allowed by React to be used later. One solution is to use event.persist(), but better not to pass whole event at all as described here.

[HaveF]

@zalmoxisus thanks your advice, I will redo the android test after #14 is resolved

[HaveF]

@zalmoxisus iOS version is total fine(using remotedev.io) after update remotedev as you suggest in #14. But android version is still not work.

Then I try set remotedev-server to local.

android

0. change the code @remotedev({ remote: false, onlyActions: true, global: true })
1. Installed remotedev-server
2. I use genymotion, network mode is bridge. So I suppose the script is fine "remotedev": "remotedev --hostname=localhost --port=8000 --injectserver=reactnative" run it once.
3. react-native run-android Install process is fine: Installing APK 'app-debug.apk' on 'Google Nexus 5 - 6.0.0 - API 23 - 1080x1920 - 6.0' Installed on 1 device.
4. popup window seems fine

~/Desktop/proj/mobx-react-native-template-remotedev/node_modules/react-native/packager ~
Scanning 601 folders for symlinks in /Users/HaveF/Desktop/proj/mobx-react-native-template-remotedev/node_modules (11ms)
 ┌────────────────────────────────────────────────────────────────────────────┐ 
 │  Running packager on port 8081.                                            │ 
 │                                                                            │ 
 │  Keep this packager running while developing on any JS projects. Feel      │ 
 │  free to close this tab and run your own packager instance if you          │ 
 │  prefer.                                                                   │ 
 │                                                                            │ 
 │  https://github.com/facebook/react-native                                  │ 
 │                                                                            │ 
 └────────────────────────────────────────────────────────────────────────────┘ 
Looking for JS files in
   /Users/HaveF/Desktop/proj/mobx-react-native-template-remotedev 

[RemoteDev] Start server...
--------------------------------------------------------------------------------

   [Busy] Launching SocketCluster
   [Done] Migrations are finished

   [Active] SocketCluster started
            Version: 5.2.1
            Environment: dev
            WebSocket engine: uws
            Port: 8000
            Master PID: 9052
            Worker count: 1
            Broker count: 1

--------------------------------------------------------------------------------
[2017-01-24 10:31:30] <START> Initializing Packager
[2017-01-24 10:31:31]         HMR Server listening on /hot

React packager ready.

[2017-01-24 10:31:31] <START> Building Haste Map
[2017-01-24 10:31:31] <END>   Building Haste Map (186ms)
[2017-01-24 10:31:31] <END>   Initializing Packager (880ms)
[2017-01-24 10:31:36] <START> Symbolicating
[2017-01-24 10:31:36] <START> Transforming files
[2017-01-24 10:31:38] <END>   Transforming files (2443ms)
[2017-01-24 10:31:39] <END>   Symbolicating (2952ms)
[2017-01-24 10:31:43] <START> Requesting bundle
                              bundle_url: /index.android.bundle?platform=android&dev=true&hot=true&minify=false
[2017-01-24 10:31:43] <START> Transforming files
transformed 786/891 (88%)[2017-01-24 10:31:44] <END>   Transforming files (1103ms)
[2017-01-24 10:31:44] <END>   Requesting bundle (1348ms)
                              bundle_url: /index.android.bundle?platform=android&dev=true&hot=true&minify=false
[2017-01-24 10:31:45]         HMR Client connected
[2017-01-24 10:31:45] <START> Symbolicating
[2017-01-24 10:31:45] <END>   Symbolicating (391ms)
[2017-01-24 10:31:45] <START> Symbolicating
[2017-01-24 10:31:46] <END>   Symbolicating (376ms)
[2017-01-24 10:32:13]         HMR Server detected file change
[2017-01-24 10:32:45] <START> Symbolicating
[2017-01-24 10:32:45] <START> Transforming files
[2017-01-24 10:32:45] <END>   Transforming files (290ms)
[2017-01-24 10:32:46] <END>   Symbolicating (688ms)
[2017-01-24 10:33:45] <START> Symbolicating
[2017-01-24 10:33:45] <END>   Symbolicating (366ms)
[2017-01-24 10:34:45] <START> Symbolicating
[2017-01-24 10:34:45] <END>   Symbolicating (343ms)
[2017-01-24 10:35:45] <START> Symbolicating
[2017-01-24 10:35:45] <END>   Symbolicating (469ms)

5. browser seems fine http://localhost:8000/, no error msg in browser console.

6. but the device still say socket hung up

It seems the client ws for local remotedev is not connect, but the network seems fine, because the log above said HMR Client connected

iOS with remotedev-server in local

Only display remotedev panel, but do not display action in web browser and no warning message in browser console. In the network panel, the ws part seems fine

Have any idea I can try?

[zalmoxisus]

Try adb reverse as suggested here and maybe also to use 10.0.3.2 instead of localhost.

socket hung up means that the socket connection cannot be established.

[HaveF]

remotedev-server in local

In android, after change ip, the socket hung up message disappear, but the http://localhost:8000/ does not display action(as same as ios version), the setting seems have problem.

[zalmoxisus]

Yes, not only settings, but other parts of Material UI from umd build as well. We'll get rid of it in the next version of remotedev-app. Use http://remotedev.io/local/ or Redux DevTools Extension.

[HaveF]

ok...let me restatement all these things.

use http://remotedev.io/local/

ios works

android not works --> socket hung up

you said I should use local remotedev to debug

use local remotedev

ios not works

the ui did not display action

android not works

no socket hung up message, and also did not display action then you say, I can use remotedev.io

I already enter a infinite loop...

[jhen0409]

@HaveF I saw this line, you should to set hostname, port of local server.

[zalmoxisus]

@HaveF, you wrote in https://github.com/zalmoxisus/mobx-remotedev/issues/14#issuecomment-274674801 that the issue with actions was solved, not?

The web app from remotedev.io/local is exactly the same as on localhost:8000. The only difference is that it doesn't use umd build. So, just go to the settings there and choose to use the local server (as you were trying to do on localhost:8000). And, yes, you should also set that port for the client app as well (as @jhen0409 noted).

[HaveF]

@jhen0409 Thanks for trying to help me out. @zalmoxisus the #14 is about skip button problem, it works.(run in iOS and use remotedev.io)

But others not works.

Let's solve the ios first. Because it is can run at remotedev.io and no need to set hostname to other address.

When using local remotedev. react-native run-ios the default hostname is localhost, port is 8000, so I did not set them before. Now I set them in the code like this @remotedev({ remote: false, onlyActions: true, global: true, hostname: 'localhost', port: 8000 }) this line

1. run "remotedev-revert": "remotedev --revert=reactnative"
2. run "remotedevremotedev": "remotedev --hostname=localhost --port=8000 --injectserver=reactnative", this line
3. run react-native run-ios
4. open browser http://localhost:8000/, UI works
5. click counter in app, the browser did not display any action.

Btw, I use hands-off to manage my network. When run ios and use remotedev.io, the app request network access to remotedev.io, but when use the local remotedev, it did not request network access to localhost:8000, so I believe it is the client problem.

[jhen0409]

Ahh, sorry I didn't check carefully, you should set remote: true (see this line), otherwise it will never try to connect. (remote: false is use for extension or react-native-debugger)

[zalmoxisus]

1. You should keep remote as true here. Setting it to false makes sense only for browser environment (so you can choose whether to use the extension locally).
2. --injectserver=reactnative works only for Redux as being added in remote-redux-devtools by @jhen0409. It's not implemented in remotedev. So you should use just "remotedevremotedev": "remotedev --hostname=localhost --port=8000. Then for android also run adb reverse tcp:8000 tcp:8000.

With those 2 changes I got it working for iOS:

and in Android Emulator:

Note that in the first case I'm using remotedev.io/local, while configuring to use local server.

[zalmoxisus]

@jhen0409 maybe we could move that part in remotedev-utils and reuse it in remotedev as well?

[jhen0409]

@zalmoxisus actually I also do this in reactotron. 😆 Make it as a repo might be better? Do you agree?

/cc @skellock

[zalmoxisus]

@jhen0409, yes, it makes sense, also to maintain React Native changes in one place.

[skellock]

I'm on board with what you guys decide. You're on top of this much more than I am, and often you two guys write my code for me ❤️ . Sometimes I'll go on a long sad debugging journey and end up with a discussion between you guys on a github issue with a solution. From last year.

Not unlike this thread.

Lemme know what I can do to help or follow you.

[HaveF]

@jhen0409 @zalmoxisus Thanks for your help. It works now. The option name remote mislead me:sob:. It is written in doc(set remote false when use localhost ), but I neglect it.

[zalmoxisus]

@HaveF, no problem. Feel free to submit a PR if you think the docs can be improved. Also we could add a link to your repo, as an example for React Native, if you plan to maintain it. Or maybe submit those changes to the upstream to add it.

[HaveF]

I do like to maintain it as a separate repo only for mobx-remotedev. Maybe someone like to use jhen0409/react-native-debugger directly, so let the user decide to use what.