New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Send fucntions from js to obj c land #28

Closed
bsudekum opened this Issue May 10, 2015 · 14 comments

Comments

Projects
None yet
2 participants
@bsudekum
Collaborator

bsudekum commented May 10, 2015

So events can happen without having to redraw the view:

@bsudekum bsudekum changed the title from Send events from js to obj c land to Send fucntions from js to obj c land May 22, 2015

@bsudekum

This comment has been minimized.

Show comment
Hide comment
@bsudekum

bsudekum May 22, 2015

Collaborator

hey @brentvatne, I'm working on sending functions from JS to objective c and I was wondering if you could answer some questions for me.

I attempted to add a resetNorth() function in this commit: e16211f. But for some reason, when resetNorth is called, _map is null so nothings happens. One issue I'm seeing is that I'm mixing the RCTBridgeModule with the RCTViewManager which is something I have not seen done anywhere.

Also note, I could not call NativeModules.MapboxGL.resetNorth(); on any other 'NativeModule' object.

I've also tried to subclass RCTBridgeModule in RCTMapboxGLManager but the problem here is there is no map object to resetNorth on.

Have any thoughts on how to best implement this?

Collaborator

bsudekum commented May 22, 2015

hey @brentvatne, I'm working on sending functions from JS to objective c and I was wondering if you could answer some questions for me.

I attempted to add a resetNorth() function in this commit: e16211f. But for some reason, when resetNorth is called, _map is null so nothings happens. One issue I'm seeing is that I'm mixing the RCTBridgeModule with the RCTViewManager which is something I have not seen done anywhere.

Also note, I could not call NativeModules.MapboxGL.resetNorth(); on any other 'NativeModule' object.

I've also tried to subclass RCTBridgeModule in RCTMapboxGLManager but the problem here is there is no map object to resetNorth on.

Have any thoughts on how to best implement this?

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne May 22, 2015

Collaborator

I think what we want to do here is something similar to this:
react-native-community/react-native-video@8e2deae

Then we can call functions on it directly, which just use setNativeProps:
react-native-community/react-native-video@5e4d55a#diff-7ed13e9e797b0601fefe21a55e08f460R82

Collaborator

brentvatne commented May 22, 2015

I think what we want to do here is something similar to this:
react-native-community/react-native-video@8e2deae

Then we can call functions on it directly, which just use setNativeProps:
react-native-community/react-native-video@5e4d55a#diff-7ed13e9e797b0601fefe21a55e08f460R82

@bsudekum

This comment has been minimized.

Show comment
Hide comment
@bsudekum

bsudekum May 22, 2015

Collaborator

@brentvatne I'm not sure this solves the problem. Your example is modifying props but I'd like actually call a function in obj c.

Let's take the setCenterCoordinate:animated function for example. With your method, we'd be resetting the centerCoordinate each time the center needed to change causing a not so pleasing redraw.

Instead, if you use the setCenterCoordinate:animated directly, the map will animate the move to the new coordinates. I'm not sure this can happen by solely modifying props.

Collaborator

bsudekum commented May 22, 2015

@brentvatne I'm not sure this solves the problem. Your example is modifying props but I'd like actually call a function in obj c.

Let's take the setCenterCoordinate:animated function for example. With your method, we'd be resetting the centerCoordinate each time the center needed to change causing a not so pleasing redraw.

Instead, if you use the setCenterCoordinate:animated directly, the map will animate the move to the new coordinates. I'm not sure this can happen by solely modifying props.

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne May 22, 2015

Collaborator

@bsudekum - another approach that could work is something like what is done in Libraries/Animation/RCTAnimationExperimentalManager.m - in particular, startAnimation - notice how you pass in a reactTag and then grab the view that it represents from the viewRegistry- you could do this same thing for direct function calls 😄

Collaborator

brentvatne commented May 22, 2015

@bsudekum - another approach that could work is something like what is done in Libraries/Animation/RCTAnimationExperimentalManager.m - in particular, startAnimation - notice how you pass in a reactTag and then grab the view that it represents from the viewRegistry- you could do this same thing for direct function calls 😄

@bsudekum

This comment has been minimized.

Show comment
Hide comment
@bsudekum

bsudekum May 22, 2015

Collaborator

@brentvatne nice I got it working with viewRegistry! It seems a little hacky, do you think this is best way to do this?

One issue I'm seeing is that AnimationUtils.allocateTag() is returning the main RCTRootContentView tag instead of the RCTMapboxGL view tag. Because of this, I'm thinking that I will loop over viewRegistry, check if it's of type RCTMapboxGL and then call resetNorth on it. If someone has multiple maps on the same page, all maps will resetNorth. Is there a way for me to send the correct RCTMapboxGL tag to obj c?

Collaborator

bsudekum commented May 22, 2015

@brentvatne nice I got it working with viewRegistry! It seems a little hacky, do you think this is best way to do this?

One issue I'm seeing is that AnimationUtils.allocateTag() is returning the main RCTRootContentView tag instead of the RCTMapboxGL view tag. Because of this, I'm thinking that I will loop over viewRegistry, check if it's of type RCTMapboxGL and then call resetNorth on it. If someone has multiple maps on the same page, all maps will resetNorth. Is there a way for me to send the correct RCTMapboxGL tag to obj c?

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne May 22, 2015

Collaborator

