Skip to main content

InputBase

Root component for inputs. Specific inputs (e.g. InputPassword) wraps InputBase.

Thanks to that global changes like styling or changing component library can be done in this file only.

Internal elements​

It uses TextInput from react-native-paper library internally for input (this can be easily changed to bare TextInput from React Native).

Forwarding ref​

You can forward ref of type TextInput from React Native. With ref, you can check for example if the field is focused.

const nameRef = useRef<TextInput>(null)
// ...
<InputBase
 ref={nameRef}
/>

Props​

Every TextInput prop from react-native-paper is valid.

errorText​

To display the error message beneath the input you can pass errorText string.

iconName​

To show the left-hand icon, pass iconName string from the icon library of your choice.

By default Production Ready Forms uses Ionicons from react-native-vector-icons library.

You can preview icon names on ionic.io/ionicons. Be sure to check which version you're looking at as react-native-vector-icons can use older version that Ionicons website.