This is Basically me using my Component in App.tsx file

<CustomButton
  title={'Login'}
  buttonStyle={{ marginTop: 20, alignSelf: 'center' }}
  disabled={!props.isValid}
  useIcon={true}
  iconName={'vpn-key'}
  iconSize={25}
  iconColor={'white'}
  onPress={() => {
    if (props.isValid) {
      console.log('is valid');
      return props.handleSubmit();
    } else {
      console.log('form is not valid', props.errors);
    }
  }}
/>

This is the CustomButton Component Code

export interface Props {
  title: string;
  disabled?: boolean;
  buttonStyle?: ViewStyle | ViewStyle[];
  textStyle?: TextStyle | TextStyle[];
  onPress: any;
  useIcon:boolean;
  iconName?:string;
  iconSize?:number
  iconColor?:string;
}
    
const CustomButton = (props: Props) => {
  return (
    <TouchableOpacity
      onPress={props.onPress}
      style={[
        props.disabled
          ? { ...styles.buttonStyle, backgroundColor: 'grey' }
          : styles.buttonStyle,
        props.buttonStyle,
      ]}
      disabled={props.disabled}>
      <Icon
        name={props.iconName}
        useIcon={props.useIcon}
        size={props.iconSize}
        color={props.iconColor}></Icon>
      <Text style={[styles.textStyle, props.textStyle]}>{props.title}</Text>
    </TouchableOpacity>
  );
};

I want to use this Component to create another button in my App.tsx file but would like that button to have no Icon. If I provide UseIcon the value is false.....I can see a ? on the button in place of the icon.

CodePudding user response：

Change component code like this

const CustomButton = (props: Props) => {
  return (
    <TouchableOpacity
      onPress={props.onPress}
      style={[
        props.disabled
          ? { ...styles.buttonStyle, backgroundColor: 'grey' }
          : styles.buttonStyle,
        props.buttonStyle,
      ]}
      disabled={props.disabled}>
      {/* Here */}
      {iconName && (
        <Icon
          name={props.iconName}
          useIcon={props.useIcon}
          size={props.iconSize}
          color={props.iconColor}></Icon>
      )}

      <Text style={[styles.textStyle, props.textStyle]}>{props.title}</Text>
    </TouchableOpacity>
  );
};

and usage

// without icon
<CustomButton
  title={'Login'}
  buttonStyle={{ marginTop: 20, alignSelf: 'center' }}
  disabled={!props.isValid}
  useIcon={true}
/>;

// with icon
<CustomButton
  title={'Login'}
  buttonStyle={{ marginTop: 20, alignSelf: 'center' }}
  disabled={!props.isValid}
  useIcon={true}
  iconName={'vpn-key'}
  iconSize={25}
  iconColor={'white'}
  }}
/>;

CodePudding user response：

Change your CustomButton to

<TouchableOpacity
  onPress={props.onPress}
  style={[
    props.disabled
      ? { ...styles.buttonStyle, backgroundColor: 'grey' }
      : styles.buttonStyle,
    props.buttonStyle,
  ]}
  disabled={props.disabled}>
  {props.useIcon && (
    <Icon
      name={props.iconName}
      useIcon={props.useIcon}
      size={props.iconSize}
      color={props.iconColor}
    />
  )}
  <Text style={[styles.textStyle, props.textStyle]}>{props.title}</Text>
</TouchableOpacity>

Then your useIcon = {false} will work properly. Since useIcon is a required props I would suggest you validate based on that.