react-native-whatsapp-textinput

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

Usage no npm install needed!

<script type="module">
  import reactNativeWhatsappTextinput from 'https://cdn.skypack.dev/react-native-whatsapp-textinput';
</script>

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