hoaphantn7604 / react-native-element-textinput Goto Github PK
View Code? Open in Web Editor NEWA react-native TextInput, TagsInput and AutoComplete component easy to customize for both iOS and Android.
License: MIT License
react-native-element-textinput's Introduction
react-native-element-textinput's People
Contributors
Stargazers
Watchers
Forkers
vanquanguetk63 devhuy1011 quannguyen2908 omidiora adderly luluhoc rahulnainwal107 tiepbm tideopl faizinur eliseo-martinez nguyen95 hruiz13react-native-element-textinput's Issues
Text Input doesn't support Placeholder Style or Selection Color.
Label becoming hidden after TextInput Blur
When focus is removed from TextInput the label becomes invisible even if it has a value.
useColorScheme() to eye/uneye/close.png
Hi! 👋
Firstly, thanks for your work on this project! 🙂
Today I used patch-package to patch [email protected] 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.
useColorScheme() to eye/uneye/close.png
Hi! 👋
Firstly, thanks for your work on this project! 🙂
Today I used patch-package to patch [email protected] 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..f53538f 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,14 @@ 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 = useColorScheme() === 'dark' ? require('./icon/eye_dark.png') : require('./icon/eye_light.png');
+const ic_uneye = useColorScheme() === 'dark' ? require('./icon/uneye_dark.png') : require('./icon/uneye_light.png');
+const ic_close = useColorScheme() === 'dark' ? require('./icon/close_dark.png') : require('./icon/close_light.png');
const defaultProps = {
style: {},This issue body was partially generated by patch-package.
How to use ref?
I am unable to use ref in react-native-element-textinput
<TextInput
ref={tfRef}
/>
style of TagsInput not working
`TextInput` shows wrong icons in password mode
Typically, the password should be visible when the eyes are opened and hidden when the eyes are closed.
I would like to work on this issue.
Add editable and selectTextOnFocus props just like React Native Textinput
<TextInput
editable={false}
selectTextOnFocus={false}
style={{ padding: 30 }}
placeholder="Name"
/>
editable set to false disables typing in the input.
selectTextOnFocus set to false means text won’t be selected when we focus on it.
secureTextEntry do not show the dots and troubles with the show icon
The property secureTextEntry do not show the dots while writting (on Android) and the eye icon that let you show the text is invested, the eye open do not let show the text and the eye with the cross let the text visible.
useColorScheme eye uneye close png
Hi! 👋
Firstly, thanks for your work on this project! 🙂
Today I used patch-package to patch [email protected] 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..f53538f 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,14 @@ 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 = useColorScheme() === 'dark' ? require('./icon/eye_dark.png') : require('./icon/eye_light.png');
+const ic_uneye = useColorScheme() === 'dark' ? require('./icon/uneye_dark.png') : require('./icon/uneye_light.png');
+const ic_close = useColorScheme() === 'dark' ? require('./icon/close_dark.png') : require('./icon/close_light.png');
const defaultProps = {
style: {},
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..47a2533 100644
--- a/node_modules/react-native-element-textinput/src/TextInput/styles.ts
+++ b/node_modules/react-native-element-textinput/src/TextInput/styles.ts
@@ -29,6 +29,7 @@ export const styles = StyleSheet.create({
icon: {
width: 20,
height: 20,
+ backgroundColor:"red"
},
textError: {
color: 'red',This issue body was partially generated by patch-package.
ui bug in autocomplete dropdown
Hi man, when I have more than x items in data array, when I try to scroll this bug appears on dropdown(the example is in a blank app):
SecureTextEntry Issue
Not able to change secureTextEntry While using a icon inside renderRightIcon onPress state is not updating the variable inside the secureTextEntry
How to render the text input with / for date
I want to render the text input with / when entering the date how to do it?
Value not setted on autocomplete's textinput
Hi, it seems that value property of autocomplete doesn't work, can you verify this?
example: I'm filling a form for edit but the initial value of autocomplete is not displayed.
Thank you.
Number Textinput Start Start After Decimal
i need to enter number input that start after decimal value form end, Is there any regex to implement this ?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.