Skip to content

Instantly share code, notes, and snippets.

@ChetanBains

ChetanBains/0-bridging-react-native-cheatsheet.md

Forked from chourobin/0-bridging-react-native-cheatsheet.md
Created September 1, 2023 06:36
Show Gist options
  • Save ChetanBains/80475ea057b51b869099de68e40ddd63 to your computer and use it in GitHub Desktop.
Save ChetanBains/80475ea057b51b869099de68e40ddd63 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @chourobin chourobin revised this gist Aug 3, 2017. 1 changed file with 7 additions and 15 deletions.
    22 changes: 7 additions & 15 deletions events-ui.md
    View file
    Original file line number Diff line number Diff line change
    @@ -17,28 +17,26 @@ class VideoPlayer extends React.PureComponent {
    }
    render() {
    // Re-assign onEnd to the private _onEnd and store it in `nativeProps`
    const nativeProps = Object.assign({}, this.props)
    Object.assign(nativeProps, {
    const nativeProps = {
    ...this.props,
    onEnd: this._onEnd,
    })
    }
    return (
    <Video
    <RCTVideo
    {...nativeProps}
    />
    )
    }
    }

    const RCTVideo = requireNativeComponent('RCTVideo', VideoPlayer)

    VideoPlayer.propTypes = {
    /**
    * Callback that is called when the current player item ends.
    */
    onEnd: PropTypes.func,
    }

    VideoPlayer.defaultProps = {
    onEnd: null,
    }
    ```

    #### iOS
    @@ -55,6 +53,7 @@ VideoPlayer.defaultProps = {

    @interface VideoPlayer : UIView

    // or RCTBubblingEventBlock
    @property (nonatomic, copy) RCTDirectEventBlock onEnd;

    @end
    @@ -71,13 +70,6 @@ RCT_EXPORT_VIEW_PROPERTY(onEnd, RCTDirectEventBlock)
    ...
    }

    - (NSArray *)customDirectEventTypes
    {
    return @[
    @"onEnd",
    ];
    }

    /*
    * `VideoPlayerManager` acts as the delegate of all of the `VideoPlayer` views. This is just one
    * pattern and it's perfectly fine to call `onEnd` from the `VideoPlayer` directly.
  2. @chourobin chourobin revised this gist Jun 27, 2017. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion events-ui.md
    View file
    Original file line number Diff line number Diff line change
    @@ -78,7 +78,8 @@ RCT_EXPORT_VIEW_PROPERTY(onEnd, RCTDirectEventBlock)
    ];
    }

    /* `VideoPlayerManager` acts as the delegate of all of the `VideoPlayer` views. This is just one
    /*
    * `VideoPlayerManager` acts as the delegate of all of the `VideoPlayer` views. This is just one
    * pattern and it's perfectly fine to call `onEnd` from the `VideoPlayer` directly.
    */
    - (void)onEnd:(VideoPlayer *)videoPlayer
  3. @chourobin chourobin revised this gist Jun 27, 2017. 1 changed file with 11 additions and 8 deletions.
    19 changes: 11 additions & 8 deletions events-ui.md
    View file
    Original file line number Diff line number Diff line change
    @@ -59,7 +59,7 @@ VideoPlayer.defaultProps = {

    @end

    // VideoPlayerManager.h
    // VideoPlayerManager.m (inherits from RCTViewManager)
    @implementation VideoPlayerManager

    RCT_EXPORT_MODULE()
    @@ -71,6 +71,16 @@ RCT_EXPORT_VIEW_PROPERTY(onEnd, RCTDirectEventBlock)
    ...
    }

    - (NSArray *)customDirectEventTypes
    {
    return @[
    @"onEnd",
    ];
    }

    /* `VideoPlayerManager` acts as the delegate of all of the `VideoPlayer` views. This is just one
    * pattern and it's perfectly fine to call `onEnd` from the `VideoPlayer` directly.
    */
    - (void)onEnd:(VideoPlayer *)videoPlayer
    {
    if (!videoPlayer.onEnd) {
    @@ -79,13 +89,6 @@ RCT_EXPORT_VIEW_PROPERTY(onEnd, RCTDirectEventBlock)
    videoPlayer.onEnd(@{ @"some-data" : @1 });
    }

    - (NSArray *)customDirectEventTypes
    {
    return @[
    @"onEnd",
    ];
    }

    @end
    ```
  4. @chourobin chourobin revised this gist Apr 21, 2017. 1 changed file with 12 additions and 2 deletions.
    14 changes: 12 additions & 2 deletions events-ui.md
    View file
    Original file line number Diff line number Diff line change
    @@ -45,14 +45,17 @@ VideoPlayer.defaultProps = {

    [docs](https://facebook.github.io/react-native/docs/native-components-ios.html#events)

    > Notes:
    > Bubbling events are like DOM events so that a parent component can capture an event fired by its child. Generally these are UI-related, like "the user touched this box". Direct events are not bubbled and are intended for more abstract events like "this image failed to load".
    ```obj-c
    // VideoPlayer.h
    #import <UIKit/UIKit.h>
    #import <React/RCTView.h>

    @interface VideoPlayer : UIView

    @property (nonatomic, copy) RCTBubblingEventBlock onEnd;
    @property (nonatomic, copy) RCTDirectEventBlock onEnd;

    @end

    @@ -61,7 +64,7 @@ VideoPlayer.defaultProps = {

    RCT_EXPORT_MODULE()

    RCT_EXPORT_VIEW_PROPERTY(onEnd, RCTBubblingEventBlock)
    RCT_EXPORT_VIEW_PROPERTY(onEnd, RCTDirectEventBlock)

    - (UIView *)view
    {
    @@ -76,6 +79,13 @@ RCT_EXPORT_VIEW_PROPERTY(onEnd, RCTBubblingEventBlock)
    videoPlayer.onEnd(@{ @"some-data" : @1 });
    }

    - (NSArray *)customDirectEventTypes
    {
    return @[
    @"onEnd",
    ];
    }

    @end
    ```
  5. @chourobin chourobin revised this gist Apr 12, 2017. 2 changed files with 1 addition and 3 deletions.
    3 changes: 1 addition & 2 deletions events-ui.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,6 @@

    Keep in mind:
    - Events share namespace (so come up with an app-wide naming convention)
    - If you have several instances of a component, you need to pass an identifier (like a view's `reactTag`) to identify it in the handler. On the js end, `reactTag` equates to `this.props.rootTag`.

    #### React

    @@ -74,7 +73,7 @@ RCT_EXPORT_VIEW_PROPERTY(onEnd, RCTBubblingEventBlock)
    if (!videoPlayer.onEnd) {
    return;
    }
    videoPlayer.onEnd(@{ @"target" : videoPlayer.reactTag })
    videoPlayer.onEnd(@{ @"some-data" : @1 });
    }

    @end
    1 change: 0 additions & 1 deletion events.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,6 @@

    Keep in mind:
    - Events share namespace (so come up with an app-wide naming convention)
    - If you have several instances of a component, you need to pass an identifier (like a view's `reactTag`) to identify it in the handler. On the js end, `reactTag` equates to `this.props.rootTag`.

    #### React

  6. @chourobin chourobin revised this gist Apr 12, 2017. 2 changed files with 2 additions and 0 deletions.
    1 change: 1 addition & 0 deletions events-ui.md
    View file
    Original file line number Diff line number Diff line change
    @@ -83,6 +83,7 @@ RCT_EXPORT_VIEW_PROPERTY(onEnd, RCTBubblingEventBlock)
    #### Android
    [docs](https://facebook.github.io/react-native/docs/native-components-android.html#events)
    [example](http://stackoverflow.com/a/34740528/598993)
    Define a custom event mapping by overriding `getExportedCustomDirectEventTypeConstants` in the
    1 change: 1 addition & 0 deletions events.md
    View file
    Original file line number Diff line number Diff line change
    @@ -74,6 +74,7 @@ RCT_EXPORT_MODULE();
    #### Android
    [docs](https://facebook.github.io/react-native/docs/native-modules-android.html#sending-events-to-javascript)
    [example](http://stackoverflow.com/a/40232448/598993)
    ```java
  7. @chourobin chourobin revised this gist Apr 12, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion 0-bridging-react-native-cheatsheet.md
    View file
    Original file line number Diff line number Diff line change
    @@ -10,7 +10,7 @@
    ## native -> js

    - [Events](https://gist.github.com/chourobin/f83f3b3a6fd2053fad29fff69524f91c#file-events-md)
    - [Events (for UI components)]()
    - [Events (for UI components)](https://gist.github.com/chourobin/f83f3b3a6fd2053fad29fff69524f91c#file-events-ui-md)

    ## Additional Resources

  8. @chourobin chourobin revised this gist Apr 12, 2017. 3 changed files with 181 additions and 3 deletions.
    3 changes: 2 additions & 1 deletion 0-bridging-react-native-cheatsheet.md
    View file
    Original file line number Diff line number Diff line change
    @@ -5,11 +5,12 @@
    - [Simple Example](https://gist.github.com/chourobin/f83f3b3a6fd2053fad29fff69524f91c#file-simple-example-md)
    - [Callbacks](https://gist.github.com/chourobin/f83f3b3a6fd2053fad29fff69524f91c#file-callbacks-md)
    - [Promises](https://gist.github.com/chourobin/f83f3b3a6fd2053fad29fff69524f91c#file-promises-md)
    - [Properties (for UI)](https://gist.github.com/chourobin/f83f3b3a6fd2053fad29fff69524f91c#file-properties-md)
    - [Properties](https://gist.github.com/chourobin/f83f3b3a6fd2053fad29fff69524f91c#file-properties-md)

    ## native -> js

    - [Events](https://gist.github.com/chourobin/f83f3b3a6fd2053fad29fff69524f91c#file-events-md)
    - [Events (for UI components)]()

    ## Additional Resources

    117 changes: 117 additions & 0 deletions events-ui.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,117 @@
    ### Events (for UI components)

    Keep in mind:
    - Events share namespace (so come up with an app-wide naming convention)
    - If you have several instances of a component, you need to pass an identifier (like a view's `reactTag`) to identify it in the handler. On the js end, `reactTag` equates to `this.props.rootTag`.

    #### React

    ```js
    // VideoPlayer.js

    class VideoPlayer extends React.PureComponent {
    _onEnd = (event) => {
    if (!this.props.onEnd) {
    return;
    }
    this.props.onEnd(event.nativeEvent)
    }
    render() {
    // Re-assign onEnd to the private _onEnd and store it in `nativeProps`
    const nativeProps = Object.assign({}, this.props)
    Object.assign(nativeProps, {
    onEnd: this._onEnd,
    })
    return (
    <Video
    {...nativeProps}
    />
    )
    }
    }

    VideoPlayer.propTypes = {
    /**
    * Callback that is called when the current player item ends.
    */
    onEnd: PropTypes.func,
    }

    VideoPlayer.defaultProps = {
    onEnd: null,
    }
    ```

    #### iOS

    [docs](https://facebook.github.io/react-native/docs/native-components-ios.html#events)

    ```obj-c
    // VideoPlayer.h
    #import <UIKit/UIKit.h>
    #import <React/RCTView.h>

    @interface VideoPlayer : UIView

    @property (nonatomic, copy) RCTBubblingEventBlock onEnd;

    @end

    // VideoPlayerManager.h
    @implementation VideoPlayerManager

    RCT_EXPORT_MODULE()

    RCT_EXPORT_VIEW_PROPERTY(onEnd, RCTBubblingEventBlock)

    - (UIView *)view
    {
    ...
    }

    - (void)onEnd:(VideoPlayer *)videoPlayer
    {
    if (!videoPlayer.onEnd) {
    return;
    }
    videoPlayer.onEnd(@{ @"target" : videoPlayer.reactTag })
    }

    @end
    ```
    #### Android
    [docs](https://facebook.github.io/react-native/docs/native-components-android.html#events)
    [example](http://stackoverflow.com/a/34740528/598993)
    Define a custom event mapping by overriding `getExportedCustomDirectEventTypeConstants` in the
    manager class:
    ```java
    // VideoPlayerManager.java
    @Override
    public @Nullable Map getExportedCustomDirectEventTypeConstants() {
    return MapBuilder.of(
    "onEnd",
    MapBuilder.of("registrationName", "onEnd")
    );
    }
    ```

    Dispatch the event:

    ```java
    // VideoPlayerView.java
    private void dispatchOnEnd() {
    WritableMap event = Arguments.createMap();
    ...
    reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
    getId(),
    "onEnd",
    event
    );
    }
    ```

    [__Go to Top__](https://gist.github.com/chourobin/f83f3b3a6fd2053fad29fff69524f91c#file-0-bridging-react-native-cheatsheet-md)
    64 changes: 62 additions & 2 deletions events.md
    View file
    Original file line number Diff line number Diff line change
    @@ -10,7 +10,7 @@ Keep in mind:
    import { NativeEventEmitter, NativeModules } from 'react-native'
    const videoPlayer = NativeModules.VideoPlayer
    const videoPlayerEmitter = new NativeEventEmitter(VideoPlayer)
    const subscription = videoPlayerEmitter.addListener('video-progress', (progress) => console.log(progress))
    const subscription = videoPlayerEmitter.addListener('video-progress', (data) => console.log(data.progress))

    // Don't forget to unsubscribe, typically in `componentWillUnmount`
    subscription.remove()
    @@ -20,8 +20,68 @@ subscription.remove()

    [docs](https://facebook.github.io/react-native/docs/native-modules-ios.html#sending-events-to-javascript)

    > __Important Note:__
    > Don't send events if there are no listeners attached. You will get a warning about spending
    > unneccessary resources. Override `-startObserving` and `-stopObserving` like in the example below:
    ```obj-c
    //
    // VideoPlayer.h
    #import <React/RCTBridgeModule.h>
    #import <React/RCTEventEmitter.h>

    @interface CalendarManager : RCTEventEmitter <RCTBridgeModule>

    @end

    // VideoPlayer.m
    #import "VideoPlayer.h"

    @implementation VideoPlayer
    {
    BOOL _hasListeners;
    }

    RCT_EXPORT_MODULE();

    - (NSArray<NSString *> *)supportedEvents
    {
    return @[@"video-progress"];
    }

    // Will be called when this module's first listener is added.
    - (void)startObserving
    {
    _hasListeners = YES;
    }

    // Will be called when this module's last listener is removed, or on dealloc.
    - (void)stopObserving
    {
    _hasListeners = NO;
    }

    - (void)onVideoProgress
    {
    CGFloat progress = ...;
    if (_hasListeners) {
    [self sendEventWithName:@"video-progress" body:@{ @"progress": @(progress) }];
    }
    }

    @end
    ```
    #### Android
    [docs](https://facebook.github.io/react-native/docs/native-modules-android.html#sending-events-to-javascript)
    [example](http://stackoverflow.com/a/40232448/598993)
    ```java
    private void onVideoProgress() {
    WriteableMap params = Arguments.createMap();
    ...
    reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit("video-progress", params);
    }
    ```

    [__Go to Top__](https://gist.github.com/chourobin/f83f3b3a6fd2053fad29fff69524f91c#file-0-bridging-react-native-cheatsheet-md)
  9. @chourobin chourobin revised this gist Apr 11, 2017. 4 changed files with 12 additions and 4 deletions.
    4 changes: 3 additions & 1 deletion events.md
    View file
    Original file line number Diff line number Diff line change
    @@ -22,4 +22,6 @@ subscription.remove()

    ```obj-c
    //
    ```
    ```

    [__Go to Top__](https://gist.github.com/chourobin/f83f3b3a6fd2053fad29fff69524f91c#file-0-bridging-react-native-cheatsheet-md)
    4 changes: 3 additions & 1 deletion promises.md
    View file
    Original file line number Diff line number Diff line change
    @@ -47,4 +47,6 @@ RCT_REMAP_METHOD(loadVideo, loadVideoWithResolver:(RCTPromiseResolveBlock)resolv
    promise.reject(ERROR, e);
    }
    }
    ```
    ```

    [__Go to Top__](https://gist.github.com/chourobin/f83f3b3a6fd2053fad29fff69524f91c#file-0-bridging-react-native-cheatsheet-md)
    4 changes: 3 additions & 1 deletion properties.md
    View file
    Original file line number Diff line number Diff line change
    @@ -34,4 +34,6 @@ RCT_EXPORT_VIEW_PROPERTY(loop, BOOL);
    public void setLoop(Boolean loop) {
    ...
    }
    ```
    ```

    [__Go to Top__](https://gist.github.com/chourobin/f83f3b3a6fd2053fad29fff69524f91c#file-0-bridging-react-native-cheatsheet-md)
    4 changes: 3 additions & 1 deletion simple-example.md
    View file
    Original file line number Diff line number Diff line change
    @@ -104,4 +104,6 @@ protected List<ReactPackage> getPackages() {
    new MainReactPackage(),
    new VideoPackage()); // <-- Add this line with your package name.
    }
    ```
    ```

    [__Go to Top__](https://gist.github.com/chourobin/f83f3b3a6fd2053fad29fff69524f91c#file-0-bridging-react-native-cheatsheet-md)
  10. @chourobin chourobin revised this gist Apr 11, 2017. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion callbacks.md
    View file
    Original file line number Diff line number Diff line change
    @@ -49,4 +49,6 @@ public void seekTo(double time, Callback errorCallback, Callback successCallback
    errorCallback.invoke(e.getMessage());
    }
    }
    ```
    ```

    [__Go to Top__](https://gist.github.com/chourobin/f83f3b3a6fd2053fad29fff69524f91c#file-0-bridging-react-native-cheatsheet-md)
  11. @chourobin chourobin revised this gist Apr 11, 2017. No changes.
  12. @chourobin chourobin revised this gist Apr 11, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion events.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@

    Keep in mind:
    - Events share namespace (so come up with an app-wide naming convention)
    - If you have several instances of a component, you need to pass an identifier (like a view's `reactTag`) to identify it in the handler. On the js end, `reactTag` maps to `this.props.rootTag`.
    - If you have several instances of a component, you need to pass an identifier (like a view's `reactTag`) to identify it in the handler. On the js end, `reactTag` equates to `this.props.rootTag`.

    #### React

  13. @chourobin chourobin revised this gist Apr 11, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion events.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@

    Keep in mind:
    - Events share namespace (so come up with an app-wide naming convention)
    - If you have several instances of a component, you need to pass an identifier (like a view's `reactTag`) to identify it in the handler. On the js end, reactTag maps to `rootTag`.
    - If you have several instances of a component, you need to pass an identifier (like a view's `reactTag`) to identify it in the handler. On the js end, `reactTag` maps to `this.props.rootTag`.

    #### React

  14. @chourobin chourobin revised this gist Apr 11, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion 0-bridging-react-native-cheatsheet.md
    View file
    Original file line number Diff line number Diff line change
    @@ -9,7 +9,7 @@

    ## native -> js

    - [Events]()
    - [Events](https://gist.github.com/chourobin/f83f3b3a6fd2053fad29fff69524f91c#file-events-md)

    ## Additional Resources

  15. @chourobin chourobin revised this gist Apr 11, 2017. 6 changed files with 33 additions and 12 deletions.
    6 changes: 1 addition & 5 deletions 0-bridging-react-native-cheatsheet.md
    View file
    Original file line number Diff line number Diff line change
    @@ -9,11 +9,7 @@

    ## native -> js

    ### Events

    Keep in mind:
    - Events share namespace (so come up with a naming convention)
    - If you have several instances of a component, you need to pass an identifier (like a view's `reactTag`) to identify it in the handler.
    - [Events]()

    ## Additional Resources

    4 changes: 2 additions & 2 deletions callbacks.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@

    #### React

    ```javascript
    ```js
    // index.ios.js
    videoPlayer.seekTo(100, (error, someData) => {
    if (error) {
    @@ -28,7 +28,7 @@ videoPlayer.seekTo(

    [docs](http://facebook.github.io/react-native/releases/next/docs/native-modules-ios.html#callbacks)

    ```objc
    ```obj-c
    RCT_EXPORT_METHOD(seekTo:(double)time callback:(RCTResponseSenderBlock)callback)
    {
    NSArray *someData;
    25 changes: 25 additions & 0 deletions events.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    ### Events

    Keep in mind:
    - Events share namespace (so come up with an app-wide naming convention)
    - If you have several instances of a component, you need to pass an identifier (like a view's `reactTag`) to identify it in the handler. On the js end, reactTag maps to `rootTag`.

    #### React

    ```js
    import { NativeEventEmitter, NativeModules } from 'react-native'
    const videoPlayer = NativeModules.VideoPlayer
    const videoPlayerEmitter = new NativeEventEmitter(VideoPlayer)
    const subscription = videoPlayerEmitter.addListener('video-progress', (progress) => console.log(progress))

    // Don't forget to unsubscribe, typically in `componentWillUnmount`
    subscription.remove()
    ```

    #### iOS

    [docs](https://facebook.github.io/react-native/docs/native-modules-ios.html#sending-events-to-javascript)

    ```obj-c
    //
    ```
    4 changes: 2 additions & 2 deletions promises.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@

    #### React

    ```javascript
    ```js
    async function loadVideo() {
    try {
    var videoLoaded = await VideoPlayer.loadVideo();
    @@ -19,7 +19,7 @@ loadVideo()

    [docs](http://facebook.github.io/react-native/releases/next/docs/native-modules-ios.html#promises)

    ```objc
    ```obj-c
    RCT_REMAP_METHOD(loadVideo, loadVideoWithResolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
    {
    BOOL videoLoaded = ...; // could be any data type listed under https://facebook.github.io/react-native/docs/native-modules-ios.html#argument-types
    2 changes: 1 addition & 1 deletion properties.md
    View file
    Original file line number Diff line number Diff line change
    @@ -20,7 +20,7 @@ VideoPlayer.defaultProps = {

    [docs](https://facebook.github.io/react-native/docs/native-components-ios.html#properties)

    ```objc
    ```obj-c
    // BMEVideoManager.m
    RCT_EXPORT_VIEW_PROPERTY(loop, BOOL);
    ```
    4 changes: 2 additions & 2 deletions simple-example.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@

    ```js
    import { NativeModules } from 'react-native'
    var videoPlayer = NativeModules.VideoPlayer
    const videoPlayer = NativeModules.VideoPlayer
    videoPlayer.seekTo(100)
    ```

    @@ -16,7 +16,7 @@ Keep in mind:

    [docs](http://facebook.github.io/react-native/releases/next/docs/native-modules-ios.html#ios-calendar-module-example)

    ```objc
    ```obj-c
    // VideoPlayer.h
    #import <React/RCTBridgeModule.h>

  16. @chourobin chourobin revised this gist Apr 11, 2017. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions properties.md
    View file
    Original file line number Diff line number Diff line change
    @@ -32,5 +32,6 @@ RCT_EXPORT_VIEW_PROPERTY(loop, BOOL);
    ```java
    @ReactProp(name = "loop")
    public void setLoop(Boolean loop) {
    ...
    }
    ```
  17. @chourobin chourobin revised this gist Apr 11, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion 0-bridging-react-native-cheatsheet.md
    View file
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,7 @@
    - [Simple Example](https://gist.github.com/chourobin/f83f3b3a6fd2053fad29fff69524f91c#file-simple-example-md)
    - [Callbacks](https://gist.github.com/chourobin/f83f3b3a6fd2053fad29fff69524f91c#file-callbacks-md)
    - [Promises](https://gist.github.com/chourobin/f83f3b3a6fd2053fad29fff69524f91c#file-promises-md)
    - [Properties (for UI)]()
    - [Properties (for UI)](https://gist.github.com/chourobin/f83f3b3a6fd2053fad29fff69524f91c#file-properties-md)

    ## native -> js

  18. @chourobin chourobin revised this gist Apr 11, 2017. 1 changed file with 34 additions and 0 deletions.
    34 changes: 34 additions & 0 deletions properties.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,2 +1,36 @@
    ### Properties (for UI)

    #### React

    ```js
    render() {
    <VideoPlayer loop={false} />
    }

    VideoPlayer.propTypes = {
    loop: PropTypes.bool,
    }

    VideoPlayer.defaultProps = {
    loop: false,
    }
    ```

    #### iOS

    [docs](https://facebook.github.io/react-native/docs/native-components-ios.html#properties)

    ```objc
    // BMEVideoManager.m
    RCT_EXPORT_VIEW_PROPERTY(loop, BOOL);
    ```
    #### Android
    [docs](https://facebook.github.io/react-native/docs/native-components-android.html#3-expose-view-property-setters-using-reactprop-or-reactpropgroup-annotation)
    ```java
    @ReactProp(name = "loop")
    public void setLoop(Boolean loop) {
    }
    ```
  19. @chourobin chourobin revised this gist Apr 11, 2017. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions promises.md
    View file
    Original file line number Diff line number Diff line change
    @@ -22,7 +22,7 @@ loadVideo()
    ```objc
    RCT_REMAP_METHOD(loadVideo, loadVideoWithResolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
    {
    BOOL videoLoaded = ...; // could be any data type listed under [Argument Types](https://facebook.github.io/react-native/docs/native-modules-ios.html#argument-types)
    BOOL videoLoaded = ...; // could be any data type listed under https://facebook.github.io/react-native/docs/native-modules-ios.html#argument-types
    if (videoLoaded) {
    resolve(videoLoaded);
    } else {
    @@ -39,7 +39,7 @@ RCT_REMAP_METHOD(loadVideo, loadVideoWithResolver:(RCTPromiseResolveBlock)resolv
    ```java
    @ReactMethod loadVideo(Promise promise) {
    try {
    Boolean videoLoaded = ...; // could be any data type listed under [Argument Types](https://facebook.github.io/react-native/docs/native-modules-android.html#argument-types)
    Boolean videoLoaded = ...; // could be any data type listed under https://facebook.github.io/react-native/docs/native-modules-android.html#argument-types
    if (videoLoaded) {
    promise.resolve(videoLoaded);
    }
  20. @chourobin chourobin revised this gist Apr 11, 2017. 3 changed files with 18 additions and 3 deletions.
    5 changes: 3 additions & 2 deletions 0-bridging-react-native-cheatsheet.md
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@
    ## js -> native

    - [Simple Example](https://gist.github.com/chourobin/f83f3b3a6fd2053fad29fff69524f91c#file-simple-example-md)
    - [Callbacks (getting a response from js)](https://gist.github.com/chourobin/f83f3b3a6fd2053fad29fff69524f91c#file-callbacks-md)
    - [Callbacks](https://gist.github.com/chourobin/f83f3b3a6fd2053fad29fff69524f91c#file-callbacks-md)
    - [Promises](https://gist.github.com/chourobin/f83f3b3a6fd2053fad29fff69524f91c#file-promises-md)
    - [Properties (for UI)]()

    @@ -17,4 +17,5 @@ Keep in mind:

    ## Additional Resources

    - [Argument Types (iOS)](https://facebook.github.io/react-native/docs/native-modules-ios.html#argument-types)
    - [Argument Types (iOS)](https://facebook.github.io/react-native/docs/native-modules-ios.html#argument-types)
    - [Argument Types (Android)](https://facebook.github.io/react-native/docs/native-modules-android.html#argument-types)
    14 changes: 13 additions & 1 deletion promises.md
    View file
    Original file line number Diff line number Diff line change
    @@ -22,7 +22,7 @@ loadVideo()
    ```objc
    RCT_REMAP_METHOD(loadVideo, loadVideoWithResolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
    {
    BOOL videoLoaded = ... // could be any data type listed under [Argument Types](https://facebook.github.io/react-native/docs/native-modules-ios.html#argument-types)
    BOOL videoLoaded = ...; // could be any data type listed under [Argument Types](https://facebook.github.io/react-native/docs/native-modules-ios.html#argument-types)
    if (videoLoaded) {
    resolve(videoLoaded);
    } else {
    @@ -34,5 +34,17 @@ RCT_REMAP_METHOD(loadVideo, loadVideoWithResolver:(RCTPromiseResolveBlock)resolv
    #### Android
    [docs](https://facebook.github.io/react-native/docs/native-modules-android.html#promises)
    ```java
    @ReactMethod loadVideo(Promise promise) {
    try {
    Boolean videoLoaded = ...; // could be any data type listed under [Argument Types](https://facebook.github.io/react-native/docs/native-modules-android.html#argument-types)
    if (videoLoaded) {
    promise.resolve(videoLoaded);
    }
    } catch (Exception e) {
    promise.reject(ERROR, e);
    }
    }
    ```
    2 changes: 2 additions & 0 deletions properties.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2 @@
    ### Properties (for UI)

  21. @chourobin chourobin revised this gist Apr 11, 2017. 3 changed files with 9 additions and 7 deletions.
    6 changes: 4 additions & 2 deletions 0-bridging-react-native-cheatsheet.md
    View file
    Original file line number Diff line number Diff line change
    @@ -3,8 +3,8 @@
    ## js -> native

    - [Simple Example](https://gist.github.com/chourobin/f83f3b3a6fd2053fad29fff69524f91c#file-simple-example-md)
    - [Callbacks (getting a response from js)]()
    - [Promises]()
    - [Callbacks (getting a response from js)](https://gist.github.com/chourobin/f83f3b3a6fd2053fad29fff69524f91c#file-callbacks-md)
    - [Promises](https://gist.github.com/chourobin/f83f3b3a6fd2053fad29fff69524f91c#file-promises-md)
    - [Properties (for UI)]()

    ## native -> js
    @@ -16,3 +16,5 @@ Keep in mind:
    - If you have several instances of a component, you need to pass an identifier (like a view's `reactTag`) to identify it in the handler.

    ## Additional Resources

    - [Argument Types (iOS)](https://facebook.github.io/react-native/docs/native-modules-ios.html#argument-types)
    2 changes: 1 addition & 1 deletion promises.md
    View file
    Original file line number Diff line number Diff line change
    @@ -22,7 +22,7 @@ loadVideo()
    ```objc
    RCT_REMAP_METHOD(loadVideo, loadVideoWithResolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
    {
    BOOL videoLoaded = ...
    BOOL videoLoaded = ... // could be any data type listed under [Argument Types](https://facebook.github.io/react-native/docs/native-modules-ios.html#argument-types)
    if (videoLoaded) {
    resolve(videoLoaded);
    } else {
    8 changes: 4 additions & 4 deletions simple-example.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,5 @@
    ### Simple one-off example

    Keep in mind:
    - `RCT_EXPORT_METHOD` exposes the name of the method up to the __first__ colon in js land.
    - When many methods share the same name, use `RCT_REMAP_METHOD` to define a different name for js and map it to the native method. ie. `RCT_REMAP_METHOD(differentMethodName, methodName:(BOOL)arg1 arg2:(BOOL)arg2)`.

    #### React

    ```js
    @@ -14,6 +10,10 @@ videoPlayer.seekTo(100)

    #### iOS

    Keep in mind:
    - `RCT_EXPORT_METHOD` exposes the name of the method up to the __first__ colon in js land.
    - When many methods share the same name, use `RCT_REMAP_METHOD` to define a different name for js and map it to the native method. ie. `RCT_REMAP_METHOD(differentMethodName, methodName:(BOOL)arg1 arg2:(BOOL)arg2)`.

    [docs](http://facebook.github.io/react-native/releases/next/docs/native-modules-ios.html#ios-calendar-module-example)

    ```objc
  22. @chourobin chourobin renamed this gist Apr 11, 2017. 1 changed file with 0 additions and 0 deletions.
    0 1-index.md → 0-bridging-react-native-cheatsheet.md
    View file
    File renamed without changes.
  23. @chourobin chourobin revised this gist Apr 11, 2017. 4 changed files with 108 additions and 109 deletions.
    18 changes: 18 additions & 0 deletions 1-index.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    # Bridging Native & React for iOS & Android

    ## js -> native

    - [Simple Example](https://gist.github.com/chourobin/f83f3b3a6fd2053fad29fff69524f91c#file-simple-example-md)
    - [Callbacks (getting a response from js)]()
    - [Promises]()
    - [Properties (for UI)]()

    ## native -> js

    ### Events

    Keep in mind:
    - Events share namespace (so come up with a naming convention)
    - If you have several instances of a component, you need to pass an identifier (like a view's `reactTag`) to identify it in the handler.

    ## Additional Resources
    52 changes: 52 additions & 0 deletions callbacks.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,52 @@
    ### Callbacks (getting a response from js)

    #### React

    ```javascript
    // index.ios.js
    videoPlayer.seekTo(100, (error, someData) => {
    if (error) {
    console.error(error)
    } else {
    console.log(someData)
    }
    })

    // index.android.js
    videoPlayer.seekTo(
    100,
    (msg) => {
    console.error(msg)
    },
    (someData) => {
    console.log(someData)
    }
    )
    ```

    #### iOS

    [docs](http://facebook.github.io/react-native/releases/next/docs/native-modules-ios.html#callbacks)

    ```objc
    RCT_EXPORT_METHOD(seekTo:(double)time callback:(RCTResponseSenderBlock)callback)
    {
    NSArray *someData;
    callback(@[[NSNull null], someData]); // (error, someData) in js
    }
    ```
    #### Android
    [docs](http://facebook.github.io/react-native/releases/next/docs/native-modules-android.html#callbacks)
    ```java
    @ReactMethod
    public void seekTo(double time, Callback errorCallback, Callback successCallback) {
    try {
    successCallback.invoke(someData);
    } catch (Exception e) {
    errorCallback.invoke(e.getMessage());
    }
    }
    ```
    109 changes: 0 additions & 109 deletions index.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,109 +0,0 @@
    # Bridging Native & React for iOS & Android

    ## js -> native

    - [Simple Example]()

    ### Callbacks

    #### React

    ```javascript
    // index.ios.js
    videoPlayer.seekTo(100, (error, someData) => {
    if (error) {
    console.error(error)
    } else {
    console.log(someData)
    }
    })

    // index.android.js
    videoPlayer.seekTo(
    100,
    (msg) => {
    console.error(msg)
    },
    (someData) => {
    console.log(someData)
    }
    )
    ```

    #### iOS

    [docs](http://facebook.github.io/react-native/releases/next/docs/native-modules-ios.html#callbacks)

    ```objc
    RCT_EXPORT_METHOD(seekTo:(double)time callback:(RCTResponseSenderBlock)callback)
    {
    NSArray *someData;
    callback(@[[NSNull null], someData]); // (error, someData) in js
    }
    ```
    #### Android
    [docs](http://facebook.github.io/react-native/releases/next/docs/native-modules-android.html#callbacks)
    ```java
    @ReactMethod
    public void seekTo(double time, Callback errorCallback, Callback successCallback) {
    try {
    successCallback.invoke(someData);
    } catch (Exception e) {
    errorCallback.invoke(e.getMessage());
    }
    }
    ```

    ### Promises

    #### React

    ```javascript
    async function loadVideo() {
    try {
    var videoLoaded = await VideoPlayer.loadVideo();
    this.setState(videoLoaded: videoLoaded)
    } catch (e) {
    console.error(e)
    }
    }

    loadVideo()
    ```

    #### iOS

    [docs](http://facebook.github.io/react-native/releases/next/docs/native-modules-ios.html#promises)

    ```objc
    RCT_REMAP_METHOD(loadVideo, loadVideoResolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
    {
    BOOL videoLoaded = ...
    if (videoLoaded) {
    resolve(videoLoaded);
    } else {
    NSError *error = ...
    reject(@"error", @"error description", error);
    }
    }
    ```
    #### Android
    ```java
    ```

    ### Properties (UI)

    ## native -> js

    ### Events

    Keep in mind:
    - Events share namespace (so come up with a naming convention)
    - If you have several instances of a component, you need to pass an identifier (like a view's `reactTag`) to identify it in the handler.

    ## Additional Resources
    38 changes: 38 additions & 0 deletions promises.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,38 @@
    ### Promises

    #### React

    ```javascript
    async function loadVideo() {
    try {
    var videoLoaded = await VideoPlayer.loadVideo();
    this.setState(videoLoaded: videoLoaded)
    } catch (e) {
    console.error(e)
    }
    }

    loadVideo()
    ```

    #### iOS

    [docs](http://facebook.github.io/react-native/releases/next/docs/native-modules-ios.html#promises)

    ```objc
    RCT_REMAP_METHOD(loadVideo, loadVideoWithResolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
    {
    BOOL videoLoaded = ...
    if (videoLoaded) {
    resolve(videoLoaded);
    } else {
    NSError *error = ...
    reject(@"error", @"error description", error);
    }
    }
    ```
    #### Android
    ```java
    ```
  24. @chourobin chourobin renamed this gist Apr 11, 2017. 1 changed file with 0 additions and 0 deletions.
    0 examples/simple-example.md → simple-example.md
    View file
    File renamed without changes.
  25. @chourobin chourobin revised this gist Apr 11, 2017. 3 changed files with 108 additions and 108 deletions.
    107 changes: 107 additions & 0 deletions examples/simple-example.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,107 @@
    ### Simple one-off example

    Keep in mind:
    - `RCT_EXPORT_METHOD` exposes the name of the method up to the __first__ colon in js land.
    - When many methods share the same name, use `RCT_REMAP_METHOD` to define a different name for js and map it to the native method. ie. `RCT_REMAP_METHOD(differentMethodName, methodName:(BOOL)arg1 arg2:(BOOL)arg2)`.

    #### React

    ```js
    import { NativeModules } from 'react-native'
    var videoPlayer = NativeModules.VideoPlayer
    videoPlayer.seekTo(100)
    ```

    #### iOS

    [docs](http://facebook.github.io/react-native/releases/next/docs/native-modules-ios.html#ios-calendar-module-example)

    ```objc
    // VideoPlayer.h
    #import <React/RCTBridgeModule.h>

    @interface VideoPlayer : NSObject <RCTBridgeModule>
    @end

    @implementation VideoPlayer
    RCT_EXPORT_MODULE(); // or RCT_EXPLORT_MODULE(AwesomeVideoPlayer) -- custom name

    RCT_EXPORT_METHOD(seekTo:(double)time)
    {
    // seek to time
    }
    @end
    ```

    #### Android

    [docs](http://facebook.github.io/react-native/releases/next/docs/native-modules-android.html#the-toast-module)

    ```java
    // VideoPlayer.java
    package com.beme.react

    import com.facebook.react.bridge.NativeModule;
    import com.facebook.react.bridge.ReactApplicationContext;
    import com.facebook.react.bridge.ReactContext;
    import com.facebook.react.bridge.ReactContextBaseJavaModule;
    import com.facebook.react.bridge.ReactMethod;

    public class VideoModule extends ReactContextBaseJavaModule {
    public VideoModule(ReactApplicationContext reactContext) {
    super(reactContext)
    }

    @Override
    public String getName() {
    return "VideoPlayer";
    }

    @ReactMethod
    public void seekTo(double time) {
    // seek to time
    }
    }
    ```

    Register the module

    ```java
    // VideoPackage.java
    package com.beme.react

    import com.facebook.react.ReactPackage;
    import com.facebook.react.bridge.JavaScriptModule;
    import com.facebook.react.bridge.NativeModule;
    import com.facebook.react.bridge.ReactApplicationContext;
    import com.facebook.react.uimanager.ViewManager;

    public class VideoPackage implements ReactPackage {
    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
    return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
    }

    @Override
    public List<NativeModule> createNativeModules(
    ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();
    modules.add(new VideoModule(reactContext));
    return modules;
    }
    }
    ```

    ```java
    // MainApplication.java
    protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
    new MainReactPackage(),
    new VideoPackage()); // <-- Add this line with your package name.
    }
    ```
    108 changes: 1 addition & 107 deletions index.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,113 +2,7 @@

    ## js -> native

    ### Simple one-off example

    Keep in mind:
    - `RCT_EXPORT_METHOD` exposes the name of the method up to the __first__ colon in js land.
    - When many methods share the same name, use `RCT_REMAP_METHOD` to define a different name for js and map it to the native method. ie. `RCT_REMAP_METHOD(differentMethodName, methodName:(BOOL)arg1 arg2:(BOOL)arg2)`.

    #### React

    ```js
    import { NativeModules } from 'react-native'
    var videoPlayer = NativeModules.VideoPlayer
    videoPlayer.seekTo(100)
    ```

    #### iOS

    [docs](http://facebook.github.io/react-native/releases/next/docs/native-modules-ios.html#ios-calendar-module-example)

    ```objc
    // VideoPlayer.h
    #import <React/RCTBridgeModule.h>

    @interface VideoPlayer : NSObject <RCTBridgeModule>
    @end

    @implementation VideoPlayer
    RCT_EXPORT_MODULE(); // or RCT_EXPLORT_MODULE(AwesomeVideoPlayer) -- custom name

    RCT_EXPORT_METHOD(seekTo:(double)time)
    {
    // seek to time
    }
    @end
    ```

    #### Android

    [docs](http://facebook.github.io/react-native/releases/next/docs/native-modules-android.html#the-toast-module)

    ```java
    // VideoPlayer.java
    package com.beme.react

    import com.facebook.react.bridge.NativeModule;
    import com.facebook.react.bridge.ReactApplicationContext;
    import com.facebook.react.bridge.ReactContext;
    import com.facebook.react.bridge.ReactContextBaseJavaModule;
    import com.facebook.react.bridge.ReactMethod;

    public class VideoModule extends ReactContextBaseJavaModule {
    public VideoModule(ReactApplicationContext reactContext) {
    super(reactContext)
    }

    @Override
    public String getName() {
    return "VideoPlayer";
    }

    @ReactMethod
    public void seekTo(double time) {
    // seek to time
    }
    }
    ```

    Register the module

    ```java
    // VideoPackage.java
    package com.beme.react

    import com.facebook.react.ReactPackage;
    import com.facebook.react.bridge.JavaScriptModule;
    import com.facebook.react.bridge.NativeModule;
    import com.facebook.react.bridge.ReactApplicationContext;
    import com.facebook.react.uimanager.ViewManager;

    public class VideoPackage implements ReactPackage {
    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
    return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
    }

    @Override
    public List<NativeModule> createNativeModules(
    ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();
    modules.add(new VideoModule(reactContext));
    return modules;
    }
    }
    ```

    ```java
    // MainApplication.java
    protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
    new MainReactPackage(),
    new VideoPackage()); // <-- Add this line with your package name.
    }
    ```
    - [Simple Example]()

    ### Callbacks

    1 change: 0 additions & 1 deletion js-to-native.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +0,0 @@
    # hello
  26. @chourobin chourobin renamed this gist Apr 11, 2017. 1 changed file with 0 additions and 0 deletions.
    0 react-native-data-cheatsheet.md → index.md
    View file
    File renamed without changes.
  27. @chourobin chourobin revised this gist Apr 11, 2017. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions js-to-native.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    # hello
  28. @chourobin chourobin revised this gist Apr 4, 2017. 1 changed file with 75 additions and 23 deletions.
    98 changes: 75 additions & 23 deletions react-native-data-cheatsheet.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,6 +4,18 @@

    ### Simple one-off example

    Keep in mind:
    - `RCT_EXPORT_METHOD` exposes the name of the method up to the __first__ colon in js land.
    - When many methods share the same name, use `RCT_REMAP_METHOD` to define a different name for js and map it to the native method. ie. `RCT_REMAP_METHOD(differentMethodName, methodName:(BOOL)arg1 arg2:(BOOL)arg2)`.

    #### React

    ```js
    import { NativeModules } from 'react-native'
    var videoPlayer = NativeModules.VideoPlayer
    videoPlayer.seekTo(100)
    ```

    #### iOS

    [docs](http://facebook.github.io/react-native/releases/next/docs/native-modules-ios.html#ios-calendar-module-example)
    @@ -57,6 +69,7 @@ public class VideoModule extends ReactContextBaseJavaModule {
    ```

    Register the module

    ```java
    // VideoPackage.java
    package com.beme.react
    @@ -97,24 +110,48 @@ protected List<ReactPackage> getPackages() {
    }
    ```

    ### Callbacks

    #### React
    ```js
    import { NativeModules } from 'react-native'
    var videoPlayer = NativeModules.VideoPlayer
    videoPlayer.seekTo(100)
    ```

    ### Callbacks
    ```javascript
    // index.ios.js
    videoPlayer.seekTo(100, (error, someData) => {
    if (error) {
    console.error(error)
    } else {
    console.log(someData)
    }
    })

    // index.android.js
    videoPlayer.seekTo(
    100,
    (msg) => {
    console.error(msg)
    },
    (someData) => {
    console.log(someData)
    }
    )
    ```

    #### iOS

    [docs](http://facebook.github.io/react-native/releases/next/docs/native-modules-ios.html#callbacks)

    ```objc
    RCT_EXPORT_METHOD(seekTo:(double)time callback:(RCTResponseSenderBlock)callback)
    {
    NSArray *someData;
    callback(@[[NSNull null], someData]); // (error, someData) in js
    }
    ```
    #### Android
    [docs](http://facebook.github.io/react-native/releases/next/docs/native-modules-android.html#callbacks)
    ```java
    @ReactMethod
    public void seekTo(double time, Callback errorCallback, Callback successCallback) {
    @@ -126,36 +163,51 @@ public void seekTo(double time, Callback errorCallback, Callback successCallback
    }
    ```

    ### Promises

    #### React

    ```javascript
    // index.ios.js
    videoPlayer.seekTo(100, (error, someData) => {
    if (error) {
    console.error(error)
    } else {
    console.log(someData)
    async function loadVideo() {
    try {
    var videoLoaded = await VideoPlayer.loadVideo();
    this.setState(videoLoaded: videoLoaded)
    } catch (e) {
    console.error(e)
    }
    })
    }

    // index.android.js
    videoPlayer.seekTo(
    100,
    (msg) => {
    console.error(msg)
    },
    (someData) => {
    console.log(someData)
    loadVideo()
    ```

    #### iOS

    [docs](http://facebook.github.io/react-native/releases/next/docs/native-modules-ios.html#promises)

    ```objc
    RCT_REMAP_METHOD(loadVideo, loadVideoResolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
    {
    BOOL videoLoaded = ...
    if (videoLoaded) {
    resolve(videoLoaded);
    } else {
    NSError *error = ...
    reject(@"error", @"error description", error);
    }
    )
    }
    ```
    ### Promises
    #### Android
    ```java
    ```

    ### Properties (UI)

    ## native -> js

    ### Events

    Keep in mind:
    - Events share namespace (so come up with a naming convention)
    - If you have several instances of a component, you need to pass an identifier (like a view's `reactTag`) to identify it in the handler.
  29. @chourobin chourobin revised this gist Apr 4, 2017. 1 changed file with 10 additions and 6 deletions.
    16 changes: 10 additions & 6 deletions react-native-data-cheatsheet.md
    View file
    Original file line number Diff line number Diff line change
    @@ -133,16 +133,20 @@ videoPlayer.seekTo(100, (error, someData) => {
    if (error) {
    console.error(error)
    } else {
    this.setState({someData: someData})
    console.log(someData)
    }
    })

    // index.android.js
    videoPlayer.seekTo(100, (msg) => {
    console.error(msg)
    }, (someData) => {
    console.log(someData)
    })
    videoPlayer.seekTo(
    100,
    (msg) => {
    console.error(msg)
    },
    (someData) => {
    console.log(someData)
    }
    )
    ```

    ### Promises
  30. @chourobin chourobin revised this gist Apr 4, 2017. 1 changed file with 43 additions and 4 deletions.
    47 changes: 43 additions & 4 deletions react-native-data-cheatsheet.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@

    ### Simple one-off example

    ##### iOS
    #### iOS

    [docs](http://facebook.github.io/react-native/releases/next/docs/native-modules-ios.html#ios-calendar-module-example)

    @@ -25,7 +25,7 @@ RCT_EXPORT_METHOD(seekTo:(double)time)
    @end
    ```

    ##### Android
    #### Android

    [docs](http://facebook.github.io/react-native/releases/next/docs/native-modules-android.html#the-toast-module)

    @@ -97,7 +97,7 @@ protected List<ReactPackage> getPackages() {
    }
    ```

    ##### React
    #### React
    ```js
    import { NativeModules } from 'react-native'
    var videoPlayer = NativeModules.VideoPlayer
    @@ -106,6 +106,45 @@ videoPlayer.seekTo(100)

    ### Callbacks

    #### iOS
    ```objc
    RCT_EXPORT_METHOD(seekTo:(double)time callback:(RCTResponseSenderBlock)callback)
    {
    NSArray *someData;
    callback(@[[NSNull null], someData]); // (error, someData) in js
    }
    ```
    #### Android
    ```java
    @ReactMethod
    public void seekTo(double time, Callback errorCallback, Callback successCallback) {
    try {
    successCallback.invoke(someData);
    } catch (Exception e) {
    errorCallback.invoke(e.getMessage());
    }
    }
    ```

    #### React
    ```javascript
    // index.ios.js
    videoPlayer.seekTo(100, (error, someData) => {
    if (error) {
    console.error(error)
    } else {
    this.setState({someData: someData})
    }
    })

    // index.android.js
    videoPlayer.seekTo(100, (msg) => {
    console.error(msg)
    }, (someData) => {
    console.log(someData)
    })
    ```

    ### Promises

    ### Properties (UI)
    @@ -115,6 +154,6 @@ videoPlayer.seekTo(100)
    ### Events
    Keep in mind:
    - Events share namespace (so come up with a naming convention)
    - If you have several instances of a component, you need to pass an identifier (`reactTag`) to identify it in the handler.
    - If you have several instances of a component, you need to pass an identifier (like a view's `reactTag`) to identify it in the handler.

    ## Additional Resources