paraboly / react-native-input-bar

Fully customizable, beautifully designed Input Bar for React Native

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

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

• 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, [email protected]

License

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

react-native-input-bar's Issues

OnSubmitEditing prop

Hey again @WrathChaos 😀

I'm almost complete with integrating your inputbar component in my application! 🥳
It's working really nice at the moment.

The only thing that I'm missing is an option to dismiss the keyboard when I press the return button on the iPhone keyboard.

On a normal TextInput I usually use this to close the keyboard after pressing return:
<TextInput

onSubmitEditing={() => 
  {
    Keyboard.dismiss()
  }
}
/>

Can this functionality be added to the props?

Thanks in advance

Update to 0.2.0

Thank you for the update!

I was trying to update the package but now I get the following error:

Metro has encountered an error: While trying to resolve module @paraboly/react-native-input-bar from file /Users/username/Projects/expopagetest/screens/TabTwoScreen.tsx, the package /Users/username/Projects/expopagetest/node_modules/@paraboly/react-native-input-bar/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/Users/username/Projects/expopagetest/node_modules/@paraboly/react-native-input-bar/lib/src/InputBar.js. Indeed, none of these files exist:

• /Users/username/Projects/expopagetest/node_modules/@paraboly/react-native-input-bar/lib/src/InputBar.js(.native|.ios.expo.ts|.native.expo.ts|.expo.ts|.ios.expo.tsx|.native.expo.tsx|.expo.tsx|.ios.expo.js|.native.expo.js|.expo.js|.ios.expo.jsx|.native.expo.jsx|.expo.jsx|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.wasm|.native.wasm|.wasm)
• /Users/username/Projects/expopagetest/node_modules/@paraboly/react-native-input-bar/lib/src/InputBar.js/index(.native|.ios.expo.ts|.native.expo.ts|.expo.ts|.ios.expo.tsx|.native.expo.tsx|.expo.tsx|.ios.expo.js|.native.expo.js|.expo.js|.ios.expo.jsx|.native.expo.jsx|.expo.jsx|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.wasm|.native.wasm|.wasm)

Question: auto-grow + max height?

Hi, the component looks great!

Two quick questions:

1. Does it auto-grow if it needs more than one line?
2. Can you set max height?

Expo version main file bug

Hi @WrathChaos

Thanks for making an expo version availabe so quickly ;).
I just switched to the Expo version of this component but now I see I have the following error:

While trying to resolve module `@paraboly/react-native-input-bar` from file `/Users/user/Projects/expopagetest/screens/TabTwoScreen.tsx`, the package `/Users/user/Projects/expopagetest/node_modules/@paraboly/react-native-input-bar/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/user/Projects/expopagetest/node_modules/@paraboly/react-native-input-bar/build/dist/InputBar.js`. Indeed, none of these files exist:

  * /Users/user/Projects/expopagetest/node_modules/@paraboly/react-native-input-bar/build/dist/InputBar.js(.native|.ios.expo.ts|.native.expo.ts|.expo.ts|.ios.expo.tsx|.native.expo.tsx|.expo.tsx|.ios.expo.js|.native.expo.js|.expo.js|.ios.expo.jsx|.native.expo.jsx|.expo.jsx|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.wasm|.native.wasm|.wasm)
  * /Users/user/Projects/expopagetest/node_modules/@paraboly/react-native-input-bar/build/dist/InputBar.js/index(.native|.ios.expo.ts|.native.expo.ts|.expo.ts|.ios.expo.tsx|.native.expo.tsx|.expo.tsx|.ios.expo.js|.native.expo.js|.expo.js|.ios.expo.jsx|.native.expo.jsx|.expo.jsx|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.wasm|.native.wasm|.wasm)

This is probably the same issue as before when switching to the typescript version?

Thanks in advance!

Make entire inputbar clickable instead of only text/placeholder text

Hey @WrathChaos

I'm very impressed with the component and I really like it in my application! 🥳
I only spotted 1 issue when I was testing my functionality.

So when I want to enter some text in the Inputbar I can only click on the placeholder text.
Can I change something so the keyboard pops up even when I press on the whitespace on the right?

^On this device the width is not much, but on my android phone I have A LOT of whitespace so I can only enter text whenever I directly press on the placeholder text.

This issue becomes even more troublesome when I edit the text and only enter 1 character and then close the keyboard.
Now the space to click on the Inputbar becomes even smaller

I hope I described the issue good enough, if not just let me know 👍

Thanks for your hard work!

Bottom prop on Expo version

So I'm trying to align the input bar to the bottom of the page (see picture)
But I can't set the bottom prop (on the expo version) to make it so there is no space between the bar and the bottom of the screen, do I need to do something else?
I will also attach my JSX code below.

<View style={{flex: 1, backgroundColor: 'blue'}}>
                <InputBar multiline={true} maxLength={220} borderRadius={0} style={{width: "100%"}}
                          numberOfLines={4} blurOnSubmit={true} onSubmitEditing={() => {
                    Keyboard.dismiss();
                }} onSendPress={() => {
                    Keyboard.dismiss();
                    setInputText("")
                }} value={inputText} onChangeText={(text) => setInputText(text)} textInputStyle={{
                    fontWeight: 'bold',
                    fontSize: 15,
                    marginTop: 0,
                    marginLeft: 15,
                    marginRight: 55
                }} disableSecondaryIcon={true} placeholder={"Laat hier een reactie achter!                  "}/>
            </View>

Bottom prop is not available anymore

I really like the input bar!

On the GIT repo and on the npmjs registry I found out there was a bottom prop available to customise the bottom margin for the input-bar. Could this be prop be made available again?

Thanks in advance