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 })}
/>;
Related
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'm using TextInput to allow only numbers using state, it works on android but not on iOS. Here's how I'm using state to allow only numbers.
handleInputChange = (text) => {
if (/^\d+$/.test(text) || text === '') {
this.setState({
text: text
});
}
}
my render method
render = () => {
return (
<View style={{
flex: 0,
flexDirection: 'row',
alignItems: 'flex-end',
marginTop: 50
}}>
<View style={{ flex: 0, marginLeft: 10 }}>
<Text style={{ fontSize: 20}}>$</Text>
</View>
<View style={{flex: 1,}}>
<TextInput
onChangeText={this.handleInputChange}
value={this.state.text}
underlineColorAndroid='transparent'
autoCorrect={false}
spellCheck={false}
style={{ paddingLeft: 5, fontSize: 20 }} />
</View>
</View>
);
}
This only works in Android, I guess because the state has changed react doesn't update the ui.
pls try this:
keyboardType='numeric' in the tag TextInput
when you prove don't put the numbers with the keyboard of your pc, pls use the keyboard of the emulator
if still not working put this textContentType='telephoneNumber'
As Ravi Rupareliya said this's a bug, which TextInput doesn't update, when the state text is shorter than the current TextInput value. Seems like the bug has been fixed in react-native 0.57.RC. For now I'm using the following fix.
handleInputChange = (text) => {
const filteredText = text.replace(/\D/gm, '');
if(filteredText !== text) {
// set state text to the current TextInput value, to trigger
// TextInput update.
this.setState({ text: text });
// buys us some time until the above setState finish execution
setTimeout(() => {
this.setState((previousState) => {
return {
...previousState,
text: previousState.text.replace(/\D/gm, '')
};
});
}, 0);
} else {
this.setState({ text: filteredText });
}
}
React native not provided keyboardType which remove punctuation from keyboard. You need to use regular expression with replace method to remove punctuation from text and set keyboardType = 'numeric'.
Regular Expression
/[- #*;,.<>{}[]/]/gi
Example code
onTextChanged(value) {
// code to remove non-numeric characters from text
this.setState({ number: value.replace(/[- #*;,.<>\{\}\[\]\\\/]/gi, '') });
}
Please check snack link
https://snack.expo.io/#vishal7008/1e004c
Worked for me:
<TextInput
...
textContentType='telephoneNumber'
dataDetectorTypes='phoneNumber'
keyboardType='phone-pad'
/>
While having input from user you can change the keyBoard type for that particular text input box like this i.e. numeric or alphabatic etc...
<TextInput>
//contains some code
keyboardType="Numeric"
</TextInput>
<TextInput>
keyboardType="number-pad"
</TextInput>
onChangeText={value => setuserPrimaryPhone(value.replace(/[^0-9]/g, ''))}
javascript simple method replace(/[^0-9]/g, ''))}
I am using Custom Keyboard. In that I am using CustomTextInput in place of TextInput. All works well but I want to focus input field in function.
<CustomTextInput customKeyboardType="hello"
onFocus={() => this.onFocus('fieldname')}
selectTextOnFocus={ true }
ref="TextInput"
underlineColorAndroid = 'transparent'
onChangeText={(value) => this.setState({fieldname:this.onChange(value)})}
/>
In Function something like below :-
function () {
Keyboard.dismiss();
this.refs.TextInput.focus();
}
But I am getting an error :- this.refs.TextInput.focus is not a function.
Basically my focus() function is not working.
Please help!
I tried this.refs['TextInput'].focus() and it works for me. You can write a function for Textinput's onFocus and within this function dimiss default keyboard, lunch your customized keyboard and focus again on your TextInput. I hope it will help.
This is my code:
<TextInput
style={{ height: 40, width: 200 }}
ref="TextInput"
/>
<TouchableOpacity
onPress={() => { (this.refs['TextInput'] as any).focus() }}>
<Text>Press to focus</Text>
</TouchableOpacity>
i want to build a super simple chat.
To do that a got an TextInput and a TouchableOpacity to send the message and
clear the Textinput.
Problem: When i send the message the Textinput is cleared BUT when start writing again the old text is copied in the Textinput again (+ the new character).
However if the keyboard is dismissed after sending and clearing everything works
perfectly fine.
Is there any way to clear the TextInput completly with a TouchableOpacity?
Below is the code and a few tries by myself but none of them worked.
Thanks in advance,
Maffinius
<View style={{flexDirection: 'row'}}>
<TextInput
placeholder="Schreibe eine Nachricht"
onChangeText={(text) => this.setState({newMsg : text})}
style={{width: 300}}
ref={'ref1'}
/>
<TouchableOpacity
onPress={this.sendMessage}
>
<Text> --> </Text>
</TouchableOpacity>
</View>
sendMessage = () => {
this.state.MsgData.push({msg: this.state.newMsg, id: this.props.global.userId, timestamp: 8888});
this.refs['ref1'].clear();
this.setState({newMsg: ""});
//this.refs['ref1'].setNativeProps({text: ''})
//Keyboard.dismiss();
}
List item
Use defaultValue prop for setting the value of the state (https://facebook.github.io/react-native/docs/textinput.html#defaultvalue)
<TextInput
placeholder="Schreibe eine Nachricht"
onChangeText={(text) => this.setState({newMsg : text})}
style={{width: 300}}
ref={(input) => this.ref1 = input}
defaultValue={this.state.newMsg}
/>
See this example for full implementation: https://snack.expo.io/SkuH8hKPb
I found example code on a facebook React Native page which shows how to use setNativeProp to clear text on a click but I can't see how to do it with multiple text boxes. Here is the code:
var App = React.createClass({
clearText() {
this._textInput.setNativeProps({text: ''});
},
render() {
return (
<View style={styles.container}>
<TextInput ref={component => this._textInput = component}
style={styles.textInput} />
<TouchableOpacity onPress={this.clearText}>
<Text>Clear text</Text>
</TouchableOpacity>
</View>
);
}
});
The ref seems to be fixed in the function so will always target the same TextInput box. How can I alter the function to target any TextInput box I indicate?
This should work. Notice that the ref on the TextInput needs to be the one you call from the clearText functino.
var App = React.createClass({
clearText(fieldName) {
this.refs[fieldName].setNativeProps({text: ''});
},
render() {
return (
<View style={styles.container}>
<TextInput ref={'textInput1'} style={styles.textInput} />
<TouchableOpacity onPress={() => this.clearText('textInput1')}>
<Text>Clear text</Text>
</TouchableOpacity>
<TextInput ref={'textInput2'} style={styles.textInput} />
<TouchableOpacity onPress={() => this.clearText('textInput2')}>
<Text>Clear text</Text>
</TouchableOpacity>
</View>
);
}
});
Updated my answer to clear different fields.
You can also use something like this to clear the text of TextInput.
clearText(fieldName) {
this.refs[fieldName].clear(0);
},