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)}
/>
before installing Formik, my input looked like so:
const [search, setSearch] = useState('');
....
<View style={styles.profileEditContainer__top}>
<TextInput
style={styles.profileEditContainer__form}
autoCapitalize="none"
placeholder="Enter what you want to create.."
placeholderTextColor={Colors.formPlaceHolderDefault}
name="search"
type="search"
value={search}
onChangeText={(e) => setSearch(e)}
autoCorrect={false}
defaultValue={search}
/>
<Button
disabled={!search}
title="Create"
onPress={(e) => {
createNewCar(e);
}}
/>
</View>
in onChangeText, I would set every character I typed to a state prop called search. With every key that I typed, an API called would be made to get some data from the db.
for example:
if I typed h into the input, the db would return 2 cars honda, hyundai
I read that Formik can simplify a lot of the form setup in React, so I downloaded it, however, the handleChange prop from Formik wants to keep track of values.search
<Formik
initialValues={{
search,
}}
onSubmit={(values) => {
console.log('values', values);
}}>
{({ handleChange, handleSubmit, values }) => (
<View style={styles.profileEditContainer__top}>
<TextInput
style={styles.profileEditContainer__form}
autoCapitalize="none"
placeholder="Enter what you want to create.."
placeholderTextColor={Colors.formPlaceHolderDefault}
autoCorrect={false}
value={values.search}
onChangeText={(e) => {
handleChange(values.search);
setSearch(e);
}}
/>
<Button
disabled={!search}
title="Create"
onPress={handleSubmit}
/>
</View>
)}
</Formik>
Now I can't type into the form because value is pointing at values.search instead of search like it did originally.
Question
How do I fire setSearch in onChangeText but also add search into the formik values prop?
you can make use of setFieldValue('search', e.target.value) instead of handleChange() change the code to the following:
<Formik
initialValues={{
search,
}}
onSubmit={(values) => {
console.log('values', values);
}}>
{({ handleChange, handleSubmit, values, setFieldValue }) => (
<View style={styles.profileEditContainer__top}>
<TextInput
style={styles.profileEditContainer__form}
autoCapitalize="none"
placeholder="Enter what you want to create.."
placeholderTextColor={Colors.formPlaceHolderDefault}
autoCorrect={false}
value={values.search}
onChangeText={(e) => {
//handleChange(values.search);
setFieldValue('search', e.target.value)
setSearch(e);
}}
/>
<Button
disabled={!search}
title="Create"
onPress={handleSubmit}
/>
</View>
)}
</Formik>
I have a screen it has text input's. I am trying to insert the TextInput value into the database and retrieve the data from database and display on the TextInputwithout any problem. But the problem is to edit the data on the TextInput. I try to edit the TextInputvalue the text cannot be changed.
if (this.state.mode == 'edit') {
customer.updateCustomer(JSON.stringify(customerregVOObj));
} else {
customerregVOObj._id = 'abc';
customer.createCustomer(customerregVOObj);
}
updateCustomer = () => {
customerregVOObj.shopName = this.state.shopName;
}
<TextInput
underlineColorAndroid='transparent' style={styles.input}
returnKeyType={"next"} autoFocus={true} placeholder="Shop Name"
onChangeText={(text) => this.setState({ shopName: text })}
value={this.state.shopDetail.shopName}
/>
this.state.mode == 'new' ? <Button onPress={this.updateCustomer} title="Submit" /> :
<Button onPress={this.updateCustomer} title="Update" />
You are passing the wrong state in value. Kindly replace below code:
<TextInput
underlineColorAndroid='transparent' style={styles.input}
returnKeyType={"next"} autoFocus={true} placeholder="Shop Name"
onChangeText={(text) => this.setState({ shopName: text })}
value={this.state.shopName}
/>
I'm using native-base's form to handle user's username and password.
When I press next or go from keyboard, it doesn't move cursor to the next or doesn't submit the inputs. How can we fix this?
import { Form } from 'native-base';
<Form style={styles.formStyle}>
<AuthFieldInput
placeholder="Username or Email"
value={this.state.username}
onChangeText={username => this.setState({username})}
returnKeyType="next"/>
<AuthFieldInput
placeholder="Password"
value={this.state.password}
onChangeText={password => this.setState({password})}
secureTextEntry
returnKeyType="go"/>
</Form>
Here is <AuthField> render function
import { Item, Label, Input, Text } from 'native-base';
<Item>
<Input
value={value}
onChangeText={onChangeText}
placeholder={placeholder}
autoCorrect={false}
secureTextEntry={secureTextEntry}
returnKeyType={returnKeyType}
/>
</Item>
Thank you!
I was getting error as "_this2.refs.password.focus" is not a function on onSubmitEditing of TextInput.
This is how I fixed it:
Upgraded package for native-base "^2.4.2” to native-base "^2.7.1”.
Sharing my sample code below:
<Item floatingLabel>
<Label>Mobile Number</Label>
<Input
onChangeText = {(phone) => this.setState({phone})}
value = {this.state.phone}
autoCapitalize="none"
keyboardType='numeric'
returnKeyType={"next"}
maxLength = {10}
onSubmitEditing={(event) => this._password._root.focus()}
/>
</Item>
<Item floatingLabel>
<Label>Password</Label>
<Input
getRef={(c) => this._password = c}
onChangeText = {(password) => this.setState({password})}
value={this.state.password}
autoCapitalize="none"
returnKeyType={"done"}
secureTextEntry={this.state.hiddenPassword}
onSubmitEditing = {this.handleLogin}
/>
</Item>
<TouchableOpacity>
<Button style={styles.Button}
onPress={this.handleLogin.bind(this)}>
<Text style={styles.buttonText}>
LOGIN
</Text>
</Button>
</TouchableOpacity>
This is basically a TextInput Wrapper from React Native, if what you want to do is that when you press the "next" button, go to the other input you should do the following.
// <AuthField> render function
<Item>
<Input
value={value}
onChangeText={onChangeText}
placeholder={placeholder}
autoCorrect={false}
secureTextEntry={secureTextEntry}
returnKeyType={returnKeyType}
{ ...this.props }
/>
</Item>
And in your Component you can use it in this way:
// Other render
<Form style={styles.formStyle}>
<AuthFieldInput
placeholder="Username or Email"
value={this.state.username}
onChangeText={username => this.setState({username})}
returnKeyType="next"
onSubmitEditing={() => {
this.refs.passwowrd.focus();
}}
/>
<AuthFieldInput
ref='password'
placeholder="Password"
value={this.state.password}
onChangeText={password => this.setState({password})}
secureTextEntry
returnKeyType="go"
/>
</Form>
Update:
Please check the documentation about this feature https://facebook.github.io/react-native/docs/textinput.html#onsubmitediting
It seems that those return types do not do that. This question was asked before also:
React Native: How to select the next TextInput after pressing the "next" keyboard button?
Maybe it can be of some help to you!
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**