fix focus

hoaphantn7604 · Jul 2, 2021 · 7d16af0 · 7d16af0
1 parent b860ffc
commit 7d16af0
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -25,6 +25,7 @@ or
 | showIcon           | Boolean              | No        |                  |
 | iconStyle          | ImageStyle           | No        |                  |
 | numeric            | Boolean              | No        |                  |
+| focusColor         | String               | No        |                  |
 | fontFamily         | String               | No        |                  |
 | renderLeftIcon     | () => JSX.Element    | No        |                  |
 | renderRightIcon    | () => JSX.Element    | No        |                  |
@@ -48,6 +49,7 @@ or
                         onChangeText={text => {
                             console.log(text);
                         }}
+                        focusColor="red"
                         textError="Please enter"
                     />
                     <TextInput

diff --git a/example/App.js b/example/App.js
@@ -15,6 +15,7 @@ const TextInputScreen = _props => {
           onChangeText={text => {
             console.log(text);
           }}
+          focusColor="red"
           textError="Please enter"
         />
 

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-native-element-textinput",
   "title": "React Native Element TextInput",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "A react-native TextInput component easy to customize for both iOS and Android.",
   "main": "index.ts",
   "scripts": {

diff --git a/src/TextInput/index.tsx b/src/TextInput/index.tsx
@@ -32,12 +32,16 @@ const TextInputComponent: CTextInput = props => {
     showIcon,
     numeric,
     textError,
-    onChangeText = (value: string) => {},
+    focusColor,
+    onFocus,
+    onBlur,
+    onChangeText = (value: string) => { },
     renderLeftIcon,
     renderRightIcon,
   } = props;
 
   const [text, setText] = useState<string>('');
+  const [isFocus, setIsFocus] = useState<boolean>(false);
   const [textEntry, setTextEntry] = useState<boolean>(
     secureTextEntry ? true : false,
   );
@@ -113,11 +117,30 @@ const TextInputComponent: CTextInput = props => {
     }
   };
 
+  const onFocusCustom = (e) => {
+    setIsFocus(true);
+    if (onFocus) {
+      onFocus(e);
+    }
+  }
+
+  const ononBlurCustom = (e) => {
+    setIsFocus(false);
+    if (onBlur) {
+      onBlur(e);
+    }
+  }
+
   return (
     <View>
       <View style={[style]}>
         {label && <Text style={[styles.label, labelStyle]}>{label}</Text>}
-        <View style={[styles.textInput, containerStyle]}>
+        <View 
+        style={[
+          styles.textInput, 
+          containerStyle, 
+          isFocus && focusColor && {borderBottomColor: focusColor, borderTopColor: focusColor, borderLeftColor: focusColor, borderRightColor: focusColor}]
+        }>
           {renderLeftIcon?.()}
           <TextInput
             {...props}
@@ -127,6 +150,8 @@ const TextInputComponent: CTextInput = props => {
             placeholder={placeholder}
             placeholderTextColor={placeholderTextColor}
             onChangeText={onChange}
+            onFocus={onFocusCustom}
+            onBlur={ononBlurCustom}
           />
           {_renderRightIcon()}
         </View>

diff --git a/src/TextInput/type.ts b/src/TextInput/type.ts
@@ -1,6 +1,8 @@
 import {
   ImageStyle,
+  NativeSyntheticEvent,
   StyleProp,
+  TextInputFocusEventData,
   TextInputProps,
   TextStyle,
   ViewStyle,
@@ -18,6 +20,9 @@ interface Props extends TextInputProps {
   label?: string;
   showIcon?: boolean;
   numeric?: boolean;
+  focusColor?: string;
+  onFocus?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
+  onBlur?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
   renderRightIcon?: () => JSX.Element | null | undefined;
   renderLeftIcon?: () => JSX.Element | null | undefined;
 }