Dynamically pass prop without any value in react native

4
votes

I am completely new to react native. Currently exploring the react native vector icons for FontAwesome 5 pro icons.

https://github.com/oblador/react-native-vector-icons

There are 3 types of icon sets for FontAwesome 5 such as regular, solid and light.

import Icon from 'react-native-vector-icons/FontAwesome5';

const myIcon1 = <Icon name="comments" size={30} color="#900" />; // Defaults to regular
const myIcon2 = <Icon name="comments" size={30} color="#900" solid />;
const myIcon3 = <Icon name="comments" size={30} color="#900" light />; // Only in FA5 Pro

Is there any way I can pass the icon type (light, solid) dynamically?

I have tried the following so far:

let iconType = focused ? 'solid' : 'light';

return <Icon name="comments" size={30} color="#900" {...iconType} />;
3
reactjsreact-native

3 Answers

4
votes

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} />
0
votes

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/>;
0
votes

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