npmpackage.info

Gathering detailed insights and metrics for @paraboly/react-native-input-bar

@paraboly/react-native-input-bar

Fully customizable, beautifully designed Input Bar for React Native

0.2.2

MIT

Java

47.14 kB

1.6

Installations

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

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

10.15.3

NPM Version

6.14.8 Pull Requests

Open

8

Total

20

Closed

1

Merged

11

Issues

Open

0

Total

7

Closed

7

Releases

TextInput prop-drilling and better type extending 🥳

0.2.2

Updated on Nov 17, 2020

New version 0.2.1 is here with fully converted to Typescript

0.2.1

Updated on Nov 13, 2020

New Design System 🥳

0.1.1

Updated on Mar 02, 2020

Auto-grow InputBar is here 🎉

0.1.0

Updated on Feb 25, 2020

⚠ BREAKING CHANGE: SpinKit is here 🎉

0.0.5

Updated on Dec 19, 2019

TextInput onChange & value props are added 🤩

0.0.4

Updated on Dec 18, 2019

View All 7 releases

Languages

Java

TypeScript

Objective-C

JavaScript

Ruby

Starlark

Java (31.47%)

TypeScript (30.21%)

Objective-C (22.42%)

JavaScript (8.98%)

Ruby (3.86%)

Starlark (3.06%)

Developer

Paraboly

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

37 Stars

43 Commits

4 Forks

1 Watchers

11 Branches

3 Contributors

Updated on Jan 15, 2024

Maintainers

View All 3 Contributors

Package Meta Information

Latest Version

0.2.2

Package Id

@paraboly/react-native-input-bar@0.2.2

Unpacked Size

47.14 kB

Size

13.43 kB

File Count

NPM Version

6.14.8

Node Version

10.15.3

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

react react-native react-native-spinkit react-native-androw @freakycoder/react-native-bounceable

Dev Dependencies

@types/react @types/react-native react-native-typescript-transformer typescript @react-native-community/eslint-config eslint eslint-config-airbnb husky lint-staged prettier

React Native Input Bar

Installation

Add the dependency:

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

Peer Dependencies

IMPORTANT! You need install them

1"react": ">= 16.x.x",
2"react-native": ">= 0.55.x",
3"react-native-spinkit": ">= 1.5.0",
4"react-native-androw": ">= 0.0.34",
5"react-native-vector-icons": ">= 6.6.0",
6"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

1import InputBar from "@paraboly/react-native-input-bar";

Usage

1<InputBar />

Auto-Grow InputBar Usage

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

1<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`

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

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.

No vulnerabilities found.

10

License

Determines if the project has defined a license.

9

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

1.6

/10

Last Scanned on 2025-07-14

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

@paraboly/react-native-input-bar - 0.2.2 | npmpackage.info

@paraboly/react-native-input-bar

Installations

Developer Guide

No

CommonJS

10.15.3

6.14.8

Pull Requests

8

20

1

11

Issues

0

7

7

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

Installation

Peer Dependencies

IMPORTANT! You need install them

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

Usage

Auto-Grow InputBar Usage

Configuration - Props

Change Log

0.1.0 (2020-02-25)

0.0.5 (2019-12-19)

0.0.4 (2019-12-18)

0.0.2 (2019-12-18)

Roadmap

Credits

Author

License

10

9

0

0

0

0

0

0

0

0

1.6

/10

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.