I want to make a text input readonly in my RN application. I tried to set an editable prop but it did not work properly. How can I achieve this?
<DetailInput
inputStyle={styles.inputStyles}
height={120}
width={width - 40}
multiline={true}
numberOfLines={6}
underlineColorAndroid="transparent"
maxLength={500}
editable={!userRegistrationInProgress}
onChangeText={value => this.statementChangedHandler(value)}
/>
const detailInput = props => {
return (
<TextInput
{...props}
style=
{[
props.inputStyle,
{ height: props.height, width: props.width},
!props.valid && props.touched ? props.invalidInput : null
]}
/>
);
}
export default detailInput;
<TextInput
value = "Read Only"
editable = {false}
/>
Set editable false to read only TextInput.
A better readonly Text input:
<View pointerEvents="none">
<TextInput value="I am read only" editable={false} />
</View>
https://facebook.github.io/react-native/docs/view#pointerevents
Related
I have a number of TextInput in my react-native application and I want that if user clicks on next key, the next input must be focused. I am trying to do this with returnKeyType prop passed to all the TextInput. However this doesn't work as intended ,i.e. next input is not focused. And my code for same looks like
<TextInput
ref={firstInputForDaysInterestTextInputRef}
value={closingCosts.firstInputForDaysInterest}
onChangeText={value =>
onStateChange('firstInputForDaysInterest', value)
}
onEndEditing={event =>
onEndEditing(
'firstInputForDaysInterest',
event.nativeEvent.text,
)
}
placeholderTextColor={colors.placeholderColor}
placeholder={constants.common.zeroPlaceholder}
autoCapitalize="none"
returnKeyType="next"
onFocus={() => onFocus(elementName)}
keyboardType="decimal-pad"
style={[
styles.textInput,
styles.textInputWidth,
styles.textInputMargin,
]}
/>
The workaround that I thought was passing ref and then focusing the next input onEndEditing, but if I does this the textinput will not be closed when I tap outside the textInput. So how can I make my text input to focus on next one?
You can use onSubmitEditing prop to focus the next input for example:
const firstInputForDaysInterestTextInputRef = React.useRef()
const secondInputForDaysInterestTextInputRef = React.useRef()
return (
<View style={styles.container}>
<TextInput
ref={firstInputForDaysInterestTextInputRef}
placeholderTextColor={'gray'}
placeholder={'first'}
autoCapitalize="none"
returnKeyType="next"
keyboardType="decimal-pad"
onSubmitEditing={()=>secondInputForDaysInterestTextInputRef.current?.focus()}
style={[
styles.textInput,
styles.textInputWidth,
styles.textInputMargin,
]}
/>
<TextInput
ref={secondInputForDaysInterestTextInputRef}
placeholderTextColor={'gray'}
placeholder={'second'}
autoCapitalize="none"
returnKeyType="next"
onFocus={() => alert('I am focused !')}
keyboardType="decimal-pad"
style={[
styles.textInput,
styles.textInputWidth,
styles.textInputMargin,
]}
/>
</View>
);
Example on Snack
If you want to hide the textinput (hide keyboard) when pressing somewhere else in the app, wrap it it like this for example:
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.container}>
<TextInput />
</View>
</TouchableWithoutFeedback>
Don't forget to import TouchableWithoutFeedback and Keyboard from 'react-native'
I've been trying to get my TextInput to focus (open keyboard) when I tap anywhere within the (gray) multiline box, but it is only detecting taps on lines with text (or the placeholder).
Is there any way to force the TextInput to focus when I click anywhere on the gray area?
<ScrollView style={{ flex: 1}}>
<View style = {Style.dropdownField}>
<Dropdown
label={'Motivo'}
data={this.props.remiseExcusesData}
value={this.state.remiseExcuses.value}
onChangeText={(value,index, data)=> this.setState({remiseExcuses:data[index]})}
/>
</View>
<View style = {{ height:150, marginHorizontal:20, backgroundColor:'#f9f9f9', marginTop:20}}>
<TextInput
style={Style.minitextInput}
placeholder={'Escribir motivo'}
textAlign={'left'}
autoCorrect={false}
autoCapitalize={'none'}
underlineColorAndroid='transparent'
multiline
onChangeText={(text) => this.setState({motive:text}) }
value={this.state.motive}
onFocus={() => console.log('Fire only on tap')}
/>
</View>
</ScrollView>
You can use this for handle the focus of gray box.
<TouchableOpacity style = {{ height:150, marginHorizontal:20, backgroundColor:'#f9f9f9', marginTop:20}} onPress={this.onPressGrayBox}>
<TextInput
ref="textInput"
style={{ height: 150, textAlignVertical: 'top' }}
placeholder={'Escribir motivo'}
textAlign={'left'}
autoCorrect={false}
autoCapitalize={'none'}
underlineColorAndroid='transparent'
multiline
onChangeText={(text) => this.setState({motive:text}) }
value={this.state.motive}
/>
</TouchableOpacity>
declare the method to handle the action, this will help to set textinput focus automatically.
onPressGrayBox=()=>{
this.refs.textInput.focus()
}
This steps helps me, please use
You can handle something like
<View style = {{ height:150, marginHorizontal:20, backgroundColor:'#f9f9f9', marginTop:20}}>
<TextInput
style={{ height: 150, textAlignVertical: 'top' }}
placeholder={'Escribir motivo'}
textAlign={'left'}
autoCorrect={false}
autoCapitalize={'none'}
underlineColorAndroid='transparent'
multiline
onChangeText={(text) => this.setState({motive:text}) }
value={this.state.motive}
onFocus={() => console.log('Fire only on tap')}
/>
</View>
Is there is any way to set again the text value in textinput of react-native ?
Like below , this is i'm doing :
i want to set my power translator text value in textinput.How can i do this ?
<TextInput
style={{color:'black',width:width-60, borderColor: 'black'}}
placeholder="Ask your Question ?"
underlineColorAndroid='black'
autoCapitalize="words"
placeholderTextColor="black"
keyboardType = "default"
error = {this.state.errpwd}
onBlur={() => this.setState({errpwd:""})}
onChangeText={ (questionText) => this.setState({input: questionText}) }/>
<View style={styles.section}>
<PowerTranslator style={styles.p} text={'user input: ' + this.state.input} />
</View>
Add value prop of to your TextInput
value={this.state.input}
onContentSizeChange doesn't seem to fire properly on Android. Event is fired on mount, but isn't fired on text height change. Identical code works fine for iOS:
<TextInput
editable = {true}
multiline = {true}
[...]
onContentSizeChange={(event) => {
this.setState({height: event.nativeEvent.contentSize.height});
}}
style={{height: Math.max(35, this.state.height)}}
/>
https://github.com/facebook/react-native/issues/6552#issuecomment-269989962
In Android onContentSizeChange is called only once
use onChange instead of onContentSizeChange.
Code
<TextInput
editable = {true}
multiline = {true}
[...]
onChange={(event) => {
this.setState({height: event.nativeEvent.contentSize.height});
}}
style={{height: Math.max(35, this.state.height)}}
/>
Setting the value after each change fixed the problem for me
<TextInput
multiline={true}
onChangeText={(text) => {
this.setState({text});
}}
onContentSizeChange={(event) => {
this.setState({height: event.nativeEvent.contentSize.height});
}}
style={{height: this.state.height}}
value={this.state.text}
/>
I have a TextInput. Instead of showing the actual text entered, when the user enters text I want it to show the password dots / asterisks (****) you typically see in apps when typing a password. How can I do this?
<TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
onChangeText={(text) => this.setState({input: text})}
/>
When this was asked there wasn't a way to do it natively, however this will be added on the next sync according to this pull request.
Here is the last comment on the pull request - "Landed internally, will be out on the next sync"
When it is added you will be able to do something like this
<TextInput secureTextEntry={true} style={styles.default} value="abc" />
refs
May 2018
react-native version 0.55.2
This works fine:
secureTextEntry={true}
And this does not work anymore:
password={true}
Just add the line below to the <TextInput>
secureTextEntry={true}
Add
secureTextEntry={true}
or just
secureTextEntry
property in your TextInput.
Working Example:
<TextInput style={styles.input}
placeholder="Password"
placeholderTextColor="#9a73ef"
returnKeyType='go'
secureTextEntry
autoCorrect={false}
/>
I had to add:
secureTextEntry={true}
Along with
password={true}
As of 0.55
An TextInput must include secureTextEntry={true}, note that the docs of React state that you must not use multiline={true} at the same time, as that combination is not supported.
You can also set textContentType={'password'} to allow the field to retrieve credentials from the keychain stored on your mobile, an alternative way to enter credentials if you got biometric input on your mobile to quickly insert credentials. Such as FaceId on iPhone X or fingerprint touch input on other iPhone models and Android.
<TextInput value={this.state.password} textContentType={'password'} multiline={false} secureTextEntry={true} onChangeText={(text) => { this._savePassword(text); this.setState({ password: text }); }} style={styles.input} placeholder='Github password' />
A little plus:
version = RN 0.57.7
secureTextEntry={true}
does not work when the keyboardType was "phone-pad" or "email-address"
<TextInput
placeholderTextColor={colors.Greydark}
placeholder={'Enter Password'}
secureTextEntry={true} />
<TextInput
placeholder="Password"
secureTextEntry={true}
style={styles.input}
onChangeText={setPassword}
value={password}
/>
You can get the example and sample code at the official site, as following:
<TextInput password={true} style={styles.default} value="abc" />
Reference: http://facebook.github.io/react-native/docs/textinput.html
If you added secureTextEntry={true} but did not work then check the multiline={true} prop, because if it is true, secureTextEntry does not work.
You need to set a secureTextEntry prop to true and for better user experience you can use an eye icon to show the actual password
import {TextInput, Card} from 'react-native-paper';
const [hidePass, setHidePass] = useState(true);
const [password, setPassword] = useState('');
<TextInput
label="Password"
outlineColor="black"
activeOutlineColor="#326A81"
autoCapitalize="none"
returnKeyType="next"
mode="outlined"
secureTextEntry={hidePass ? true : false}
selectionColor="#326A81"
blurOnSubmit={false}
onChangeText={password => updateState({password})}
right={
<TextInput.Icon
name="eye"
onPress={() => setHidePass(!hidePass)}
/>
}
/>
You need to set a secureTextEntry prop to true
<TextInput
placeholder="Re-enter password"
style={styles.input}
secureTextEntry={true}
value={confirmPsw}
onChangeText={setconfirmPsw}
/>
<TextInput
secureTextEntry
placeholder="password" placeholderTextColor="#297542"
autoCorrect={false} style={mystyles.inputStylee}
/>
You can simply add the secureTextEntry prop to TextInput and omit its value. By default, it is set to true. To make it to false do this secureTextEntry={false}
const [password, setPassword] = useState('');
const [passwordVisibility, setPasswordVisibility] = useState(true);
const [rightIcon, setRightIcon] = useState('eye');
const [rightIconColor, setRightIconColor] = useState('#0C8A7B');
const handlePasswordVisibility = () => {
if (rightIcon === 'eye') {
setRightIcon('eye-slash');
//setRightIconColor('#FF0000')
setPasswordVisibility(!passwordVisibility);
} else if (rightIcon === 'eye-slash') {
setRightIcon('eye');
//setRightIconColor('#0C8A7B')
setPasswordVisibility(!passwordVisibility);
}
};
<TextInput
style={{
height: 45,
margin: 12,
padding: 10,
backgroundColor: 'white',
borderRadius: 10
}}
name="password"
placeholder="Enter password"
autoCapitalize="none"
autoCorrect={false}
secureTextEntry={passwordVisibility}
value={password}
enablesReturnKeyAutomatically
onChangeText={text => setPassword(text)}
/>
<TouchableOpacity
onPress={handlePasswordVisibility}>
<Icon name={rightIcon} size={25} color={rightIconColor} />
</TouchableOpacity>
</View>
**I Hope this will help you**