React-native-mapbox-gl: Adding *Translate properties not working

[esamelson]

I'm wondering about the correct syntax for adding *Translate properties to style layers (e.g. circleTranslate). As far as I can tell, the documentation on this repo says two different things: they say type is array (which matches the StyleJSON spec), but then also that "Values are { x: number, y: number }". I've tried both and they both produce an NSObject doesNotRecognizeSelector error. Please advise on the correct way to do this. Thanks!

Expected behavior:

Mapbox.StyleSheet.create({
  circle: {
    circleTranslate: [24, -24] // or { x: 24, y: -24 }
  }
})

should produce the correct offset

Actual behavior:
NSObject doesNotRecognizeSelector crash at line 1467 of RCTMGLStyle.m (layer.circleTranslation = styleValue.mglStyleValue;)

[nitaliano]

The docs are autogenerated from the style spec, so there's still some cleanup to do. The correct way is { x: number, y:number } and it's most likely a type mismatch where I'm passing in a NSArray when it's expecting a CGVector

[esamelson]

Okay, thanks. I've tried that and it's definitely not working.

Since work needs to be done on it anyway, is there any chance it could be changed to accept an array instead, matching the StyleJSON spec? In my project, I'm managing my entire styleJSON as a JS object (which works out of the box with mapbox-gl-js and react-mapbox-gl), and the fewer things I have to customize for my RN component, the better. I think it would be clearer for developers who are used to working with raw StyleJSON for as many properties as possible to match.

Thanks for considering!

[nitaliano]

I personally prefer using translate { x: number, y: number } as that's what I'm used to doing with translate values in css.

I have however noticed this come up a few times requesting it be changed to an array, which makes me think that I should switch it to an array, especially if it creates the ability to share styles across web and mobile I'm all for that.

[esamelson]

I'm of the opinion that since this is now an officially supported Mapbox JS library ( 🎉🎉🎉 ) it would make sense to mirror other Mapbox JS APIs and specifications, e.g. the StyleJSON spec, as much as possible. As a developer working with mostly cross-platform code (the main reason I use this library), the more similar the APIs are, the easier my life is too! :)

[tsemerad]

I would definitely prefer this to be an array as well. I maintain a few projects that store the full style JSON in the redux store, and intend to share logic between my web and React Native builds of the app, so having fewer API differences would be better. Thanks for considering this!

[nitaliano]

It's going to change to an array and from now on I'll work at making sure the styles are sharable across web and mobile.

I'm even thinking of taking this a step further and creating an example that has both GL JS and RN in it that are both sharing the same constants/reducers/actions to show just how possible it is to share between web and mobile.

Thanks for the input!

[esamelson]

Sounds awesome 🎉 thanks for all your work!

[nitaliano]

Added support for array based translate properties in this PR https://github.com/mapbox/react-native-mapbox-gl/pull/846 and fixed crashes on native side

[nitaliano]

Closing this out since it's merged into master.