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