[Bridge] RFC: Shader-like native code system

[devknoll]

I briefly mentioned this here, but I thought I'd take a moment to hash it out a little further.

It seems like there are a number of cases where you might need to perform some logic either synchronously (e.g. shouldChangeCharactersInRange for formatting) or the bridge is too slow (e.g. Animated).

I think it would be beneficial to allow those cases to be mostly resolved in JavaScript where possible, but with the ability to use native code where necessary to get the job done.

I propose that we add some way for npm module authors to specify snippets of native code that they can then use in their components. Here's how that might look for TextInput:

// Similar to image!, tell the packager that we want a native function.
// This should resolve by platform (e.g. formatPhoneNumber.ios.mm,
// or formatPhoneNumber.android.java). It'll return an opaque identifier
// that the native side can use.

var formatPhoneNumber = require('native!formatPhoneNumber');

// ...

var MyComponent = React.createClass({
  render: function() {
    // Since we have a native function, we can just tell the component to call
    // that instead (or in addition to?) what it already would.
    return <TextInput shouldChangeCharactersInRange={formatPhoneNumber}/>;
  }
});

You could imagine doing the same thing to allow e.g. arbitrary formulas to be used by Animated.

The first step in the build process would then be to scour node_modules/ for any native requires, and generate a single file (already in the Xcode project, so it can just be overwritten) with the contents.

I'm happy to work on this if it sounds like a good idea.

Thoughts?

[brentvatne]

@devknoll - don't know how I didn't notice this sooner, really cool idea. cc @vjeux @sahrens @tadeuzagallo

[vjeux]

This sounds like a promising idea. I'd really love to see a list of proposals / prototypes to fix this class of problems. Huge potential there

[devknoll]

I'd probably amend this proposal to import Obj-C/Java classes as modules, instead of functions, as originally written.

---

I'd love to see some other proposals too. This seems like the lesser of the evils (another being full cocoa pods support / importing pods from node modules, which seems like it might be over kill) so far...

[sahrens]

Would it basically he a code-gen step before compilation? Definitely interesting...might not even be that hard to build. I'm not sure it would be that much better than just writing actual native code though...we could design some of our native modules, like TextFieldManager, to have a pluggable extention system, so you could, for example, register a custom shouldChangeCharactersInRange handler, similar to how you can inject bridge modules, but they would be within other modules.

[sahrens]

It would be kind of like subclass in or categories, but with a more explicit API.

[devknoll]

I think one big benefit would be sharing code with native bits more streamlined. Currently you have to use cocoa pods, or manually add an Xcodeproj. This is a bummer when all I want to do is format my text input ;-)

Longer term, it might be possible to break up react-native into smaller modules, with each containing just the small bit of native code that it actually uses.

I'm not sure if the current proposal deserves the name of a codegen step -- it would just concatenate all of the native modules it found as a prebuild step, possibly with some annotations so that the runtime could discover it.

[lwansbrough]

I'd be interested in seeing a way to enable synchronous calls in regular modules. For example: RCT_EXPORT_SYNC_METHOD.

The use case I'm interested in is working with OpenGL from React Native. Shimming WebGL would be a massive feature for React Native that would have tremendous potential.

[jsierles]

Thanks for opening this issue! We are closing it because it's a feature discussion, and we're trying to focus Github issues on bugs.

Feel free to send us a Pull Request or create an entry on Product Pains. If the feature gets upvoted enough it might get implemented.