Skip to content

useColorScheme() to eye/uneye/close.png #17

@YuGer26

Description

@YuGer26

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-element-textinput@2.2.0 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-element-textinput/src/TextInput/icon/close_dark.png b/node_modules/react-native-element-textinput/src/TextInput/icon/close_dark.png
new file mode 100644
index 0000000..147f3f6
Binary files /dev/null and b/node_modules/react-native-element-textinput/src/TextInput/icon/close_dark.png differ
diff --git a/node_modules/react-native-element-textinput/src/TextInput/icon/close_light.png b/node_modules/react-native-element-textinput/src/TextInput/icon/close_light.png
new file mode 100644
index 0000000..c6271fd
Binary files /dev/null and b/node_modules/react-native-element-textinput/src/TextInput/icon/close_light.png differ
diff --git a/node_modules/react-native-element-textinput/src/TextInput/icon/eye_dark.png b/node_modules/react-native-element-textinput/src/TextInput/icon/eye_dark.png
new file mode 100644
index 0000000..094866d
Binary files /dev/null and b/node_modules/react-native-element-textinput/src/TextInput/icon/eye_dark.png differ
diff --git a/node_modules/react-native-element-textinput/src/TextInput/icon/eye_light.png b/node_modules/react-native-element-textinput/src/TextInput/icon/eye_light.png
new file mode 100644
index 0000000..7e95b8f
Binary files /dev/null and b/node_modules/react-native-element-textinput/src/TextInput/icon/eye_light.png differ
diff --git a/node_modules/react-native-element-textinput/src/TextInput/icon/uneye_dark.png b/node_modules/react-native-element-textinput/src/TextInput/icon/uneye_dark.png
new file mode 100644
index 0000000..98a1d01
Binary files /dev/null and b/node_modules/react-native-element-textinput/src/TextInput/icon/uneye_dark.png differ
diff --git a/node_modules/react-native-element-textinput/src/TextInput/icon/uneye_light.png b/node_modules/react-native-element-textinput/src/TextInput/icon/uneye_light.png
new file mode 100644
index 0000000..54c94c9
Binary files /dev/null and b/node_modules/react-native-element-textinput/src/TextInput/icon/uneye_light.png differ
diff --git a/node_modules/react-native-element-textinput/src/TextInput/index.tsx b/node_modules/react-native-element-textinput/src/TextInput/index.tsx
index 0df2f66..1b6c1c6 100644
--- a/node_modules/react-native-element-textinput/src/TextInput/index.tsx
+++ b/node_modules/react-native-element-textinput/src/TextInput/index.tsx
@@ -8,13 +8,19 @@ import {
   TextStyle,
   TouchableOpacity,
   View,
+  useColorScheme,
 } from 'react-native';
 import { styles } from './styles';
 import type { InputProps } from './model';
 
-const ic_eye = require('./icon/eye.png');
-const ic_uneye = require('./icon/uneye.png');
-const ic_close = require('./icon/close.png');
+const ic_eye_dark = require('./icon/eye_dark.png')
+const ic_eye_light = require('./icon/eye_light.png')
+const ic_uneye_dark = require('./icon/uneye_dark.png')
+const ic_uneye_light = require('./icon/uneye_light.png')
+const ic_close_dark = require('./icon/close_dark.png')
+const ic_close_light = require('./icon/close_light.png')
+
+
 
 const defaultProps = {
   style: {},
@@ -93,6 +99,9 @@ const TextInputComponent: InputProps = (props) => {
   };
 
   const _renderRightIcon = () => {
+    const ic_eye = useColorScheme() === 'dark' ? ic_eye_dark : ic_eye_light
+const ic_uneye = useColorScheme() === 'dark' ? ic_uneye_dark : ic_uneye_light
+const ic_close = useColorScheme() === 'dark' ? ic_close_dark : ic_close_light
     if (showIcon) {
       if (renderRightIcon) {
         return renderRightIcon();
@@ -103,7 +112,7 @@ const TextInputComponent: InputProps = (props) => {
             <TouchableOpacity onPress={onChangeTextEntry}>
               <Image
                 source={textEntry ? ic_eye : ic_uneye}
-                style={[styles.icon, iconStyle]}
+                style={[styles.icon, iconStyle,{width:18,height:16}]}
               />
             </TouchableOpacity>
           );
diff --git a/node_modules/react-native-element-textinput/src/TextInput/styles.ts b/node_modules/react-native-element-textinput/src/TextInput/styles.ts
index 75a0baf..199aa28 100644
--- a/node_modules/react-native-element-textinput/src/TextInput/styles.ts
+++ b/node_modules/react-native-element-textinput/src/TextInput/styles.ts
@@ -27,8 +27,8 @@ export const styles = StyleSheet.create({
     flexDirection: 'row',
   },
   icon: {
-    width: 20,
-    height: 20,
+    width: 16,
+    height: 16,
   },
   textError: {
     color: 'red',

This issue body was partially generated by patch-package.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions