diff --git a/native/components/link-button.react.js b/native/components/link-button.react.js index d9c1c2aac..70f2ff6bd 100644 --- a/native/components/link-button.react.js +++ b/native/components/link-button.react.js @@ -1,65 +1,58 @@ // @flow -import PropTypes from 'prop-types'; import * as React from 'react'; -import { Text, ViewPropTypes } from 'react-native'; +import { Text } from 'react-native'; -import { connect } from 'lib/utils/redux-utils'; - -import type { AppState } from '../redux/redux-setup'; -import { styleSelector } from '../themes/colors'; +import { useStyles } from '../themes/colors'; import type { ViewStyle } from '../types/styles'; import Button from './button.react'; -type Props = { - text: string, - onPress: () => void, - disabled?: boolean, - style?: ViewStyle, - // Redux state - styles: typeof styles, -}; +type BaseProps = {| + +text: string, + +onPress: () => void, + +disabled?: boolean, + +style?: ViewStyle, +|}; +type Props = {| + ...BaseProps, + +styles: typeof unboundStyles, +|}; class LinkButton extends React.PureComponent { - static propTypes = { - text: PropTypes.string.isRequired, - onPress: PropTypes.func.isRequired, - disabled: PropTypes.bool, - style: ViewPropTypes.style, - styles: PropTypes.objectOf(PropTypes.object).isRequired, - }; - render() { const disabledStyle = this.props.disabled ? this.props.styles.disabled : null; return ( ); } } -const styles = { +const unboundStyles = { disabled: { color: 'modalBackgroundSecondaryLabel', }, text: { color: 'link', fontSize: 17, paddingHorizontal: 10, }, }; -const stylesSelector = styleSelector(styles); -export default connect((state: AppState) => ({ - styles: stylesSelector(state), -}))(LinkButton); +export default React.memo(function ConnectedLinkButton( + props: BaseProps, +) { + const styles = useStyles(unboundStyles); + + return ; +});