!Platform - Android and iOS

src="assets/Screenshots/example.png" width="49%" />
src="assets/Screenshots/example.gif" width="49%" />

Installation

Add the dependency:

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

Peer Dependencies

###### IMPORTANT! You need install them

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

$3

Usage

$3

Import

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

Usage

`jsx

`

Auto-Grow InputBar Usage

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

`jsx

`

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

- [x] ~~LICENSE~~
- [x] ~~CHANGELOG~~
- [x] ~~Auto-Grow Feature~~
- [x] ~~TypeScript Challange~~
- [ ] Optional Spinkit for secondary icon
- [ ] Better Example

Credits

Thanks to Mayurksgr for this awesome inspiration. Credit Design Inpsiration

Author

FreakyCoder, kurayogun@gmail.com

License

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