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}
/>
)
}
Through parents components
<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"}}
/>
when i pass inputContainerStyle from parent componet its override the default style from Input component , i just want to pass backgroundcolor but not override default styles.
Right now its look like this :https://ibb.co/GpTgDpt But i want to look like this : 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}
/>
)
}
Now in your parent component send backgroudColor and other style props in inputStyle prop.