react-native-input-bar

Fully customizable, beautifully designed Input Bar for React Native.

example

example

Installation

Add the dependency:

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

Peer Dependencies

IMPORTANT! You need install them
"react": ">= 16.x.x",
"react-native": ">= 0.55.x",
"react-native-spinkit": ">= 1.5.0",
"react-native-androw": ">= 0.0.34",
"react-native-vector-icons": ">= 6.6.0",
"react-native-dynamic-vector-icons": ">= 0.2.1"

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 InputBar from "@paraboly/react-native-input-bar";

Usage

<InputBar />

Auto-Grow InputBar Usage

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

<InputBar 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
disablePrimaryIcon boolean false disable the primary icon
disableSecondaryIcon boolean false disable the secondary icon
primaryIconName string send change the primary icon's name
primaryIconType string FontAwesome change the primary icon's type
primaryIconColor string #9da1ab change the primary icon's color
primaryIconSize number 21 change the primary icon's size
primaryIconOnPress function undefined set a function when primary icon is on pressed
secondaryIconName string attachment change the secondary icon's name
secondaryIconType string Entypo change the secondary icon's type
secondaryIconColor string #9da1ab change the secondary icon's color
secondaryIconSize number 21 change the secondary icon's size
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 InputBar then you need to use this prop & set the height prop to null !
minHeight string/number 50 change the minimum height of the InputBar
maxHeight string/number null change the maximum height of the InputBar

GitHub