native base <Input> with a line

Question

I am using native base's item and want to style it such that it has a line. Currently, it's simply invisible. All I can see is the placeholder text and if I change the background color, then I can see that too. But there's no border/line. How can I fix this?

   <Input style={styles.newFieldInput}
                      onChangeText={handleChange('phoneNumber') as (text: string) => void}
                      onBlur={handleBlur('phoneNumber') as (event: any) => void}
                      value={values.phoneNumber}
                      placeholder="49152901820"
                    />

 newFieldInput: {
    width: moderateScale(320),
    backgroundColor: 'white',
  },

I have tried passing in rounded or line as attributes but I get overloading errors as these attributes don't exist on < Input >

Also, is there any way I can add in icon into the beginning of the Input? Or will I necessarily have to wrap it in another component?

Answer 1

maybe try add a Item tag with regular outside?

<Item regular>
    <Input placeholder='Regular Textbox' />
</Item>

Or underline default ?

To use the underlined textbox, include the underline prop with Item.

<Item underline >
    <Input placeholder="Underline Textbox" />
</Item>

DOC