Skip to content

Commit 6200099

Browse files
WrathChaosWrathChaos
committed
Auto-grow InputBar is here 🎉
1 parent 2744dd7 commit 6200099

File tree

5 files changed

+74
-66
lines changed

5 files changed

+74
-66
lines changed

‎README.md‎

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -58,35 +58,38 @@ import InputBar from "@paraboly/react-native-input-bar";
5858

5959
# Configuration - Props
6060

61-
| Property | Type | Default | Description |
62-
| -------------------- | :-----------: | :-----------------: | -------------------------------------------------- |
63-
| width | string/number | 90% of screen width | change the InputBar's width |
64-
| height | string/number | 50 | change the InputBar's height |
65-
| bottom | string/number | 24 | change the InputBar's bottom position |
66-
| value | string | undefined | set the TextInput's value |
67-
| onChangeText | function | undefined | handle onChangeText function |
68-
| backgroundColor | color | #fdfdfd | set your own color for InputBar's background color |
69-
| textColor | color | #9da1ab | set your own color for TextInput's text color |
70-
| shadowColor | color | #757575 | set your own color for TextInput's shadow color |
71-
| placeholder | string | Type a message... | change the TextInput's placeholder |
72-
| textInputStyle | style | default | set your own style for TextInput |
73-
| disablePrimaryIcon | boolean | false | disable the primary icon |
74-
| disableSecondaryIcon | boolean | false | disable the secondary icon |
75-
| primaryIconName | string | send | change the primary icon's name |
76-
| primaryIconType | string | FontAwesome | change the primary icon's type |
77-
| primaryIconColor | string | #9da1ab | change the primary icon's color |
78-
| primaryIconSize | number | 21 | change the primary icon's size |
79-
| primaryIconOnPress | function | undefined | set a function when primary icon is on pressed |
80-
| secondaryIconName | string | attachment | change the secondary icon's name |
81-
| secondaryIconType | string | Entypo | change the secondary icon's type |
82-
| secondaryIconColor | string | #9da1ab | change the secondary icon's color |
83-
| secondaryIconSize | number | 21 | change the secondary icon's size |
84-
| secondaryIconOnPress | function | undefined | set a function when secondary icon is on pressed |
85-
| spinnerVisibility | boolean | false | make the spinner visible instead of primarty icon |
86-
| spinnerType | string | FadingCircleAlt | change the spinner type |
87-
| spinnerSize | number | 20 | change the spinner number |
88-
| spinnerColor | color | #9da1ab | change the spinner color |
89-
| spinnerStyle | style | undefined | set your own style for spinner |
61+
| Property | Type | Default | Description |
62+
| -------------------- | :-----------: | :-----------------: | ------------------------------------------------------------------------------------------------------------ |
63+
| width | string/number | 90% of screen width | change the InputBar's width |
64+
| height | string/number | 50 | change the InputBar's height |
65+
| bottom | string/number | 24 | change the InputBar's bottom position |
66+
| value | string | undefined | set the TextInput's value |
67+
| onChangeText | function | undefined | handle onChangeText function |
68+
| backgroundColor | color | #fdfdfd | set your own color for InputBar's background color |
69+
| textColor | color | #9da1ab | set your own color for TextInput's text color |
70+
| shadowColor | color | #757575 | set your own color for TextInput's shadow color |
71+
| placeholder | string | Type a message... | change the TextInput's placeholder |
72+
| textInputStyle | style | default | set your own style for TextInput |
73+
| disablePrimaryIcon | boolean | false | disable the primary icon |
74+
| disableSecondaryIcon | boolean | false | disable the secondary icon |
75+
| primaryIconName | string | send | change the primary icon's name |
76+
| primaryIconType | string | FontAwesome | change the primary icon's type |
77+
| primaryIconColor | string | #9da1ab | change the primary icon's color |
78+
| primaryIconSize | number | 21 | change the primary icon's size |
79+
| primaryIconOnPress | function | undefined | set a function when primary icon is on pressed |
80+
| secondaryIconName | string | attachment | change the secondary icon's name |
81+
| secondaryIconType | string | Entypo | change the secondary icon's type |
82+
| secondaryIconColor | string | #9da1ab | change the secondary icon's color |
83+
| secondaryIconSize | number | 21 | change the secondary icon's size |
84+
| secondaryIconOnPress | function | undefined | set a function when secondary icon is on pressed |
85+
| spinnerVisibility | boolean | false | make the spinner visible instead of primarty icon |
86+
| spinnerType | string | FadingCircleAlt | change the spinner type |
87+
| spinnerSize | number | 20 | change the spinner number |
88+
| spinnerColor | color | #9da1ab | change the spinner color |
89+
| spinnerStyle | style | undefined | set your own style for spinner |
90+
| multiline | boolean | false | if you want **auto-grow** text `InputBar` then you need to use this prop & set the `height` prop to `null` ! |
91+
| minHeight | string/number | 50 | change the minimum height of the `InputBar` |
92+
| maxHeight | string/number | null | change the maximum height of the `InputBar` |
9093

9194
# Change Log
9295

‎example/App.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,12 @@ const App = () => {
1111
flex: 1
1212
}}
1313
>
14-
<InputBar spinnerVisibility={false} />
14+
<InputBar
15+
multiline
16+
height={null}
17+
minHeight={50}
18+
spinnerVisibility={false}
19+
/>
1520
</SafeAreaView>
1621
</>
1722
);

‎lib/src/InputBar.js‎

Lines changed: 26 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from "react";
22
import PropTypes from "prop-types";
33
import { View, Dimensions, TextInput } from "react-native";
44
import Androw from "react-native-androw";
5-
import Spinner from "react-native-spinkit";
65
import styles, {
76
_container,
87
_containerGlue,
@@ -19,7 +18,10 @@ const InputBar = props => {
1918
value,
2019
bottom,
2120
height,
21+
minHeight,
22+
maxHeight,
2223
textColor,
24+
multiline,
2325
shadowColor,
2426
placeholder,
2527
onChangeText,
@@ -29,12 +31,7 @@ const InputBar = props => {
2931
primaryIconSize,
3032
backgroundColor,
3133
primaryIconColor,
32-
spinnerVisibility,
3334
secondaryIconName,
34-
spinnerType,
35-
spinnerSize,
36-
spinnerColor,
37-
spinnerStyle,
3835
secondaryIconType,
3936
secondaryIconSize,
4037
primaryIconOnPress,
@@ -57,34 +54,32 @@ const InputBar = props => {
5754
/>
5855
</View>
5956
)}
60-
61-
{spinnerVisibility ? (
62-
<Spinner
63-
type={spinnerType}
64-
size={spinnerSize}
65-
color={spinnerColor}
66-
style={spinnerStyle}
67-
{...props}
57+
{!disablePrimaryIcon && (
58+
<BarIcon
59+
name={primaryIconName}
60+
type={primaryIconType}
61+
color={primaryIconColor}
62+
size={primaryIconSize}
63+
onPress={primaryIconOnPress}
6864
/>
69-
) : (
70-
!disablePrimaryIcon && (
71-
<BarIcon
72-
name={primaryIconName}
73-
type={primaryIconType}
74-
color={primaryIconColor}
75-
size={primaryIconSize}
76-
onPress={primaryIconOnPress}
77-
/>
78-
)
7965
)}
8066
</View>
8167
);
8268

8369
return (
8470
<Androw style={_container(shadowColor, bottom)}>
85-
<View style={_containerGlue(height, width, backgroundColor)}>
71+
<View
72+
style={_containerGlue(
73+
height,
74+
width,
75+
minHeight,
76+
maxHeight,
77+
backgroundColor
78+
)}
79+
>
8680
<TextInput
8781
value={value}
82+
multiline={multiline}
8883
placeholder={placeholder}
8984
onChangeText={onChangeText}
9085
style={textInputStyle || _textInputStyle(textColor)}
@@ -96,13 +91,10 @@ const InputBar = props => {
9691
};
9792

9893
InputBar.propTypes = {
94+
multiline: PropTypes.bool,
9995
textColor: PropTypes.string,
10096
shadowColor: PropTypes.string,
10197
placeholder: PropTypes.string,
102-
spinnerType: PropTypes.string,
103-
spinnerSize: PropTypes.number,
104-
spinnerColor: PropTypes.string,
105-
spinnerVisibility: PropTypes.bool,
10698
primaryIconSize: PropTypes.number,
10799
primaryIconName: PropTypes.string,
108100
primaryIconType: PropTypes.string,
@@ -113,28 +105,28 @@ InputBar.propTypes = {
113105
secondaryIconColor: PropTypes.string,
114106
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
115107
bottom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
116-
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
108+
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
109+
minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
117110
};
118111

119112
InputBar.defaultProps = {
120113
bottom: 24,
121114
height: 50,
122-
spinnerSize: 20,
115+
minHeight: 50,
116+
maxHeight: null,
117+
multiline: false,
123118
primaryIconSize: 21,
124119
textColor: "#9da1ab",
125120
secondaryIconSize: 21,
126121
shadowColor: "#757575",
127-
spinnerColor: "#9da1ab",
128122
width: ScreenWidth * 0.9,
129-
spinnerVisibility: false,
130123
primaryIconName: "send-o",
131124
disablePrimaryIcon: false,
132125
backgroundColor: "#fdfdfd",
133126
primaryIconColor: "#9da1ab",
134127
secondaryIconType: "Entypo",
135128
disableSecondaryIcon: false,
136129
secondaryIconColor: "#9da1ab",
137-
spinnerType: "FadingCircleAlt",
138130
primaryIconType: "FontAwesome",
139131
secondaryIconName: "attachment",
140132
placeholder: "Type a message..."

‎lib/src/InputBar.style.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,17 @@ export const _container = (shadowColor, marginBottom) => ({
2020
}
2121
});
2222

23-
export const _containerGlue = (height, width, backgroundColor) => ({
23+
export const _containerGlue = (
24+
height,
25+
width,
26+
minHeight,
27+
maxHeight,
28+
backgroundColor
29+
) => ({
2430
width,
2531
height,
32+
minHeight,
33+
maxHeight,
2634
backgroundColor,
2735
paddingLeft: 16,
2836
paddingRight: 32,

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@paraboly/react-native-input-bar",
3-
"version": "0.0.5",
3+
"version": "0.1.0",
44
"description": "Fully customizable, beautifully designed Input Bar for React Native",
55
"keywords": [
66
"input",

0 commit comments

Comments
 (0)