aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package.json2
-rw-r--r--src/components/common/TaggDatePicker.tsx30
-rw-r--r--src/components/common/index.ts1
-rw-r--r--src/components/onboarding/BirthDatePicker.tsx125
-rw-r--r--src/components/onboarding/TaggDatePicker.tsx63
-rw-r--r--src/components/onboarding/index.ts2
-rw-r--r--src/screens/onboarding/ProfileOnboarding.tsx20
7 files changed, 166 insertions, 77 deletions
diff --git a/package.json b/package.json
index bbcf6b1f..72ff434d 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
"react-native": "0.63.3",
"react-native-animatable": "^1.3.3",
"react-native-confirmation-code-field": "^6.5.0",
- "react-native-datepicker": "^1.7.2",
+ "react-native-date-picker": "^3.2.5",
"react-native-elements": "^2.3.2",
"react-native-gesture-handler": "^1.6.1",
"react-native-hyperlink": "^0.0.19",
diff --git a/src/components/common/TaggDatePicker.tsx b/src/components/common/TaggDatePicker.tsx
new file mode 100644
index 00000000..d8010251
--- /dev/null
+++ b/src/components/common/TaggDatePicker.tsx
@@ -0,0 +1,30 @@
+import React, {useState} from 'react';
+import DatePicker from 'react-native-date-picker';
+
+interface TaggDatePickerProps {
+ handleDateUpdate: (_: Date) => void;
+ maxDate: Date;
+ textColor: string;
+}
+
+const TaggDatePicker: React.FC<TaggDatePickerProps> = ({
+ handleDateUpdate,
+ maxDate,
+ textColor,
+}) => {
+ const [date, setDate] = useState(new Date());
+ return (
+ <DatePicker
+ date={date}
+ textColor={textColor}
+ mode={'date'}
+ maximumDate={maxDate}
+ onDateChange={(newDate) => {
+ setDate(newDate);
+ handleDateUpdate(newDate);
+ }}
+ />
+ );
+};
+
+export default TaggDatePicker;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 950b3f61..87ebe810 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -11,4 +11,5 @@ export {default as LoadingIndicator} from './LoadingIndicator';
export {default as DateLabel} from './DateLabel';
export {default as SocialLinkModal} from './SocialLinkModal';
export {default as ComingSoon} from './ComingSoon';
+export {default as TaggDatePicker} from './TaggDatePicker';
export * from './post';
diff --git a/src/components/onboarding/BirthDatePicker.tsx b/src/components/onboarding/BirthDatePicker.tsx
new file mode 100644
index 00000000..f97f1a72
--- /dev/null
+++ b/src/components/onboarding/BirthDatePicker.tsx
@@ -0,0 +1,125 @@
+import moment from 'moment';
+import React, {useState} from 'react';
+import {
+ Modal,
+ StyleSheet,
+ Text,
+ TextInputProps,
+ TouchableWithoutFeedback,
+ View,
+} from 'react-native';
+import {Button} from 'react-native-elements';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {TaggDatePicker} from '../common';
+
+interface BirthDatePickerProps extends TextInputProps {
+ handleBDUpdate: (_: Date) => void;
+ width?: number | string;
+}
+
+const BirthDatePicker = React.forwardRef(
+ (props: BirthDatePickerProps, ref: any) => {
+ const getMaxDate = () => {
+ const maxDate = moment().subtract(13, 'y').subtract(1, 'd');
+ return maxDate.toDate();
+ };
+ const [date, setDate] = useState(new Date(0));
+ const [hidden, setHidden] = useState(true);
+ const [updated, setUpdated] = useState(false);
+ const textColor = updated ? 'white' : '#ddd';
+ const updateDate = (newDate: Date) => {
+ props.handleBDUpdate(newDate);
+ setDate(newDate);
+ setUpdated(true);
+ };
+ return (
+ <View style={styles.container}>
+ <TouchableOpacity
+ onPress={() => {
+ setHidden(false);
+ }}>
+ <Text
+ style={[styles.input, {width: props.width}, {color: textColor}]}
+ ref={ref}
+ {...props}>
+ {updated ? moment(date).format('YYYY-MM-DD') : 'Date of Birth'}
+ </Text>
+ </TouchableOpacity>
+ <Modal visible={!hidden} transparent={true} animationType="fade">
+ <TouchableWithoutFeedback
+ onPress={() => {
+ setHidden(true);
+ }}>
+ <View style={styles.bottomView}>
+ <TouchableWithoutFeedback>
+ <View style={styles.modalView}>
+ <View style={styles.buttonView}>
+ <Button
+ title="Done"
+ titleStyle={styles.doneButtonTitle}
+ buttonStyle={styles.doneButton}
+ onPress={() => {
+ setHidden(true);
+ }}
+ />
+ </View>
+ <TaggDatePicker
+ handleDateUpdate={updateDate}
+ maxDate={getMaxDate()}
+ textColor={'black'}
+ />
+ </View>
+ </TouchableWithoutFeedback>
+ </View>
+ </TouchableWithoutFeedback>
+ </Modal>
+ </View>
+ );
+ },
+);
+
+const styles = StyleSheet.create({
+ container: {
+ width: '100%',
+ alignItems: 'center',
+ marginVertical: 11,
+ },
+ input: {
+ height: 40,
+ fontSize: 16,
+ paddingTop: '2%',
+ fontWeight: '600',
+ borderColor: '#fffdfd',
+ borderWidth: 2,
+ borderRadius: 20,
+ paddingLeft: 13,
+ },
+ modalView: {
+ backgroundColor: 'rgb(202, 206, 212)',
+ height: '29%',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ },
+ bottomView: {
+ flex: 1,
+ justifyContent: 'flex-end',
+ },
+ buttonView: {
+ backgroundColor: 'rgb(247, 247, 247)',
+ width: '100%',
+ paddingRight: '2.5%',
+ alignItems: 'flex-end',
+ flexDirection: 'row',
+ justifyContent: 'flex-end',
+ },
+ doneButtonTitle: {
+ fontWeight: '600',
+ fontSize: 17,
+ color: 'rgb(19, 125, 250)',
+ },
+ doneButton: {
+ backgroundColor: 'transparent',
+ },
+});
+
+export default BirthDatePicker;
diff --git a/src/components/onboarding/TaggDatePicker.tsx b/src/components/onboarding/TaggDatePicker.tsx
deleted file mode 100644
index 39af6234..00000000
--- a/src/components/onboarding/TaggDatePicker.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-import DatePicker from 'react-native-datepicker';
-import {View, StyleSheet, TextInputProps} from 'react-native';
-
-interface TaggDatePickerProps extends TextInputProps {
- width?: number | string;
- date?: string;
- maxDate?: Date | string;
-}
-/**
- * An input component that receives all props a normal TextInput component does. TaggInput components grow to 60% of their parent's width by default, but this can be set using the `width` prop.
- */
-const TaggDatePicker = React.forwardRef(
- (props: TaggDatePickerProps, ref: any) => {
- return (
- <View style={styles.container}>
- <DatePicker
- {...props}
- style={styles.input}
- placeholder={'Date of Birth'}
- showIcon={false}
- ref={ref}
- format={'YYYY-MM-DD'}
- customStyles={{
- placeholderText: {
- color: '#ddd',
-
- fontSize: 16,
- fontWeight: '600',
- },
- dateText: {
- color: '#fff',
- fontSize: 16,
- fontWeight: '600',
- },
- dateInput: {
- borderColor: '#fffdfd',
- borderWidth: 2,
- borderRadius: 20,
- justifyContent: 'center',
- alignItems: 'flex-start',
- paddingLeft: 13,
- },
- }}
- />
- </View>
- );
- },
-);
-
-const styles = StyleSheet.create({
- container: {
- width: '100%',
- alignItems: 'center',
- marginVertical: 11,
- },
- input: {
- minWidth: '67%',
- height: 40,
- },
-});
-
-export default TaggDatePicker;
diff --git a/src/components/onboarding/index.ts b/src/components/onboarding/index.ts
index aaad7a62..fde4e0af 100644
--- a/src/components/onboarding/index.ts
+++ b/src/components/onboarding/index.ts
@@ -5,7 +5,7 @@ export {default as TermsConditions} from './TermsConditions';
export {default as SubmitButton} from './SubmitButton';
export {default as TaggInput} from './TaggInput';
export {default as TaggBigInput} from './TaggBigInput';
-export {default as TaggDatePicker} from './TaggDatePicker';
+export {default as BirthDatePicker} from './BirthDatePicker';
export {default as TaggDropDown} from './TaggDropDown';
export {default as SocialMediaLinker} from './SocialMediaLinker';
export {default as LinkSocialMedia} from './LinkSocialMedia';
diff --git a/src/screens/onboarding/ProfileOnboarding.tsx b/src/screens/onboarding/ProfileOnboarding.tsx
index e7fcec90..bbabbb56 100644
--- a/src/screens/onboarding/ProfileOnboarding.tsx
+++ b/src/screens/onboarding/ProfileOnboarding.tsx
@@ -1,5 +1,6 @@
import React from 'react';
import {RouteProp} from '@react-navigation/native';
+import moment from 'moment';
import {StackNavigationProp} from '@react-navigation/stack';
import {
Text,
@@ -16,6 +17,7 @@ import {
TaggInput,
TaggDatePicker,
TaggDropDown,
+ BirthDatePicker,
} from '../../components';
import {OnboardingStackParams} from '../../routes/onboarding';
import {AuthContext} from '../../routes/authentication';
@@ -26,7 +28,6 @@ import {
bioRegex,
genderRegex,
} from '../../constants';
-import moment from 'moment';
import AsyncStorage from '@react-native-community/async-storage';
type ProfileOnboardingScreenRouteProp = RouteProp<
@@ -228,18 +229,13 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({
});
};
- const handleBirthdateUpdate = (birthdate: string) => {
+ const handleBirthdateUpdate = (birthdate: Date) => {
setForm({
...form,
- birthdate,
+ birthdate: moment(birthdate).format('YYYY-MM-DD'),
});
};
- const getMaxDate = () => {
- const maxDate = moment().subtract(13, 'y').subtract(1, 'd');
- return maxDate.format('YYYY-MM-DD');
- };
-
const handleSubmit = async () => {
if (!form.largePic) {
Alert.alert('Please upload a large profile picture!');
@@ -396,10 +392,10 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({
}
width={280}
/>
- <TaggDatePicker
- date={form.birthdate}
- maxDate={getMaxDate()}
- onDateChange={(birthdate) => handleBirthdateUpdate(birthdate)}
+ <BirthDatePicker
+ ref={birthdateRef}
+ handleBDUpdate={handleBirthdateUpdate}
+ width={280}
/>
<TaggDropDown
onValueChange={(value) => handleGenderUpdate(value)}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 18:53:42 +0000