I don't think you need to use AnimationUtils.allocateTag() at all, just pass in the nodeHandle - like this and grab the view from that 😄

Collaborator

brentvatne commented May 22, 2015

I don't think you need to use AnimationUtils.allocateTag() at all, just pass in the nodeHandle - like this and grab the view from that 😄

@bsudekum

This comment has been minimized.

Show comment
Hide comment
@bsudekum

bsudekum May 22, 2015

Collaborator

👍 rad

Collaborator

bsudekum commented May 22, 2015

👍 rad

@bsudekum

This comment has been minimized.

Show comment
Hide comment
@bsudekum

bsudekum May 23, 2015

Collaborator

@brentvatne made some progress on this! How do you feel about exposing the functions to the user via mixins? I've got this working here: https://github.com/bsudekum/react-native-mapbox-gl/blob/add-events/RCTMapboxGL.ios.js#L7-L14

Notice how I'm requiring that you pass in a ref. This makes sure that action is happening on the correct map view. Here is an example of how it would be consumed:

var map = React.createClass({
   mixins: [MapboxGLMap.Mixin],
   render: function() {
     var mapRef = 'mapRef';
     return (
       <View style={styles.container}>
         <Text onPress={() => this.resetNorth(mapRef)}>
          Reset North
        </Text>
        <Text onPress={() => this.setCenterCoordinateAnimated(mapRef, 0, 0, 0)}>
         Zoom to 0,0
       </Text>
        <MapboxGLMap
          style={styles.map}
          direction={40}
          ref={mapRef}
          accessToken={'foo'}
          styleURL={'asset://styles/mapbox-streets-v7.json'}
          centerCoordinate={20, 20}
          zoomLevel={10} />
       </View>
     );
   }
 });

What do you think? Is this the best way to implement this?

Collaborator

bsudekum commented May 23, 2015

@brentvatne made some progress on this! How do you feel about exposing the functions to the user via mixins? I've got this working here: https://github.com/bsudekum/react-native-mapbox-gl/blob/add-events/RCTMapboxGL.ios.js#L7-L14

Notice how I'm requiring that you pass in a ref. This makes sure that action is happening on the correct map view. Here is an example of how it would be consumed:

var map = React.createClass({
   mixins: [MapboxGLMap.Mixin],
   render: function() {
     var mapRef = 'mapRef';
     return (
       <View style={styles.container}>
         <Text onPress={() => this.resetNorth(mapRef)}>
          Reset North
        </Text>
        <Text onPress={() => this.setCenterCoordinateAnimated(mapRef, 0, 0, 0)}>
         Zoom to 0,0
       </Text>
        <MapboxGLMap
          style={styles.map}
          direction={40}
          ref={mapRef}
          accessToken={'foo'}
          styleURL={'asset://styles/mapbox-streets-v7.json'}
          centerCoordinate={20, 20}
          zoomLevel={10} />
       </View>
     );
   }
 });

What do you think? Is this the best way to implement this?

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne May 23, 2015

Collaborator

It might be simpler to call it directly on the ref, eg:

 <Text onPress={() => this.refs.map.setCenterCoordinateAnimated(0, 0, 0)}>
    Zoom to 0,0
 </Text>

Just define those functions on the map component and have them call the native module 😄

Collaborator

brentvatne commented May 23, 2015

It might be simpler to call it directly on the ref, eg:

 <Text onPress={() => this.refs.map.setCenterCoordinateAnimated(0, 0, 0)}>
    Zoom to 0,0
 </Text>

Just define those functions on the map component and have them call the native module 😄

@bsudekum

This comment has been minimized.

Show comment
Hide comment
@bsudekum

bsudekum May 24, 2015

Collaborator

@brentvatne interesting. The only problem I'm seeing with this is that I still need to pass in a ref to the native function https://github.com/bsudekum/react-native-mapbox-gl/blob/add-events/RCTMapboxGL.ios.js#L9 (first argument here). There a way to get the ref which called setCenterCoordinateAnimated in RCTMapboxGL.ios.js?

Collaborator

bsudekum commented May 24, 2015

@brentvatne interesting. The only problem I'm seeing with this is that I still need to pass in a ref to the native function https://github.com/bsudekum/react-native-mapbox-gl/blob/add-events/RCTMapboxGL.ios.js#L9 (first argument here). There a way to get the ref which called setCenterCoordinateAnimated in RCTMapboxGL.ios.js?

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne May 24, 2015

Collaborator

@bsudekum - I believe you could just pass in this in that case

Collaborator

brentvatne commented May 24, 2015

@bsudekum - I believe you could just pass in this in that case

@bsudekum

This comment has been minimized.

Show comment
Hide comment
@bsudekum

bsudekum May 24, 2015

Collaborator

done!

Collaborator

bsudekum commented May 24, 2015

done!

@bsudekum bsudekum closed this May 24, 2015

@bsudekum

This comment has been minimized.

Show comment
Hide comment
@bsudekum

bsudekum May 24, 2015

Collaborator

Thanks for your help @brentvatne

Collaborator

bsudekum commented May 24, 2015

Thanks for your help @brentvatne

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne May 24, 2015

Collaborator

Awesome! no problem @bsudekum - I'm looking forward to getting the chance to use this 😄

Collaborator

brentvatne commented May 24, 2015

Awesome! no problem @bsudekum - I'm looking forward to getting the chance to use this 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment