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.
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'}
}}
/>;
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.