// @flow

import * as React from 'react';
import { Platform } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

import { connect } from 'lib/utils/redux-utils';

import type { AppState } from '../redux/redux-setup';
import { styleSelector } from '../themes/colors';

type Props = {|
  // Redux state
  styles: typeof styles,
|};
function PencilIcon(props: Props) {
  return <Icon name="pencil" size={16} style={props.styles.editIcon} />;
}

const styles = {
  editIcon: {
    color: 'link',
    lineHeight: 20,
    paddingTop: Platform.select({ android: 1, default: 0 }),
    textAlign: 'right',
  },
};
const stylesSelector = styleSelector(styles);

export default connect((state: AppState) => ({
  styles: stylesSelector(state),
}))(PencilIcon);

// @flow

import * as React from 'react';
import { Platform } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

import { useStyles } from '../themes/colors';

function PencilIcon() {
  const styles = useStyles(unboundStyles);
  return <Icon name="pencil" size={16} style={styles.editIcon} />;
}

const unboundStyles = {
  editIcon: {
    color: 'link',
    lineHeight: 20,
    paddingTop: Platform.select({ android: 1, default: 0 }),
    textAlign: 'right',
  },
};

export default PencilIcon;

Use hook instead of connect functions and HOC in PencilIcon
[native] Use hook instead of connect functions and HOC in PencilIcon

Test Plan: Flow

Reviewers: ashoat, palys-swm

Reviewed By: ashoat

Subscribers: zrebcu411, Adrian

Differential Revision: https://phabricator.ashoat.com/D496
