Substrate Themed Button Example

Button.tsx

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'))