10864

Platform specific components in React Native

Question:

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:

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

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

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

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.

Answer1:

I would create a sepeare component and this component would return segment according to platform but you can create an inner function as an alternative. call this function in render to handle decide which platform app runs and return segment according to platform.

_segmentPicker() { if (Platform.OS == 'android') { return ( <SegmentedControlIOS tintColor={styleBackground} style={{ flex: 2 }} values={['Value1', 'Value2']} selectedIndex={this.state.drink} onChange={(event) => { this.setState({ drink: event.nativeEvent.selectedSegmentIndex }); }} /> ); } else if (Platform.OS == 'ios') { return ( <SegmentedControlIOS tintColor={styleBackground} style={{ flex: 2 }} values={['Value1', 'Value2']} selectedIndex={this.state.drink} onChange={(event) => { this.setState({ drink: event.nativeEvent.selectedSegmentIndex }); }} /> ); } } render(){ return ( <View> {this._segmentPicker()} . . </View> ); }

Recommend

  • cannot use raw_input if monkeyrunner is included in python script
  • firebase orderByChild returns weird order for only one child
  • Three.js - how can I update an arrowHelper?
  • adding a legend to a scatterplot with fitted line and prediction interval
  • Objective C Textfield Default Value “•••••••” to \"1•••••••”,“12•••••”,“123••••” when user cli
  • Monopoly pick random card and pop array
  • TinyXML - any way to skip problematic DOCTYPE tag?
  • Can someone explain how Postgresql roles, Postgresql users and Linux users relate to each other?
  • Problem with sockets and OutOfMemory error
  • REST Web Service - Dynamic Query Parameters
  • How to specify a java.util.HashMap (key ==> value) in wsdl
  • parse URL with regex in python
  • Bubble chart , scatter chart ,candlestick chart using core plot
  • mysql what is the right syntax for this conditional update statement
  • draw9patch just hangs on Mac 10.7.5
  • Android SAXParser, parse into array and get child nodes
  • How to get all values of text inputs with jQuery?
  • Difference between File>Close and :close in Vim
  • How can i create a big file in google drive with google app script?
  • How to add header and Footer to each activity in android
  • jQuery & CSS - Cut text by height, no truncate
  • inter-group (between groups) combination of column A grouped by column B
  • layout-lt-mdhas been deprecated. Please use a `layout-gt-` variant
  • Is storing an OAuth token in cookies bad practise?
  • Multiple Lines of text shows after a segment of UISegmentedControl is clicked, but not initially - U
  • How to show complete column as editable in extjs grid(cell editing)?
  • Row_number() function for Informix
  • How can I encode a filename according to RFC 2231?
  • If string is … then replace it with an image?
  • Underlying type for Tuple in Swift
  • ONLY Visible Div form elements will get submitted
  • What is RSL (Runtime shared library ) used for in flash?
  • New dataframe with difference between first and last values of repeated measurements?
  • Multiple flexboxes with margin-right, except the last one in the row? Without JS?
  • Image map in Flex
  • Join two tables and save into third-sql
  • Convert array of 8 bytes to signed long in C++
  • Understanding cpu registers
  • Recursive/Hierarchical Query Using Postgres
  • Running Map reduces the dimensions of the matrices