here is my code the input not submit to the onsubmit function
<TextInput
autoCapitalize={"none"}
style={[styles.textInput, black, semi_h4]}
returnKeyType="done"
numberOfLines={1}
blurOnSubmit={false}
onSubmitEditing={event => {
Keyboard.dismiss();
this.onSubmit();
}}
placeholder="Pin *"
placeholderTextColor={"#313131"}
ref={input => (this.c_pin = input)}
/>
please tell me how to working onsubmitediting
you have to pass text from submit event to the function,
<TextInput
onSubmitEditing={(event) => this.onSubmit(event.nativeEvent.text)}
/>
Related
I want to be able to edit or "enter" the text input field by touching its parent container instead of just the input because the input is kind of small. Is this possible? I thought about wrapping it in TouchableOpacity but im unsure how to link it to the text input.
<TouchableOpacity onPress={() => {console.log(''}}>
<View style={styles.container}>
<Text> Protein</Text>
<TextInput
style={styles.input}
onChangeText={(event) => setItem(prevState => ({ ...prevState, proteins: parseInt(event) }))}
keyboardType={'numeric'}
value={item.proteins}
placeholder='0'
/>
</View>
</TouchableOpacity>
I used a reference with useRef hook const textInput = useRef(null)
<Pressable style={styles.container} onPress={() => textInput?.current?.focus()}>
<Text> Calories</Text>
<TextInput
ref={textInput}
style={styles.input}
onChangeText={(event) => setItem(prevState => ({ ...prevState, calories: parseInt(event) }))}
keyboardType={'numeric'}
value={item.calories}
placeholder='0'
/>
</Pressable>
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 have a button and when it is pressed I would like it to open the keyboard and focus on a text input component.
For a minimal code example what I am trying to do is this-
<View>
<AddSomething
textChange={textInput => this.setState({ textInput })}
addNewItem={this.addItem.bind(this)}
textInput={this.state.textInput}
ref={not sure what goes here} //passing these as props to a text input
/>
<FloatingButton tapToAddHandler={this.onFloatingButtonPress.bind(this)} />
</View>
then some helper function where I handle the button press (this.onFloatingButtonPress)
First declare your AddSomething as below :
const AddSomething = React.forwardRef((props, ref) => (
<TextInput
ref={ref}
//your other code
/>
));
Now you can use ref and able to focus your AddSomething component as below:
<View>
<AddSomething
textChange={textInput => this.setState({ textInput })}
addNewItem={this.addItem.bind(this)}
textInput={this.state.textInput}
ref={(ref) => { this.textInputField = ref }}
/>
<FloatingButton tapToAddHandler={this.onFloatingButtonPress.bind(this)} />
</View>
Here is your onFloatingButtonPress method :
onFloatingButtonPress() {
this.textInputField.focus();
}
Proposal a react-hook version :
const inputRef = React.useRef()
return (
<TextInput ref={inputRef} />
<TouchableOpacity onPress={() => inputRef.current.focus()}>
<Text>Press</Text>
</TouchableOpacity>
)
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 have an issue with onChangeText in password input. Detail explanation for what i want to do: I want to disable submit button initially and when both input field filled then enable submit button. If you have any other ways to solve this please share.
<InputGroup style={styles.inputBox}>
<Icon name='ios-person' style={{color: 'white'}}/>
<Input placeholder='Email' style={styles.input}
placeholderTextColor='rgba(255, 255, 255, 0.6)'
value={this.state.username}
onChangeText={(text) => this.setState({username: text})}
onChange={this.onInputChange} />
</InputGroup>
<InputGroup style={styles.inputBox}>
<Icon name='ios-unlock' style={{color: 'white'}}/>
<Input placeholder='Password' style={styles.input}
secureTextEntry={true}
placeholderTextColor='rgba(255, 255, 255, 0.6)'
value={this.state.password}
onChangeText={(text) => this.setState({password: text})}
onChange={this.onInputChange} />
</InputGroup>
<Button block bordered success style={styles.submitButton} onPress={this.onSignIn} disabled={this.state.submitButtonFlag}>
Sign In
</Button>
code for onChangeInput:
onInputChange() {
if (this.state.username != null && this.state.password != null) {
console.log("this.state.submitButtonFlag: ");
this.setState = {submitButtonFlag: false};
console.log(this.state.submitButtonFlag);
}
}
Two errors:
reference with correct this scope: onChange={() => this.onInputChange()} />
setState is a function: this.setState({submitButtonFlag: false});
You need to bind your method that you are calling or use callback like #zvona mentioned
First way
onChange={this.onInputChange.bind(this)}
Second Way
onChange={() => this.onInputChange()}