Skip to content

Instantly share code, notes, and snippets.

@petekp petekp/Button.tsx
Created Jul 19, 2019

Embed
What would you like to do?
Substrate Themed Button Example
import * as React from 'react'
import {
TouchableOpacity,
StyleProp,
TouchableOpacityProps,
TextStyle,
Text,
} from 'react-native'
import { ThemedComponentLocked } from '../../typings'
import { withTheme } from '../../ThemeContext/withTheme'
export interface ButtonProps {
children: string | React.ReactNode
textStyle?: StyleProp<TextStyle>
}
type Props = ButtonProps & TouchableOpacityProps
const defaultButtonTextStyle: StyleProp<TextStyle> = {
textAlign: 'center',
}
export const Button: React.FC<Props> = React.memo(
({
children,
style: inlineButtonStyle,
textStyle: inlineTextStyle,
...props
}) => (
<TouchableOpacity {...props} style={inlineButtonStyle}>
{typeof children === 'string' ? (
<Text style={[inlineTextStyle, defaultButtonTextStyle]}>
{children}
</Text>
) : (
children
)}
</TouchableOpacity>
)
)
const themedButton = (theme = 'base') => ({
setTheme,
getThemeStyle,
...props
}: ThemedComponentLocked<Props>) => {
const [viewStyle, textStyle] = getThemeStyle('button', theme)
return <Button style={viewStyle} textStyle={textStyle} {...props} />
}
export const Base = withTheme(themedButton('base'))
export const Primary = withTheme(themedButton('primary'))
export const Secondary = withTheme(themedButton('secondary'))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.