const AppInput = (_props: InputProps) => { return( <Input labelStyle={styles.labelStyle} inputContainerStyle={[ styles.inputContainerStyle, { borderColor: _props.placeholderTextColor, borderWidth: isFocus ? 1 : 0, borderBottomWidth: isFocus ? 1 : 0, backgroundColor: Props.backgroundColor, //in this line i want to pass props from parents component }, ]} inputStyle={styles.inputStyle} autoCompleteType="phone" {..._props} errorStyle={styles.errorStyle} onFocus={() => onFocus(true)} onBlur={onBlur} /> ) }A través de los componentes de los padres
<AppInput placeholder={ isExculde ? "Don't show recipes with..." : 'Prefer recipes with...' } placeholderTextColor={ isExculde ? colors.icon.danger : colors.inputSetting.success } keyboardType="default" rightIcon={ <Icon name="search" size={24} color={ isExculde ? colors.icon.danger : colors.inputSetting.success } tvParallaxProperties={undefined} containerStyle={{right: 8}} /> } onChangeText={e => setShowExcludeList()} inputContainerStyle={{backgroundColor:"red"}} />cuando paso inputContainerStyle del componente principal, anula el estilo predeterminado del componente de entrada, solo quiero pasar el color de fondo pero no anular los estilos predeterminados.
En este momento se ve así: https://ibb.co/GpTgDpt Pero quiero lucir así: https://ibb.co/SfJrQ4H
const AppInput = (props) => { const {inputContainerStyle} = props; return( <Input labelStyle={styles.labelStyle} inputContainerStyle={{ ...styles.inputContainerStyle, ...inputContainerStyle, }} inputStyle={styles.inputStyle} autoCompleteType="phone" {..._props} errorStyle={styles.errorStyle} onFocus={() => onFocus(true)} onBlur={onBlur} /> ) }Ahora, en su componente principal, envíe backgroudColor y otros accesorios de estilo en inputStyle prop.