diff options
Diffstat (limited to 'app_expo/components/button/button.tsx')
-rw-r--r-- | app_expo/components/button/button.tsx | 36 |
1 files changed, 36 insertions, 0 deletions
diff --git a/app_expo/components/button/button.tsx b/app_expo/components/button/button.tsx new file mode 100644 index 0000000..03b8f85 --- /dev/null +++ b/app_expo/components/button/button.tsx @@ -0,0 +1,36 @@ +import * as React from 'react' +import { TouchableOpacity } from 'react-native' +import { Text } from '../text/text' +import { viewPresets, textPresets } from './button.presets' +import { ButtonProps } from './button.props' + +/** + * For your text displaying needs. + * + * This component is a HOC over the built-in React Native one. + */ +export function Button(props: ButtonProps) { + // grab the props + const { + preset = 'primary', + tx, + text, + style: styleOverride, + textStyle: textStyleOverride, + children, + ...rest + } = props + + const viewStyle = viewPresets[preset] || viewPresets.primary + const viewStyles = [viewStyle, styleOverride] + const textStyle = textPresets[preset] || textPresets.primary + const textStyles = [textStyle, textStyleOverride] + + const content = children || <Text tx={tx} text={text} style={textStyles} /> + + return ( + <TouchableOpacity style={viewStyles} {...rest}> + {content} + </TouchableOpacity> + ) +} |