When I give an initial date it is marked for all months on the calendar how can I avoid that ?
<Agenda
items={items}
loadItemsForMonth={loadItems}
current={'2022-10-28'}
showClosingKnob={true}
renderItem={renderItem}
theme={{
dotColor: "#22F460",
}}
markingType={'custom'}
markedDates={marked}
/>
Wrap Agenda with CalendarProvider and add date prop = ""
<CalendarProvider date="">
<Agenda
items={items}
loadItemsForMonth={loadItems}
...
/>
</CalendarProvider>
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 am currently making a mobile app and part of it is collecting user data. At the minute I am stuck on getting the DatePicker to show on screen once the text field has been clicked on. I have tried to use the onFocus prop but it does not seem to be working and its not throwing any errors in the console. Here is the code that i have tried using:
const showDatePicker = () => {
return(
<DateTimePicker
value={date}
mode='date'
is24Hour={true}
display="spinner"
onChange={onChange}
/>
)
}
<View style={styles.inputContainer}>
<FontAwesome name="user-circle-o" color={'#808080'} size={20}/>
<TextInput onFocus={() => showDatePicker()} style={styles.input} placeholder="Date Of Birth"
/>
</View>
To give some additional context to the problem I am using a modal which acts as a form for collecting the data. Any help or tips appreciated.
You can wrap the TextInput with a <Pressable />.
<Pressable onPress={() => showDatePicker()}>
<TextInput />
</Pressable>
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'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>
I want to make a text input readonly in my RN application. I tried to set an editable prop but it did not work properly. How can I achieve this?
<DetailInput
inputStyle={styles.inputStyles}
height={120}
width={width - 40}
multiline={true}
numberOfLines={6}
underlineColorAndroid="transparent"
maxLength={500}
editable={!userRegistrationInProgress}
onChangeText={value => this.statementChangedHandler(value)}
/>
const detailInput = props => {
return (
<TextInput
{...props}
style=
{[
props.inputStyle,
{ height: props.height, width: props.width},
!props.valid && props.touched ? props.invalidInput : null
]}
/>
);
}
export default detailInput;
<TextInput
value = "Read Only"
editable = {false}
/>
Set editable false to read only TextInput.
A better readonly Text input:
<View pointerEvents="none">
<TextInput value="I am read only" editable={false} />
</View>
https://facebook.github.io/react-native/docs/view#pointerevents