react-native-whatsapp-textinput
v0.1.0
Published
React Native TextInput: it has the following features: Display the send message in parent Component, Dynamic height based on user entered textValue and Scroll to last line while editing multilines
Downloads
61
Maintainers
Readme
react-native-whatsapp-textinput
React Native WhatsApp TextInput is a UI Design to show how to create compatible multiline textinput for both Android and IOS with Validation.
Features:
- Display the send message in parent Component
- 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