Platform specific components in React Native
<p>I'm pretty sure this is straightforward, but I can't quite see how to bring it together.  At the moment my app works perfectly in iOS, but I've used a few controls which are not Android compatible:</p>

<pre><code>&lt;View style={containerStyle}&gt;
  &lt;Text style={labelStyle}&gt;Drink:&lt;/Text&gt;
  &lt;SegmentedControlIOS
    tintColor={styleBackground}
    style={{ flex: 2 }}
    values={['Value1', 'Value2']}
    selectedIndex={this.state.drink}
    onChange={(event) =&gt; {
      this.setState({ drink: event.nativeEvent.selectedSegmentIndex });
    }}
  /&gt;
  &lt;View style={{ flex: 1 }} /&gt;
&lt;/View&gt;
</code></pre>

<p>I want to use the <a href="https://www.npmjs.com/package/react-native-segmented-android" rel="nofollow noreferrer">React-Native-Segmented-Android</a> library to fix this. I feel like I should be able to do something like:</p>

<pre><code>&lt;View style={containerStyle}&gt;
  &lt;Text style={labelStyle}&gt;Drink:&lt;/Text&gt;
  const Component = Platform.select({
      ios: () =&gt; require('SegmentedControlIOS'),
      android: () =&gt; require('react-native-segmented-android'),
  })(      
    tintColor={styleBackground}
    style={{ flex: 2 }}
    values={['Value1', 'Value2']}
    selectedIndex={this.state.drink}
    onChange={(event) =&gt; {
      this.setState({ drink: event.nativeEvent.selectedSegmentIndex });
    }}
  /&gt;);
  &lt;View style={{ flex: 1 }} /&gt;
&lt;/View&gt;
</code></pre>

<p>but that (perhaps unsurprisingly) doesn't work.  Can anyone point me to the correct method?  I know I can just use two different files for iOS/Android but I'd rather keep it together in one if possible.</p>