React Native WhatsApp TextInput is a UI Design to show how to create compatible multiline textinput for both Android and IOS with Validation.
-
Features:
- Dynamic height for textinput based on user text
- Handling the keyboard space when textinput onFocus
- Sticky send button to end the footerBlock like whatsapp/messenger send button
-
Demo Screen:
Code Implementation:
<WhatsAppTextInput
backgroundColor={'#fff'}
borderTopColor={'#f5f5f5'}
placeholderText={'Aa'}
placeholderTextColor='#9e9e9e'
messageTextColor={'#000'}
textInputBgColor={'#f5f5f5'}
editable={true}
multiline={true}
keyboardType={'default'}
sendButtonBgColor={'#1a75ff'}
sendButtonImage={require('./images/sendIcon.png')}
sendButtonDisableColor={'#f5f5f0'}
sendButtonEnableColor={'#002080'}
/>
Demo repo: https://github.com/MaheshNandam/DynamicHeightTextInput
| Property | Type | Description |
|---|---|---|
| backgroundColor | string | WhatsAppTextInput component backgroundColor |
| borderTopColor | string | WhatsAppTextInput component borderTopColor |
| placeholderText | string | TextInput placeholder value |
| placeholderTextColor | string | TextInput placeholder color |
| messageTextColor | string | User Input text color in TextInput |
| textInputBgColor | string | TextInput background color |
| editable | boolean | if its TRUE - User can edit the text, FALSE - user can't edit the text |
| multiline | boolean | if its TRUE - User can enter multiline text, FALSE - user can enter only single line |
| keyboardType | string | default, number-pad, decimal-pad, numeric, email-address, phone-pad |
| sendButtonBgColor | string | send button rounder circle background color |
| sendButtonImage | string | send button image |
| sendButtonDisableColor | string | disable color for send button |
| sendButtonEnableColor | string | enable color for send button |