fixed multiple issues, added some PRs, added new prop for labelProps

Cnilton · Mar 14, 2022 · fe6b484 · fe6b484
1 parent 3f0c281
commit fe6b484
Show file tree

Hide file tree

Showing 6 changed files with 535 additions and 490 deletions.
diff --git a/README.md b/README.md
@@ -65,6 +65,7 @@ yarn add [email protected]
 
 |             Prop              |                     Type                     |                                                                                                                       Default                                                                                                                       |                                                                                                                                                 Description                                                                                                                                                  |
 | :---------------------------: | :------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
+|         `labelProps`          |                  TextProps                   |                                                                                                                      undefined                                                                                                                      |                                                                                                                                    Set props to the label as `TextProps`                                                                                                                                     |
 |            `mask`             |                    string                    |                                                                                                                      undefined                                                                                                                      |                                                                                                                                       Set a custom mask to your input                                                                                                                                        |
 |          `maskType`           | 'currency'<br/>'phone'<br/>'date'<br/>'card' |                                                                                                                      undefined                                                                                                                      |                                                                                                                                              Set the mask type                                                                                                                                               |
 |         `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. |

diff --git a/__tests__/App-test.js b/__tests__/App-test.js
@@ -9,6 +9,8 @@ import App from '../app.js';
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';
 
+jest.useFakeTimers();
+
 it('renders correctly', () => {
   renderer.create(<App />);
 });
diff --git a/index.tsx b/index.tsx
@@ -1,4 +1,9 @@
-import FloatingLabelInput, { setGlobalStyles, CustomLabelProps, Props as FloatingLabelProps, SetGlobalStyles as SetGlobalStylesProps } from './src';
+import FloatingLabelInput, {
+  setGlobalStyles,
+  CustomLabelProps,
+  Props as FloatingLabelProps,
+  SetGlobalStyles as SetGlobalStylesProps,
+} from './src';
 
 export { FloatingLabelInput, setGlobalStyles };
-export type {CustomLabelProps, FloatingLabelProps, SetGlobalStylesProps };
+export type { CustomLabelProps, FloatingLabelProps, SetGlobalStylesProps };
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-native-floating-label-input",
   "description": "A simple and customizable React Native TextInput with it's placeholder always shown.",
-  "version": "1.3.11",
+  "version": "1.3.12",
   "author": "Caio Nilton <cnilton>",
   "main": "index.tsx",
   "private": false,
@@ -42,6 +42,7 @@
     "react-native-reanimated": "*"
   },
   "devDependencies": {
+    "@babel/preset-typescript": "^7.16.7",
     "@babel/core": "^7.6.2",
     "@babel/runtime": "^7.6.2",
     "@react-native-community/eslint-config": "^1.0.0",
@@ -79,4 +80,4 @@
       "node"
     ]
   }
-}
+}
diff --git a/src/index.tsx b/src/index.tsx
@@ -12,6 +12,7 @@ import {
   Image,
   Text,
   TouchableOpacity,
+  TextProps,
   TextInputProps,
   TextStyle,
   ViewStyle,
@@ -101,6 +102,8 @@ export interface Props extends Omit<TextInputProps, 'secureTextEntry'> {
   rightComponent?: JSX.Element;
   /** Set custom animation duration. Default 300 ms */
   animationDuration?: number;
+  /** Label Props */
+  labelProps: TextProps;
 }
 
 export interface SetGlobalStyles {
@@ -167,6 +170,7 @@ const AnimatedText = Animated.createAnimatedComponent(Text);
 const FloatingLabelInput: React.ForwardRefRenderFunction<InputRef, Props> = (
   {
     label,
+    labelProps,
     mask,
     isPassword,
     maxLength,
@@ -204,7 +208,7 @@ const FloatingLabelInput: React.ForwardRefRenderFunction<InputRef, Props> = (
     animationDuration,
     ...rest
   }: Props,
-  ref,
+  ref: any,
 ) => {
   const [halfTop, setHalfTop] = useState(0);
   const [isFocusedState, setIsFocused] = useState(false);
@@ -293,7 +297,7 @@ const FloatingLabelInput: React.ForwardRefRenderFunction<InputRef, Props> = (
     } else {
       animateBlur();
     }
-  }, [isFocusedState]);
+  }, [isFocusedState, halfTop]);
 
   useImperativeHandle(ref, () => ({
     focus() {
@@ -613,6 +617,7 @@ const FloatingLabelInput: React.ForwardRefRenderFunction<InputRef, Props> = (
       <View style={{ flexDirection: 'row' }}>
         {staticLabel && (
           <AnimatedText
+            {...labelProps}
             onPress={setFocus}
             style={[
               style,
@@ -634,6 +639,7 @@ const FloatingLabelInput: React.ForwardRefRenderFunction<InputRef, Props> = (
           <View style={{ flex: 1, flexDirection: 'row' }}>
             {!staticLabel && (
               <AnimatedText
+                {...labelProps}
                 onPress={setFocus}
                 style={[
                   style,