I'd like some help.
I used the package #react-native-community/datetimepicker this way :
<View>
<DatePicker
date={this.state.datetimeS}
mode="datetime"
format="YYYY-MM-DD HH:mm"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
hideText={true}
showIcon={true}
onChange={(datetime) => {
this.setDateTimeS(datetime);
}}
/>
<Text style={styles.textsmall}>Select a date
</Text>
</View>
IThat's cool but when I choose the date, I want it to replace the text "select a date" (only when the date is picked)
Can you help me to do that ? Thank you :)
Maybe ask conditionally? Try something like this:
<View>
<DatePicker
date={this.state.datetimeS}
mode="datetime"
format="YYYY-MM-DD HH:mm"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
hideText={true}
showIcon={true}
onChange={(datetime) => {
this.setDateTimeS(datetime);
}}
/>
{this.state.datetimeS == null ? <Text style={styles.textsmall}>Select a date
</Text> : <Text> {this.state.datetimeS} </Text> }
</View>
This will check if your date state is already filled with a date value. For this to work the default value for datetimeS has to be null. If it is Null so no date is picked it shows the text, if a date is picked it should display the date.
If your default state for datetimeS is for example like this:
state={ datetimeS: ""}
then you can check it like this:
{this.state.datetimeS.trim() == "" ? <Text style={styles.textsmall}>Select a date
</Text> : <Text> {this.state.datetimeS} </Text> }
Use the state to change it. Use dateTimeS in state and update it at onChange function?
<Text style={styles.textsmall}>{this.state.dateTimeS === undefined ? 'Select a date' : 'other text'}</Text>
Related
I want the state value { province } to be a different color that is set in style = {[ styles.text ]}.
Can anybody give me any ideas on how to do this?
<Text style = {[ styles.text ]}>
Province - { province }
</Text>
React Native supports nested Text components. You can do that like:
<Text style = {[ styles.text ]}>
Province -
<Text style={{color: /ANY COLOR/}} >
{ province }
</Text>
</Text>
Hope this works for you.
You have to put province in its own text tag to achieve that. Example :
<Text style = {[ styles.text ]}>
Province - <Text style={styles.YourStyle}>{province}</Text>
</Text>
Instead of wrapping all the text in the same , use a View and put both elements, each with different styling classes:
<View style={{flexDirection:'row'}}>
<Text style={styles.text}>Province - </Text>
<Text style={styles.otherText}>{province}</Text>
</View>
I am using formik and yup to validate inputs of form in React Native. I validated everything except Date Of Birth which uses useRef:
const dob = useRef("Birth Date");
{/* Date Of Birth */}
<View>
<TouchableOpacity onPress={showDatepicker}>
<View>
<Text>{dob.current}</Text>
</View>
</TouchableOpacity>
<View>
{showDOB && (
<View style={{ marginBottom: 25 }}>
<DateTimePicker testID="dateTimePicker" value={date} mode="date" is24Hour={false} display="spinner" onChange={onChange} dateFormat="day month" />
</View>
)}
</View>
</View>
<Text style={{ color: "#FF6B6B" }}>{formikProps.errors.dob}</Text>
In validationSchema:
dob: yup.string().required("required"),
but I get following error:
dob must be a `string` type, but the final value was : `{"current": "\Birth Date\"}`
How do I resolve this issue?
Thank you in advance.
I don‘t know yup but can‘t you just define current instead of dob?
dob:{ current: yup.string().required("required") }
You can validate objects with yup.object().shape();
So for instance validating an object with current that is a string would be:
const dob = { current: 'hello' }
const schema = yup.object().shape({
current: yup.string().required(),
});
schema.isValid(dob) // Promise
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.
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}