import React , { ElementType , FunctionComponent , useCallback , useMemo } from 'react' ; import { ButtonProps as BaseButtonProps , GestureResponderEvent , Platform , StyleProp , StyleSheet , Text , TextStyle , TouchableNativeFeedback , TouchableNativeFeedbackProps , TouchableOpacity , TouchableOpacityProps , View , ViewStyle } from 'react-native' ; import { pickTextStyles } from './utils' ; export const defaultStyles = { view : Platform . select < ViewStyle > ( { ios : { justifyContent : 'center' , flexDirection : 'row' , height : 50 } , android : { justifyContent : 'center' , flexDirection : 'row' , height : 50 } } ) , disabledView : Platform . select < ViewStyle > ( { ios : { } , android : { } } ) , text : Platform . select < TextStyle > ( { ios : { textAlign : 'center' , margin : 8 , color : '#007aff' , fontSize : 18 } , android : { paddingHorizontal : 3 , paddingBottom : 2 , color : '#212121' } } ) , disabledText : Platform . select < TextStyle > ( { ios : { color : '#cdcdcd' } , android : { color : '#cdcdcd' } } ) } ; export type ButtonProps = BaseButtonProps & { style ? : StyleProp < TextStyle > ; viewStyle ? : StyleProp < ViewStyle > ; disabledViewStyle ? : StyleProp < ViewStyle > ; textStyle ? : StyleProp < TextStyle > ; disabledTextStyle ? : StyleProp < TextStyle > ; TouchableComponent ? : ElementType < TouchableNativeFeedbackProps | TouchableOpacityProps > ; activeOpacity ? : TouchableOpacityProps [ 'activeOpacity' ] ; defaultStyles ? : typeof defaultStyles ; } ; export const defaultProps = { TouchableComponent : Platform . select < ElementType < TouchableNativeFeedbackProps | TouchableOpacityProps > > ( { android : TouchableNativeFeedback , default : TouchableOpacity } ) , defaultStyles : typeof defaultStyles } ; export const Button = ( { title , disabled , onPress , color , viewStyle : propViewStyle , disabledViewStyle , textStyle : propTextStyle , disabledTextStyle , defaultStyles : propDefaultStyles = defaultStyles , style : propStyle , TouchableComponent = defaultProps . TouchableComponent , ... otherTouchableProps } ) => { const flattenStyle = useMemo < TextStyle > ( ( ) => ( propStyle ? StyleSheet . flatten ( propStyle ) : { } ) , [ propStyle ] ) ; const handlePress = useCallback ( ( ev ) => { if ( disabled ) { return ; } if ( onPress ) { onPress ( ev ) ; } } , [ disabled , onPress ] ) ; const viewStyle = useMemo < ViewStyle > ( ( ) => StyleSheet . flatten ( [ propDefaultStyles . view , propViewStyle , flattenStyle , disabled ? [ propDefaultStyles . disabledView , disabledViewStyle ] : null ] ) , [ propViewStyle , flattenStyle , disabled , disabledViewStyle ] ) ; const textStyle = useMemo < TextStyle > ( ( ) => StyleSheet . flatten ( [ propDefaultStyles . text , propTextStyle , pickTextStyles ( flattenStyle ) , color ? { color } : null , disabled ? [ propDefaultStyles . disabledText , disabledTextStyle ] : null ] ) , [ propTextStyle , flattenStyle , disabled , color , disabledTextStyle ] ) ; return ( < TouchableComponent style = { { flex : viewStyle . flex ? 1 : 0 , flexDirection : 'row' } } disabled = { disabled } onPress = { handlePress } { ... otherTouchableProps } > < View style = { viewStyle } > { } < Text style = { textStyle } > { title } < /Text> < /View> < /TouchableComponent>); } ;