Skip to content
Fully customizable, beautifully designed Input Bar for React Native
JavaScript Objective-C Ruby Java Python
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

React Native Input Bar

Battle Tested ✅

Fully customizable, beautifully designed Input Bar for React Native

npm version npm Platform - Android and iOS License: MIT styled with prettier

React Native Input Bar React Native Input Bar


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


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


<InputBar />

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

Change Log

0.0.5 (2019-12-19)

Full Changelog ⚠ BREAKING CHANGE: SpinKit is here 🎉

We need to install react-native-spinkit for this and above versions. Simply do not forget to pod install after the new implementation.

spinnerVisibility prop is available for controlling the Spinner :) Furthermore, of course it is fully customizable :)

0.0.4 (2019-12-18)

Full Changelog

0.0.2 (2019-12-18)

* This Change Log was automatically generated by github_changelog_generator


  • Optional Spinkit for secondary icon
  • Better Example


Thanks to Mayurksgr for this awesome inspiration. Credit Design Inpsiration




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

You can’t perform that action at this time.