I have a custom component that I have built using Native-base components like this:
export const FieldInput: React.FunctionComponent<FieldInputProps> = ({ handleChange, handleBlur, fieldType, placeholderText, value, hidePassword, hidePasswordIcon, togglePassword, icon, style,}) => { return (<Item rounded style={[styles.personalListItem, style]}><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> );};
Here, the native base item has the property rounded
. In most cases where I am using this component, I need it to be rounded. However, in one particular instance, I want to change it to a line. This is possible by simply removing the rounded
word. But I am unable to modify the component accordingly. Currently, I am using this like this:
<FieldInput style={styles.fieldInput} handleChange={handleChange} handleBlur={handleBlur} value={values.phoneNumber} fieldType="phoneNumber" icon="phone" placeholderText="49152901820" />
Additionally, I couldn't find any proper documentation stating the keywords we can use for the shapes of . "line"
doesn't work. Are there any other options?