score:4

Accepted answer

The solid props takes a boolean value (which defaults to false if you dont pass it), which means

<Icon name="comments" size={30} color="#900" solid />
<Icon name="comments" size={30} color="#900" />

is short for,

<Icon name="comments" size={30} color="#900" solid={true} />
<Icon name="comments" size={30} color="#900" solid={false} />

For your case, you can try this

<Icon name="comments" size={30} color="#900" solid={focused} light={!focused} />

score:0

I'll suggest you to create a reusable custom component to tackle your issue, something like this

const GetIcon = props => {
  return (
    <Icon name={props.name} size={30} color="#900" solid={props.focused} light={!props.focused} />
  );
};

and then call your components like this in side your class

<GetIcon name="comments" focused={true}/>

for more info on reusable components read this

score:0

The {...iconType} is object spread syntax, it means you spread your object and pass it to component as key=value, and it doesn't make sense because iconType is a string.

As far as I know, there is no way to set an JSX attribute like your expectation. Instead, you could check condition before you return the component:

return focused ? 
        <Icon name="comments" size={30} color="#900" solid /> : 
        <Icon name="comments" size={30} color="#900" light/>;

Related Query

More Query from same tag