@paraboly/react-native-input-bar

Fully customizable, beautifully designed Input Bar for React Native

Showing:

Popularity

Downloads/wk

18

GitHub Stars

29

Maintenance

Last Commit

1mo ago

Contributors

3

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

React Native Input Bar

Battle Tested ✅

Fully customizable, beautifully designed Input Bar for React Native

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

React Native Input Bar React Native Input Bar

Installation

Add the dependency:

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

Peer Dependencies

IMPORTANT! You need install them
"react-native-spinkit": ">= 1.5.0",
"react-native-androw": ">= 0.0.34",

Expo Version

npm i Paraboly/react-native-input-bar#expo

Expo Peer Dependencies

"react-native-animated-spinkit": "^1.4.2",
"@freakycoder/react-native-bounceable": "^0.2.4",

Note: Do not forget 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

PropertyTypeDefaultDescription
widthstring/number90% of screen widthchange the InputBar's width
heightstring/number50change the InputBar's height
bottomstring/number24change the InputBar's bottom position
valuestringundefinedset the TextInput's value
onChangeTextfunctionundefinedhandle onChangeText function
backgroundColorcolor#fdfdfdset your own color for InputBar's background color
textColorcolor#9da1abset your own color for TextInput's text color
shadowColorcolor#757575set your own color for TextInput's shadow color
placeholderstringType a message...change the TextInput's placeholder
textInputStylestyledefaultset your own style for TextInput
disablePrimaryIconbooleanfalsedisable the primary icon
disableSecondaryIconbooleanfalsedisable the secondary icon
primaryIconNamestringsendchange the primary icon's name
primaryIconTypestringFontAwesomechange the primary icon's type
primaryIconColorstring#9da1abchange the primary icon's color
primaryIconSizenumber21change the primary icon's size
primaryIconOnPressfunctionundefinedset a function when primary icon is on pressed
secondaryIconNamestringattachmentchange the secondary icon's name
secondaryIconTypestringEntypochange the secondary icon's type
secondaryIconColorstring#9da1abchange the secondary icon's color
secondaryIconSizenumber21change the secondary icon's size
secondaryIconOnPressfunctionundefinedset a function when secondary icon is on pressed
spinnerVisibilitybooleanfalsemake the spinner visible instead of primarty icon
spinnerTypestringFadingCircleAltchange the spinner type
spinnerSizenumber20change the spinner number
spinnerColorcolor#9da1abchange the spinner color
spinnerStylestyleundefinedset your own style for spinner
multilinebooleanfalseif you want auto-grow text InputBar then you need to use this prop & set the height prop to null !
minHeightstring/number50change the minimum height of the InputBar
maxHeightstring/numbernullchange the maximum height of the InputBar

Change Log

0.1.0 (2020-02-25)

Auto-grow feature is here 🥳

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

Roadmap

  • LICENSE
  • CHANGELOG
  • Auto-Grow Feature
  • 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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100