将react-native-vector-icons / FontAwesome与样式化组件一起使用

Question

I'm refactoring some React Native code to use styled-components , but having trouble styling FontAwesome icons. I get an error such as

styledComponents2.default.IconFontAwesome is not a function

so I understand per this GitHub issue that I need to wrap the component and pass the className prop down per the docs on extending custom components . So I have this:

import React from 'react';
import {
  Text,
  TouchableOpacity,
} from 'react-native';
import PropTypes from 'prop-types';
import IconFontAwesome from 'react-native-vector-icons/FontAwesome';
import styled from 'styled-components';

const StyledTouchableOpacity = styled.TouchableOpacity`
  width: ${props => (props.large ? '100%' : '80%')};
  height: ${props => (props.large ? '80px' : '60px')};
  font-size: ${props => (props.large ? '18px' : '15px')};
  background: '#f1d746';
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
`;

const StyledText = styled.Text`
  font-size: 15;
  font-weight: bold;
`;

const StylableIcon = ({ className }) => (
  <IconFontAwesome className={className} />
);

const StyledIconFontAwesome = styled.StylableIcon`
  font-size: 15;
  padding: 10px;
`;

const Button = (props) => {
  let _icon = null;

  if (props.icon) {
    _icon = (
      <StyledIconFontAwesome name={props.icon} />
    );
  }

  return (
    <StyledTouchableOpacity>
      <StyledText>{props.text}</StyledText>
      {_icon}
    </StyledTouchableOpacity>
  );
};

Button.defaultProps = {
  icon: null,
};

Button.propTypes = {
  icon: PropTypes.string,
};

export default Button;

which results in a similar error

styledComponents2.default.StylableIcon is not a function

Any tips on what I'm doing wrong here? Thanks all.

Answer 1

OK got it working with:

import React from 'react';
import {
  Text,
  TouchableOpacity,
} from 'react-native';
import PropTypes from 'prop-types';
import IconFontAwesome from 'react-native-vector-icons/FontAwesome';
import styled from 'styled-components';

const StyledTouchableOpacity = styled.TouchableOpacity`
  width: ${props => (props.large ? '100%' : '80%')};
  height: ${props => (props.large ? '80px' : '60px')};
  font-size: ${props => (props.large ? '18px' : '15px')};
  background: '#f1d746';
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
`;

const StyledText = styled.Text`
  font-size: 15;
  font-weight: bold;
`;

const StyledIconFontAwesome = styled(IconFontAwesome)`
  font-size: 15;
  padding: 10px;
`;

const Button = (props) => {
  let _icon = null;

  if (props.icon) {
    _icon = (
      <StyledIconFontAwesome name={props.icon} />
    );
  }

  return (
    <StyledTouchableOpacity>
      <StyledText>{props.text}</StyledText>
      {_icon}
    </StyledTouchableOpacity>
  );
};

Button.defaultProps = {
  icon: null,
};

Button.propTypes = {
  icon: PropTypes.string,
};

export default Button;

So two fixes here:

1. Had to use the syntax styled(Something) as opposed to styled.Something (thanks @bennygenel)
2. The wrapper StylableIcon was unnecessary. I can call styled(IconFontAwesome) directly.