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}
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 search it every day why it doesn't work properly.When I type anything onto TextInput's placeholder it starts with empty space.I want to start without space.I also tried trim() method.It wasn't helpful.How should I fix my error? Thanks in advance!
<TextInput value={this.state.key} onChangeText={(text) =>{this.setState({key:text.trim()}) ; console.warn('key: '+this.state.key)}}/>
Try this :
<TextInput
value={this.state.key}
keyboardType="default"
onChangeText={key => this.setState({ key })}
/>;
UPDATED ANSWER :
_replaceSpace(str) {
return str.replace(/\u0020/, '\u00a0')
}
<TextInput
style={{ textAlign: "right" }}
value={this._replaceSpace(this.state.text)}
onChangeText={text => this.setState({ text: text })}
/>;
This is the text input that I am using, I want the input field to be disabled after entering a value.I tried using editable props, but it did not help.
I am completely new to react native, please help with an example.
<View style={editProfileStyle.textinputView}>
<TextInput
style={editProfileStyle.textInput}
placeholder="Enter your Specialization"
value={this.state.subQualification}
onChangeText={subQualification => this.setState({ subQualification: subQualification })}
/>
</View>
As per the question, since the field should get disabled when it has some value:
<View style={editProfileStyle.textinputView}>
<TextInput
editable={this.state.subQualification.length === 0}
style={editProfileStyle.textInput}
placeholder="Enter your Specialization"
value={this.state.subQualification}
onChangeText={subQualification => this.setState({ subQualification: subQualification })}
/>
</View>
using check in your editable prop of
editable={this.state.subQualification.length === 0} will make field editable when nothing in present in the field
Try to add state and modify your textInput props like this:
state ={
textDisable: true
}
render() {
return (
<View style={editProfileStyle.textinputView}>
<TextInput
style={editProfileStyle.textInput}
placeholder="Enter your Specialization"
value={this.state.subQualification}
onChangeText={subQualification => this.setState({ subQualification: subQualification })}
editable={this.state.textDisable}
onEndEditing={() => this.setState({textDisable: false})}
/>
</View>
);
}
}
after onsubmit the input should be disable.
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
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}
/>