I have a custom react component that looks like this:
import { StyleSheet } from 'react-native';import { Input, Item } from 'native-base';import Icon from 'react-native-vector-icons/FontAwesome';import { moderateScale, verticalScale } from 'react-native-size-matters';import { styles as commonStyles } from '~/styles/RegistrationStyles';type FieldInputProps = { handleChange: (e: string) => undefined; handleBlur: (e: string) => undefined; value: string; fieldType: string; placeholderText?: string; hidePasswordIcon?: string; hidePassword?: boolean; togglePassword?: () => void; icon: string;};export const FieldInput: React.FunctionComponent<FieldInputProps> = ({ handleChange, handleBlur, fieldType, placeholderText, value, hidePassword, hidePasswordIcon, togglePassword, icon,}) => { return (<Item rounded style={styles.personalListItem}><Icon name={icon} size={moderateScale(20)} color="green" /><Input autoFocus={true} autoCapitalize="none" style={{ fontSize: moderateScale(15) }} placeholder={placeholderText} keyboardType="default" onChangeText={handleChange(fieldType)} onBlur={handleBlur(fieldType)} value={value} secureTextEntry={hidePassword} /> {togglePassword ? (<Icon name={hidePasswordIcon} onPress={togglePassword} style={commonStyles.iconStyle} size={moderateScale(20)} color="green" /> ) : null}</Item> );};const styles = StyleSheet.create({ container: { alignItems: 'center', backgroundColor: '#2E3331', flex: 1, }, personalListItem: { width: moderateScale(320), backgroundColor: 'white', borderBottomColor: 'grey', borderRadius: moderateScale(10), height: verticalScale(50), paddingRight: moderateScale(20), paddingLeft: moderateScale(10), marginVertical: moderateScale(20), }, text: { fontFamily: 'Roboto', fontSize: moderateScale(20), fontWeight: '600', marginVertical: moderateScale(10), color: '#17D041', }, subtext: { color: '#17D041', fontSize: moderateScale(14), }, subtextBold: { textDecorationLine: 'underline', color: '#17D041', fontWeight: '600', fontSize: moderateScale(14), }, button: { height: moderateScale(50), width: moderateScale(350), borderRadius: moderateScale(10), justifyContent: 'center', marginBottom: moderateScale(5), }, buttonText: { fontSize: moderateScale(15), },});Usually when I use this component, I want to keep using this style. However, in one particular case, I want to overwrite the styles. For example, change the width or the background color of the input field etc. However, if I try to overwrite the styles, there are no changes.
<FieldInput style={styles.fieldInput} handleChange={handleChange} handleBlur={handleBlur} value={values.phoneNumber} fieldType="phoneNumber" icon="phone" placeholderText="49152901820" /> fieldInput: { width: moderateScale(320), backgroundColor: 'red', },