Skip to content

Instantly share code, notes, and snippets.

@morenoh149
Last active July 14, 2018 20:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save morenoh149/9fcb23cf194152941837f897c9550c1f to your computer and use it in GitHub Desktop.
Save morenoh149/9fcb23cf194152941837f897c9550c1f to your computer and use it in GitHub Desktop.
React Native Platform specific button
import React from "react";
import { Platform, TouchableNativeFeedback, TouchableOpacity, View } from "react-native";
const Colors = {
androidRippleDark: "#ccc"
};
const styles = {
style: {}
};
/*
* NButton is a reusable button that is styled based off of the platform the
* application is running on.
* On Android it will show ripples when a user touches the button.
*/
export const NButton = props => {
if (Platform.OS === "android" && !props.forceIOSButton) {
const androidRippleStyle = props.androidRippleColor
? TouchableNativeFeedback.Ripple(
props.androidRippleColor,
props.androidRippleBorderless
)
: TouchableNativeFeedback.Ripple(
Colors.androidRippleDark,
props.androidRippleBorderless
);
return (
<TouchableNativeFeedback
onPress={props.onPress}
background={androidRippleStyle}
useForeground={props.androidRippleUseForeground}
>
<View style={[styles.style, props.buttonStyle]}>{props.children}</View>
</TouchableNativeFeedback>
);
} else {
return (
<TouchableOpacity
onPress={props.onPress}
style={[styles.style, props.buttonStyle]}
>
{props.children}
</TouchableOpacity>
);
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment