Este soy básicamente yo usando mi componente en el archivo App.tsx
<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); } }} />Este es el código del componente CustomButton
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> ); };Quiero usar este componente para crear otro botón en mi archivo App.tsx, pero me gustaría que ese botón no tenga ícono. Si proporciono UseIcon, el valor es falso... puedo ver un ? en el botón en lugar del icono.
Cambiar código de componente como este
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> ); };y uso
// 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'} }} />;Cambie su CustomButton a
<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> Entonces su useIcon = {false} funcionará correctamente. Dado que useIcon es un props necesario, le sugiero que lo valide en función de eso.