Last active
December 16, 2020 17:09
-
-
Save finom/d48799531d4c8e72324e563dcfe2184e to your computer and use it in GitHub Desktop.
[finom/react-native-touchable] A universal Touchable (React Native) which behaves like TouchableOpacity on iOS but like TouchableNativeFeedback on Android
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { TouchableOpacity, TouchableNativeFeedback, Platform } from 'react-native'; | |
import { createElement } from 'react'; | |
// use TouchableNativeFeedback for android and TouchableOpacity for ios | |
// use TouchableOpacity with activeOpacity=1 for both platforms if disabled=true | |
const Touchable = ({ | |
disabled, | |
onPress, | |
...props | |
}) => { | |
const handleOnPress = (...args) => { | |
if (!disabled) { | |
return onPress?.(...args); | |
} | |
return undefined; | |
}; | |
return Platform.select({ | |
android: createElement(disabled ? TouchableOpacity : TouchableNativeFeedback, { | |
onPress: handleOnPress, | |
// activeOpacity: disabled ? 1 : undefined, | |
...props, | |
}), | |
ios: createElement(TouchableOpacity, { | |
onPress: handleOnPress, | |
activeOpacity: disabled ? 1 : 0.2, | |
...props, | |
}), | |
}); | |
}; | |
export default Touchable; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment