Skip to content

Commit fe6b484

Browse files
author
cnilton
committed
fixed multiple issues, added some PRs, added new prop for labelProps
1 parent 3f0c281 commit fe6b484

6 files changed

Lines changed: 535 additions & 490 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ yarn add react-native-reanimated@1.13.2
6565

6666
| Prop | Type | Default | Description |
6767
| :---------------------------: | :------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
68+
| `labelProps` | TextProps | undefined | Set props to the label as `TextProps` |
6869
| `mask` | string | undefined | Set a custom mask to your input |
6970
| `maskType` | 'currency'<br/>'phone'<br/>'date'<br/>'card' | undefined | Set the mask type |
7071
| `staticLabel` | boolean | false | Set this to true if you want the label to be always at a set position. Commonly used with hint for displaying both label and hint for your input. For changing the position of the label with this prop as true, use the **customLabelStyles** _topFocused_ and _leftFocused_ to adjust the wanted position. |

‎__tests__/App-test.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import App from '../app.js';
99
// Note: test renderer must be required after react-native.
1010
import renderer from 'react-test-renderer';
1111

12+
jest.useFakeTimers();
13+
1214
it('renders correctly', () => {
1315
renderer.create(<App />);
1416
});

‎index.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
import FloatingLabelInput, { setGlobalStyles, CustomLabelProps, Props as FloatingLabelProps, SetGlobalStyles as SetGlobalStylesProps } from './src';
1+
import FloatingLabelInput, {
2+
setGlobalStyles,
3+
CustomLabelProps,
4+
Props as FloatingLabelProps,
5+
SetGlobalStyles as SetGlobalStylesProps,
6+
} from './src';
27

38
export { FloatingLabelInput, setGlobalStyles };
4-
export type {CustomLabelProps, FloatingLabelProps, SetGlobalStylesProps };
9+
export type { CustomLabelProps, FloatingLabelProps, SetGlobalStylesProps };

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "react-native-floating-label-input",
33
"description": "A simple and customizable React Native TextInput with it's placeholder always shown.",
4-
"version": "1.3.11",
4+
"version": "1.3.12",
55
"author": "Caio Nilton <cnilton>",
66
"main": "index.tsx",
77
"private": false,
@@ -42,6 +42,7 @@
4242
"react-native-reanimated": "*"
4343
},
4444
"devDependencies": {
45+
"@babel/preset-typescript": "^7.16.7",
4546
"@babel/core": "^7.6.2",
4647
"@babel/runtime": "^7.6.2",
4748
"@react-native-community/eslint-config": "^1.0.0",
@@ -79,4 +80,4 @@
7980
"node"
8081
]
8182
}
82-
}
83+
}

‎src/index.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
Image,
1313
Text,
1414
TouchableOpacity,
15+
TextProps,
1516
TextInputProps,
1617
TextStyle,
1718
ViewStyle,
@@ -101,6 +102,8 @@ export interface Props extends Omit<TextInputProps, 'secureTextEntry'> {
101102
rightComponent?: JSX.Element;
102103
/** Set custom animation duration. Default 300 ms */
103104
animationDuration?: number;
105+
/** Label Props */
106+
labelProps: TextProps;
104107
}
105108

106109
export interface SetGlobalStyles {
@@ -167,6 +170,7 @@ const AnimatedText = Animated.createAnimatedComponent(Text);
167170
const FloatingLabelInput: React.ForwardRefRenderFunction<InputRef, Props> = (
168171
{
169172
label,
173+
labelProps,
170174
mask,
171175
isPassword,
172176
maxLength,
@@ -204,7 +208,7 @@ const FloatingLabelInput: React.ForwardRefRenderFunction<InputRef, Props> = (
204208
animationDuration,
205209
...rest
206210
}: Props,
207-
ref,
211+
ref: any,
208212
) => {
209213
const [halfTop, setHalfTop] = useState(0);
210214
const [isFocusedState, setIsFocused] = useState(false);
@@ -293,7 +297,7 @@ const FloatingLabelInput: React.ForwardRefRenderFunction<InputRef, Props> = (
293297
} else {
294298
animateBlur();
295299
}
296-
}, [isFocusedState]);
300+
}, [isFocusedState, halfTop]);
297301

298302
useImperativeHandle(ref, () => ({
299303
focus() {
@@ -613,6 +617,7 @@ const FloatingLabelInput: React.ForwardRefRenderFunction<InputRef, Props> = (
613617
<View style={{ flexDirection: 'row' }}>
614618
{staticLabel && (
615619
<AnimatedText
620+
{...labelProps}
616621
onPress={setFocus}
617622
style={[
618623
style,
@@ -634,6 +639,7 @@ const FloatingLabelInput: React.ForwardRefRenderFunction<InputRef, Props> = (
634639
<View style={{ flex: 1, flexDirection: 'row' }}>
635640
{!staticLabel && (
636641
<AnimatedText
642+
{...labelProps}
637643
onPress={setFocus}
638644
style={[
639645
style,

0 commit comments

Comments
 (0)