react native touchable highlight and touchable native feedback for making my menu items

Question

I am trying to implement a basic drawer, but I am confused by the documentation.

There is a TouchableHighlight, and there is a TouchableNativeFeedback.

TouchableNativeFeedback is Android only. So, how can I best handle my MenuItem component so it takes care of both Android and IOS?

Here's what I've got so far, and I'm not sure how to handle the different platform specific touchable stuff here:

import React, { Component, PropTypes } from 'react';
import { TouchableHighlight, TouchableNativeFeedback, Platform, View, Text } from 'react-native';

export class MenuItem extends Component {

  handleAndroid() {

  }

  handleIOS() {

  }

  renderMenuItem() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>
          {this.props.text}
        </Text>
      </View>
    );
  }
  render() {
    return (

    );
  }
}

On Android, do I have to use TouchableNativeFeedback only?

Answer 1

Like you said, TouchableNativeFeedback is Android only therefore it won't work for iOS. If you want a solution that works for both, use TouchableHighlight and style it accordingly. For example, its underlayColor prop allows you to set "the color of the underlay that will show through when the touch is active."

EDIT:

If you want to use TouchableNativeFeedback for Android and TouchableHighlight for iOS, you should do something like the following:

import { Platform } from 'react-native'
...

render() {
    if (Platform.OS === 'android') {
       return (
          <TouchableNativeFeedback> 
               ... 
          </TouchableNativeFeedback>    
       )
    } else {
       return (
          <TouchableHighlight> 
               ... 
          </TouchableHighlight>    
       )
    }
}

EDIT 2:

Alternatively, you can create a custom component for each platform and use file extensions. For example:

MyButton.ios.js
MyButton.android.js

Put these two in the same folder and then use MyButton as a regular component:

import MyButton from '../path/to/component/MyButton'
...

render() {
   <MyButton/>
}

This is quite neat when you want to use this component in multiple places because you don't fill your code with if-else blocks.

Here you can read more about Platform Specific Code.