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}
/>
Related
I have a form where I am using KeyboardAvoidingView and ScrollView so that when a user clicks on an input field the screen will scroll to that particular field
Within my form I have an input field that is searchable and I am using a FlatList to display the results for the user to choose from. Currently I am getting the error:
VirtualizedLists should never be nested inside plain ScrollViews
I've looked at many posts around this but am yet to find a solution (unless I've missed something):
1 - How to put FlatList inside of the ScrollView in React-native?
2 - FlatList inside ScrollView doesn't scroll
3 - How to make a FlatList scrollable inside of a ScrollView in react native?
This is what I have so far:
export const SignUpMember = ({navigation}) => {
const renderHeader = formikProps => {
return (
<>
<FormField
keyboardType={'default'}
fieldName={'firstName'}
label={'First Name'}
/>
<FormField
keyboardType={'default'}
fieldName={'lastName'}
label={'Last Name'}
/>
<FormField
onChangeText={text => {
formikProps.values.clubName = text;
searchItems(text);
}}
value={formikProps.values.clubName}
keyboardType={'default'}
fieldName={'clubName'}
label={'Club Name'}
placeholder={'Search Club By Name...'}
/>
</>
);
};
const renderFooter = formikProps => {
return (
<>
<FormField
keyboardType={'phone-pad'}
fieldName={'telephone'}
label={'Telephone'}
/>
<FormField
keyboardType={'email-address'}
fieldName={'email'}
label={'Email'}
/>
<FormField
keyboardType="default"
secureTextEntry={true}
fieldName={'password'}
label={'Password'}
type={'password'}
/>
<FormField
keyboardType="default"
secureTextEntry={true}
fieldName={'passwordConfirmation'}
label={'Confirm Password'}
type={'password'}
/>
<Button
mt="2"
bg="brand.blue"
type="submit"
onPress={formikProps.handleSubmit}>
Sign Up
</Button>
</>
);
};
return (
<KeyboardAvoidingView
keyboardVerticalOffset={headerHeight}
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<ScrollView
_contentContainerStyle={styles.container}
nestedScrollEnabled={true}>
<Box p="1" py="8" w="90%" maxW="290">
<VStack space={3} mt="5">
<Formik
initialValues={initialFormValues}
onSubmit={values => handleFormSubmit(values)}
validationSchema={userValidationSchema}>
{formikProps => (
<View>
<FlatList
nestedScrollEnabled={true}
data={flatListData}
renderItem={({item}) => (
<Pressable
onPress={() => {
formikProps.values.clubName = item.name;
setFlatListData([]);
}}>
<Text style={styles.flatList}>{item.name}</Text>
</Pressable>
)}
keyExtractor={item => item.name}
ListHeaderComponent={renderHeader(formikProps)}
ListFooterComponent={renderFooter(formikProps)}
/>
</View>
)}
</Formik>
</VStack>
</Box>
</ScrollView>
</KeyboardAvoidingView>
);
};
export default SignUpMember;
How can I piece this together?
I have created my own Texfield which I use throughout my app. I would now like to create a Textfield which has a predefined format of the input. So for example as seen below in the image I want the text to always have the format dd/mm/yyyy and that the input jumps to the month when the date is filled in.
This image is an example of what I try to accomplish:
This is my custom Textfield which is basically the native TextInput with some styling.
//Input.tsx
interface Props {
errorMessage?: string
placeholder: string
value: string
onChange: (text: string) => void
}
const Input: React.FC<Props> = ({
errorMessage,
placeholder,
onChange,
value,
}) => {
const [focused, setFocused] = useState(false)
return (
<Box marginVertical="xs">
<Box
borderColor={errorMessage ? 'error' : focused ? 'primary' : 'inputBG'}
paddingVertical="inputS"
paddingHorizontal="inputM"
borderRadius="s"
borderWidth={2}
backgroundColor={errorMessage ? 'inputErrorBG' : 'inputBG'}
>
<TextInput
placeholder={placeholder}
onFocus={() => setFocused(true)}
onBlur={() => setFocused(false)}
onChangeText={onChange}
value={value}
/>
</Box>
{errorMessage ? <Text color="error">{errorMessage}</Text> : null}
</Box>
)
}
I found this package which provides the component MaskInput which makes it possible to define masks to format the input.
Below I extended my custom Input with the variant props to display the MaskInput when the variant is "date".
import MaskInput, { Masks } from 'react-native-mask-input'
{variant === 'date' ? (
// #ts-ignore
<MaskInput
placeholder="dd/mm/yyyy"
mask={Masks.DATE_DDMMYYYY}
onFocus={() => setFocused(true)}
onBlur={() => setFocused(false)}
onChangeText={(formatted) => onChange(formatted)}
value={value}
keyboardType={keyboardType}
/>
) : (
<TextInput
placeholder={placeholder}
onFocus={() => setFocused(true)}
onBlur={() => setFocused(false)}
onChangeText={onChange}
value={value}
keyboardType={keyboardType}
/>
)}
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>
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()}