3

I can't figure out what this does or even is. Would someone please be so kind to point me what to research?

circle: (null : ?{ setNativeProps(props: Object): void }),

It's part of a React Native example and is part of a React Native class definition. The outer parts are (abbreviated):

var NavigatorIOSExample = React.createClass({
...
circle: (null : ?{ setNativeProps(props: Object): void }),
...
});

I assume it's some tricky use of the ternary operator. An anonymous function. But?

Source: https://facebook.github.io/react-native/docs/panresponder.html

Nat Mote
  • 3,878
  • 13
  • 28
Felix
  • 175
  • 1
  • 6
  • Have a look at: http://stackoverflow.com/a/10270383/3000589 – martijnn2008 May 14 '15 at 09:50
  • 5
    @Quentin I don't think that's what OP is asking. `null : ? ...` isn't valid native JavaScript syntax, and certainly isn't covered in [that post](http://stackoverflow.com/questions/9549780/what-does-this-symbol-mean-in-javascript). – James Donnelly May 14 '15 at 09:51
  • Indeed. Looks like a ternary operator (which is what I answered first) but it's not. Weird... never seen this. – Blizz May 14 '15 at 09:51
  • 2
    Not JavaScript. Might be some React-magic... – hgoebl May 14 '15 at 09:52
  • I cannot find it [here](https://facebook.github.io/react-native/docs/navigatorios.html) and [here](https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/NavigatorIOSExample.js) so please give us a real source you found this row; I guess this is your invention otherwise – smnbbrv May 14 '15 at 09:55
  • @simon: if you googled the line given, it's from the React documentation: https://facebook.github.io/react-native/docs/panresponder.html – Qantas 94 Heavy May 14 '15 at 10:00
  • Circle is assigned an anonymous function. It's prop is then assigned setNativeProps or void? – Felix May 14 '15 at 10:06
  • I think that the `?{}` syntax is definitely some kind of "React voodoo," *not* JavaScript. *Not* a ternary operator. – Mike Robinson May 14 '15 at 11:55
  • Someone posted an answer saying it were related to Flow's type checking, but a few minutes later the answer got deleted. Seems sensible, but I wasn't able to figure it out with the Flow docs myself. – Felix May 14 '15 at 11:59
  • I posted the answer before, but I then tested the code out in Flow itself and it threw a syntax error. It appears that was for an old version of Flow: https://github.com/facebook/react-native/commit/6e6bd28f3ac1ab214dc6fb7d88d236f57197ad44 – Qantas 94 Heavy May 14 '15 at 12:45

1 Answers1

8

The declaration is syntax from Flow. It says that 'circle' is an object with a property that is a function named 'setNativeProps':

{ setNativeProps(props: Object): void }

It also says that circle is nullable (indicated by the preceding '?') and that the default value will be null until an object of the specified type has been assigned to it.

If you look further down the sample you can see how calling code checks that circle has been assigned before calling setNativeProps:

this.circle && this.circle.setNativeProps({
    backgroundColor: CIRCLE_HIGHLIGHT_COLOR
});
Jack
  • 635
  • 5
  • 14