TextInput cursor move to the beginning on reveal/hide password - android

I'm having a problem with TextInput cursor when reveal or hide password value, when the user touch the reveal password button the cursor move to the beginning on Android, iOS works as expected.
This is the function of reveal password:
displayPass(){
this.setState({
hiddenPass: !this.state.hiddenPass
});
}
And this is the TextInput
<TextInput onChangeText = {(pass) => this.setState({pass})}
secureTextEntry = {this.state.hiddenPass} />
And this is the button:
<TouchableOpacity onPress = {this.displayPass.bind(this)}>
<Text style = {styles.textReveal}>{this.state.hiddenPass ? "Reveal Password" : "Hide Password"}</Text>
</TouchableOpacity>

DISCLAIMER: For me, it was impossible to fix this under Expo 32. Playing with cursor position, focus/blur and setNativeProps did not solve it.
If you need a password input with hide&reveal functionality, your best options are:
Add react-native-hide-show-password-input package: https://www.npmjs.com/package/react-native-hide-show-password-input
Update expo to version 33. You can follow this instructions: https://blog.expo.io/expo-sdk-v33-0-0-is-now-available-52d1c99dfe4c (you will find the exact lists of dependencies to be updated and their compatible versions).
After the upgrade, no extra logic will be needed, just use the TextInput component. After clicking the "show/hide password" icon, you will see that the cursor stays in the correct position.

Related

Keyboard gets dismissed immediately after deleting the last character in the textinput field - Formik - React Native

As described in the title.
This happens in both: IOS and Android, iPad also.
note:
<TextInputs in other screens don't have this behaviour: not <TextInput nor <TextInput used inside Formik's form.
Formik's props that I am using:
fields
initialValues
validationSchema
onSubmit
submitButtonText
withoutScrollView
buttonLoading
allowSubmission
<TextInput props that I am using:
type
fieldKey
placeholder
props: {
keyboardType: 'number-pad',
inputPattern: appConstants.commonRegex.onlyInt,}
I've tried everything I could, so far:
Cleaning and removing unnecessary lines that I don't need; like form reference.
Modifying/commenting out each part separately of the two components (Formik & TextInput) like in their props; to debug this issue.
I am expecting a regular behavior: not dismissing the keyboard after deleting <TextInput's value or when making it blank.

How to enable and disable the done button in keyboard in react native

in my react-native App for the text input I want to enable/disable the done button on the keyboard dynamically. tried with enablesReturnKeyAutomatically but no use because these allowing to disable the done button only when there is no text in the input. here I want to enable/disable dynamically. can anyone give me some suggestions to resolve it. any help is much appreciated, Thanks in advance.
import React from "react";
import { SafeAreaView, StyleSheet, TextInput,Button,Keyboard } from "react-native";
const UselessTextInput = () => {
const [text, onChangeText] = React.useState("Useless Text");
const [number, onChangeNumber] = React.useState(null);
const [done,setDone]=React.useState(false)
return (
<SafeAreaView>
<TextInput
style={styles.input}
enablesReturnKeyAutomatically={done}
onChangeText={onChangeNumber}
value={number}
placeholder="useless placeholder"
/>
<Button title={'Toggle Done'} onPress={()=>{Keyboard.dismiss();setDone(!done)}}/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
input: {
height: 40,
margin: 12,
borderWidth: 1,
padding: 10,
},
});
export default UselessTextInput;
You can't, not reliably. The keyboard in Android is a separate app (actually one of any number of apps, as they can be replaced by the OEM or the user). It decides what keys are shown, and what each key does. You can give it hints, but nothing can force it to obey those hints. If the keyboard app decides it wants to show a return key, it will. And most keyboard apps show a return key if they aren't explicitly told to display an action key via the hints (such as Done, Next, Search, etc). I don't know of any that would just make it a non-functional or disappearing key.
The Android keyboard interface really doesn't work well for dynamically changing the key while the keyboard is already up. Some keyboards may work with it, but many won't. Many don't as an explicit choice unless the focused text view changes. There's some good reasons for this from a keyboard developer's point of view.
Basically if you're looking for some really specific behavior out of the keyboard, you're probably not going to get it. Or you'll find some way to make it work on the keyboard on your test device, but it will fail on others. And doing it in React Native will be even harder, because their method of doing keyboard stuff doesn't map well to how Android actually does keyboard stuff.

I want to clear the text input by providing a clear button. While iOS has support for this, I did not find any solution for android

I am totally new to React Native. I have a textinput area, I want users to clear the text they have entered completely by clicking on a button. React native provides clearButtonMode, but that is only for iOS. Looking for a solution on android devices. Here is my textinput..
<View style={editProfileStyle.textinputView}>
<TextInput
underlineColorAndroid={"rgba(0,0,0,0)"}
style={editProfileStyle.textInput}
placeholder="Enter your Name"
value={this.state.name}
onChangeText={name => this.setState({ name: name })}
/>
</View>
You have two option :
You can simply change the state.name to empty string (ie : this.setState({name : ''})
Based on RN docs , You can use clear() , You have first need to get reference to your TextInput <TextInput ref={input => { this.textInput = input }} />
and then when you need to clear you text use : this.textInput.clear()

reactNative TextInput number-pad not showing properly on android

Im using
TextInput
with
keyboardType = "number-pad"
On iOS it works fine, but on Android it shows normal keyboard, how do I make android show the number-pad keyboard, and hide the "suggest" bar
On the left the iOS showing correctly, on the right the android emulator showing wrong keyboard.
<TextInput
ref="second"
style={this.state.pos > 0 ? styles.textInputStyle :
styles.textInputNormalStyle}
keyboardType = "number-pad"
maxLength={1}
value={this.state.secondVal}
onKeyPress={(event) => {this.onChange(1, event.nativeEvent.key); }}
/>
As per the docs, you need to supply keyboardType as phone-pad.
number-pad is only for IOS
For hiding the bar try autoCorrect={false}
Edit
As per the latest docs number-pad has been added for cross-platform support
for me that keyboardType='number-pad' isn't working on Android yet even though the doc says it's available cross-platform! (which is quite weird)
so my solution was just validating the value before setting it as the input value
const onChangeText = (text) => {
setInputValue(text.replace(/\D/g, ""));
};

React Native android: How to select the next TextInput after pressing the “actionNext” keyboard button?

I use react native for Android, and I want to edit bunch of TextInput with the "next" option like here (ios version):
https://github.com/facebook/react-native/pull/2149#issuecomment-129262565
I tried:
<TextInput
style = {styles.titleInput}
returnKeyType = {"next"}
autoFocus = {true}
placeholder = "Title"
onSubmitEditing={(event) => {
this.refs.SecondInput.focus();
}}
/>
<TextInput
ref='SecondInput'
style = {styles.descriptionInput}
multiline = {true}
maxLength = {200}
placeholder = "Description" />
But the keyboard is close and open and that's annoying.
from https://stackoverflow.com/a/4999372/1456487 i understand that in native android apps i would use:
android:imeOptions="actionNext"
Is there any way to do this?
This ability introduced in react-native .22 .
https://github.com/facebook/react-native/commit/ab12189f87d8e7fd84a4f1b92fa97e8894e984c7

Categories

Resources