I'm using a custom input field which already has its styles. When using it in one particular screen, I want to change the width and height. Is it possible to overwrite the styles?
To overwrite the existing styles, I added a new property to the existing styles of that page
field: { width: moderateScale(300, 0.3), height: verticalScale(40), },However, it doesn't make a difference.
This is from my main page:
return (<Modal visible={showPage} animationType="slide" transparent={true}><SafeAreaView><View style={styles.container}><View style={styles.searchTopContainer}><View style={styles.searchTopTextContainer}><Text style={styles.searchCancelDoneText} onPress={toggleShowPage}> Cancel</Text><Text style={styles.searchTopMiddleText}> Add Friend by Email</Text><Text style={styles.searchCancelDoneText}> Done</Text></View><View style={styles.searchFieldContainer}><Formik initialValues={initialValues} onSubmit={handleSubmitForm} validationSchema={validationSchema}> {({ handleChange, handleBlur, handleSubmit, values, }) => (<View><View style={styles.form}><FieldInput style={styles.field} handleChange={handleChange} handleBlur={handleBlur} value={values.email} fieldType="email" /><ErrorMessage name="email" render={(msg) => (<Text style={styles.errorText}> {msg}</Text> )} /></View><View style={styles.buttonContainer}><Button rounded style={styles.button} onPress={handleSubmit}><Text style={styles.text}> Add Friend{''}</Text></Button></View></View> )}</Formik></View></View></View></SafeAreaView></Modal> );};While the FieldInput consists of this:
return (<Item rounded style={styles.personalListItem}><Icon name="envelope" 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> );and has this styling:
personalListItem: { width: moderateScale(320), backgroundColor: 'white', borderBottomColor: 'grey', borderRadius: moderateScale(10), height: verticalScale(50), paddingRight: moderateScale(20), paddingLeft: moderateScale(10), marginVertical: moderateScale(20), },For styling, I am using ScaledSheets from react-native-size-matters. I don't want to switch to another method since all the remaining styling has been done like this.