CODEWITHSUNDEEP
objective-cswiftreact-native
Spencer Alger
Spencer Alger

Reputation: 958

Confusing Swift type annotations for React Native Promises

I'm playing around with React Native and attempting to write some native code that communicates over bluetooth. I'm confused by the type annotations that I need to use in order for it to work. Could someone please explain why I have to have the "resolver" and "rejecter" bits in the following two code snippets? Is there a way to write this without those unused parts?

My implementation, MyAsyncModule.swift:

@objc(MyAsyncModule)
class MyAsyncModule: NSObject {

  @objc func echoAsync(
    input: NSNumber,
    resolver resolve: RCTPromiseResolveBlock,
    rejecter reject: RCTPromiseRejectBlock
  ) -> Void {

    resolve(input)

  }

}

From my bridge file, MyAsyncModuleBridge.m

RCT_EXTERN_METHOD(echoAsync:
                 (nonnull NSNumber *)input
                  resolver:(RCTPromiseResolveBlock *)resolve
                  rejecter:(RCTPromiseRejectBlock *)reject
                 )

I am coming from scripting land so types are foreign to me, but it seems too weird that React Native refuses to identify my the echoAsync method unless both the implementation and the bridge include the resolver and rejecter bits...

Upvotes: 4

Views: 2293

Answers (1)

Bob9630
Bob9630

Reputation: 953

The resolver and reject calls are needed to have the framework generate a "promise". A promise can be thought of as a placeholder for a value that will be made available in the future. The resolver is called when the native code is done doing its work and is ready to pass the results back to the JavaScript land. reject is used when the native side detects an error and is used to report that error from native to JavaScript land.

To get a bit deeper, when you're JavaScript calls a native function, it doesn't pause and wait for native to finish up like a normal function call. It instead just goes on executing the next line of code (notice how React-Native prevents you from setting a return value for your exported functions meaning they are explicitly making sure you don't try and wait for a return value).

So then how does native code ever report the results back to JavaScript? There are two options

  1. callbacks (in native these have the type RCTResponseSenderBlock) when called, cause a JavaScript function to run with the passed arguments
  2. promises (with the types RCTPromiseResolveBlock and RCTPromiseRejectBlock) which causes you success handler to run with the passed arguments when resolver is called or causes your error handler to run when reject is called.

As for async function you MUST use promises.

For more info on JavaScript promises checkout:

http://www.html5rocks.com/en/tutorials/es6/promises/

https://facebook.github.io/react-native/docs/native-modules-ios.html#promises

Upvotes: 4

Related Questions