@freakycoder/react-native-input-bar

Installation

Add the dependency:

npm i @freakycoder/react-native-input-bar

Peer Dependencies

IMPORTANT! You need install them

"react-native-spinkit": ">= 1.5.0",
"react-native-androw": ">= 0.0.34",
"@freakycoder/react-native-bounceable": "^0.2.0",

Note: Do not for get to pod install for installing properly SpinKit

Usage

InputBar should stay at the bottom therefore, please do not forget to set flex: 1 on your main container. Example is available for the real usage.

Import

import RNInputBar from "@freakycoder/react-native-input-bar";

Usage

<RNInputBar />

Auto-Grow InputBar Usage

All you need to do is set the multiline and set the height prop as null.

<RNInputBar multiline height={null} minHeight={50} />

Configuration - Props

Property	Type	Default	Description
width	string/number	90% of screen width	change the InputBar's width
height	string/number	50	change the InputBar's height
bottom	string/number	24	change the InputBar's bottom position
value	string	undefined	set the TextInput's value
onChangeText	function	undefined	handle onChangeText function
backgroundColor	color	#fdfdfd	set your own color for InputBar's background color
textColor	color	#9da1ab	set your own color for TextInput's text color
shadowColor	color	#757575	set your own color for TextInput's shadow color
placeholder	string	Type a message...	change the TextInput's placeholder
textInputStyle	style	default	set your own style for TextInput
disableSendIcon	boolean	false	disable the send icon
disableSecondaryIcon	boolean	false	disable the secondary icon
onSendPress	function	undefined	set a function when send icon is on pressed
secondaryIconOnPress	function	undefined	set a function when secondary icon is on pressed
spinnerVisibility	boolean	false	make the spinner visible instead of primarty icon
spinnerType	string	FadingCircleAlt	change the spinner type
spinnerSize	number	20	change the spinner number
spinnerColor	color	#9da1ab	change the spinner color
spinnerStyle	style	undefined	set your own style for spinner
multiline	boolean	false	if you want auto-grow text RNInputBar then you need to use this prop & set the height prop to null !
minHeight	string/number	50	change the minimum height of the RNInputBar
maxHeight	string/number	null	change the maximum height of the RNInputBar
borderRadius	number	12	change the border radius of the RNInputBar
sendIconImageSource	image	default	change the send icon image
secondaryIconImageSource	image	default	change the secondary icon image default is attachment

Roadmap

• LICENSE
• CHANGELOG
• Auto-Grow Feature
• TypeScript Challange
• Optional Spinkit for secondary icon
• Better Example

Credits

Thanks to Mayurksgr for this awesome inspiration. Credit Design Inpsiration

Author

FreakyCoder, [e-mail]

License

React Native Input Bar is available under the MIT license. See the LICENSE file for more info.