I've created a unique React component with the following structure:
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),
},
});
Most times when using this component, I prefer to stick to its default styling. However, in certain scenarios, I may need to override these styles. For example, adjusting the input field's width or background color. But, attempts to customize the styles don't seem to take effect.
<FieldInput style={styles.fieldInput}
handleChange={handleChange}
handleBlur={handleBlur}
value={values.phoneNumber}
fieldType="phoneNumber"
icon="phone"
placeholderText="49152901820"
/>
fieldInput: {
width: moderateScale(320),
backgroundColor: 'red',
},