This is a simple wrapper around react-native's <TextInput /> component.
For convenience reasons, you can also import all the <DpInputField />'s sub-components:
<DpInputFieldContainer /><DpInputFieldBorder /><DpInputFieldStaticLabel /><DpInputFieldValue /><DpInputFieldError />
You might need them if you're building a custom input component, i.e. some complex Select.
Apart from the props listed below it has all the props that a regular react-native <TextInput /> has.
disabled
boolean | undefined
Determines whether the input is opaque
Adds an error message below the input and changes input’s border and label to red
Content to be rendered on the right of the input
<MobileScreen isWhite>
<DpInputField label="Email" />
</MobileScreen>
Without a static placeholder
<MobileScreen isWhite>
<DpInputField placeholder="Write something here..." />
</MobileScreen>
Empty with an error
<MobileScreen isWhite>
<DpInputField error="This field is required" />
</MobileScreen>
Empty with a placeholder and an error
<MobileScreen isWhite>
<DpInputField error="This field is required" placeholder="Placeholder" />
</MobileScreen>
Empty with a label and an error
<MobileScreen isWhite>
<DpInputField error="This field is required" label="Label" />
</MobileScreen>
With an invalid value
<MobileScreen isWhite>
<DpInputField value="incorrectemail@" error="Incorrect email" />
</MobileScreen>
With an invalid value and a label
<MobileScreen isWhite>
<DpInputField
value="incorrectemail@"
error="Incorrect email"
label="Label"
/>
</MobileScreen>
With an invalid value and a placeholder
<MobileScreen isWhite>
<DpInputField
value="incorrectemail@"
error="Incorrect email"
placeholder="Placeholder"
/>
</MobileScreen>
Empty and disabled
<MobileScreen isWhite>
<DpInputField disabled />
</MobileScreen>
With a value and disabled
<MobileScreen isWhite>
<DpInputField disabled value="Some value" />
</MobileScreen>
disabled
boolean | undefined
Determines whether the container and its children are opaque
<MobileScreen isWhite>
<DpInputFieldContainer>
<Roboto>Regular</Roboto>
</DpInputFieldContainer>
<DpSpacer />
<DpInputFieldContainer disabled>
<Roboto>Disabled</Roboto>
</DpInputFieldContainer>
</MobileScreen>
color
"gray" | "blue" | "turquoise" | "red" | "green" | "primary" | undefined
primary
hasError
boolean | undefined
Determines whether the border is red
isFocused
boolean | undefined
Determines whether the border is blue or gray
isAnimated
boolean | undefined
Determines whether the border color is animated or not
<MobileScreen isWhite>
<DpInputFieldBorder>
<Roboto>Regular</Roboto>
</DpInputFieldBorder>
<DpSpacer />
<DpInputFieldBorder isFocused>
<Roboto>Focused</Roboto>
</DpInputFieldBorder>
<DpSpacer />
<DpInputFieldBorder hasError>
<Roboto>With error</Roboto>
</DpInputFieldBorder>
</MobileScreen>
isFocused
boolean | undefined
Determines whether the label is blue
hasError
boolean | undefined
Determines whether the label is red
<MobileScreen isWhite>
<DpInputFieldStaticLabel>Regular</DpInputFieldStaticLabel>
<DpSpacer />
<DpInputFieldStaticLabel isFocused>Focused</DpInputFieldStaticLabel>
<DpSpacer />
<DpInputFieldStaticLabel hasError>With error</DpInputFieldStaticLabel>
</MobileScreen>
children
string | undefined
<MobileScreen isWhite>
<DpInputFieldValue>value</DpInputFieldValue>
</MobileScreen>
<MobileScreen isWhite>
<DpInputFieldError>Some input error</DpInputFieldError>
</MobileScreen>
