Support Expo/React Native on Android/iOS, not just Web Simulator

[cgav]

Please add support for Expo and/or React Native 🤩

[twocs]

Our app on the simulator is logging into VS Code via react-native-logs, and it's running watchman for file changes. There must be something you can do!

[smcenlly]

We tried Console Ninja on a fresh expo project, using npm run web and it worked for us without needing to do anything special.

Console Ninja won't work when running on iPhone / Android (it only connects to your localhost right now), but it should work when running using the web version.

If it's not working for you, please create a new issue and provide us with steps to reproduce your problem.

[kirillzyusko]

Console Ninja won't work when running on iPhone / Android (it only connects to your localhost right now)

@smcenlly is there any plans to add support for that?

I think many react-native projects are targeting only Android/iOS as platforms. And I (as a react-native developer) would love to see support for Android/iOS.

Anyway, the project is really great and I can only wish you the success in the development of this plugin 😊

[smcenlly]

@kirillzyusko - I don't expect we'd be able to target Android/iOS as runtime platforms any time soon. There will likely be some network isolation problems as well as possibly some runtime problems.

I'll re-open this issue and change the title to be more explicity about Android and iOS since browser runtime for expo/react-native is supported.

[kirillzyusko]

@smcenlly got it. Do you have any architecture docs on how your plugin works?

I'm asking because in the past I had a need to capture console.log statements in android app (we had kind of performance benchmarks and we measured startup metrics). Once they've been captured we've sent them as HTML report to GitLab comments.

Just thought that maybe the same mechanism (or partially) can be used in console-ninja plugin?

[smcenlly]

@smcenlly got it. Do you have any architecture docs on how your plugin works?

Unfortunately, we don't have anything public we can share.

--

If you're able to share a sample of how you've sent console.log statements from Android/iOS runtime to a remote system, that could definitely help.

[kirillzyusko]

@smcenlly sorry for a long response! Sure, I will share. We did it only for Android, but I think a similar approach could be applied to iOS too.

Basically we've opened logcat process in NodeJS script:

const { spawn } = require("child_process");

const child = spawn("adb", ["logcat"]);

And we added a listener to stdout:

child.stdout.on("data", (data) => {
  const output = data.toString();
});

Every new log will emit a new event. It will look like:

01-20 20:44:18.525 25066 25124 I ReactNativeJS: TAG: 1083

ReactNativeJS means that it has been logged by JS side of react-native. In my case the output above has been generated by next code in JS:

const tag = findNodeHandle(ref.current);
console.log('TAG: ' + tag);

Using simple transformation you can split up only part that has been logged by JS:

if (output.includes("ReactNativeJS")) {
  const jsOutput = output.split(" ")... // take the output from 6-index and concat with remaining part of array, but it can be optimised through regular expression 
}

That's how we gathered data from console.log statements. Do you think it will be possible to use a similar approach in console-ninja?

[smcenlly]

Thanks for the details. Unfortunately we're not very familiar with react-native development so we'll need to set it up and try what you've suggested to make sense of the details you've provided.

The key concern that we have is that right now, Console Ninja has no side-effects on your application/code unless it's running locally. If we were to modify your react-native runtime on a separate device, we may not have a mechanism to know it's running in localhost/dev mode. Probably just that we're not familiar with react-native, hopefully such a mechanism already exists that we could check.

[kirillzyusko]

If you're modifying environment for local development somehow, then react-native provides a way how to remove "development only" code in production builds. You can use:

if (__DEV__) {
  // ... your code
}

or if you are modifying env via babel plugin, then you can use process.env.BABEL_ENV === "production" check.

[LunatiqueCoder]

I'd choose the paid version if it had support for React Native. 🥲

[brentvatne]

hello! i work on expo. feel free to email me at brent at expo dot dev if you have any questions about how to integrate

[watadarkstar]

If you need someone with React Native and Expo experience to help with this feel free to email me at adrian at g2i dot co

I'm good friends with the Expo team :)