D: 1.

example/src/pages/home/index.tsx

@@ -367,7 +367,7 @@ const Home = () => {
         }}
     >
         <DateTimePicker
-            variant="single"
+            variant="range"
             initialDateRange={{
                 start: moment().subtract(2, "days").startOf("day").toDate(),
                 end: moment().add(6, "days").endOf("day").toDate()
@@ -380,7 +380,7 @@ const Home = () => {
 
 Nabersin ?
 
-<right>
+<center>
 <link href="https://www.nibgat.com">
 ## Deneme **title** 2
 </link>
@@ -388,7 +388,7 @@ Nabersin ?
 \`\`\`
 safasfasfasf
 \`\`\`
-</right>
+</center>
 iyisindir **umarım.**
 
 \`\`\`

src/components/bottomSheet/index.tsx

@@ -280,6 +280,12 @@ const BottomSheet: RefForwardingComponent<IBottomSheetRef, IBottomSheetProps> =
     };
 
     const openAnimation = () => {
+        if (translateYValue.current < 0) {
+            const safeValue = snapPoint ?? contentHeight.current;
+            animatedTranslateY.setValue(safeValue);
+            translateYValue.current = safeValue;
+        }
+
         resetState();
 
         if (isAutoHeight || !snapPoint) {

src/components/dateSelector/index.tsx

@@ -23,6 +23,10 @@ import {
 import {
     NCoreUIKitTheme
 } from "../../core/hooks";
+import {
+    ChevronRight as ChevronRightIcon,
+    ChevronLeft as ChevronLeftIcon
+} from "lucide-react-native";
 import moment from "moment";
 import Text from "../text";
 
@@ -33,6 +37,7 @@ const DateSelector = ({
     viewDate: viewDateProp,
     dateRange,
     dateRule,
+    setDate,
     variant,
     date
 }: IDateSelectorProps, ref: Ref<IDateSelectorRef>) => {
@@ -61,6 +66,8 @@ const DateSelector = ({
     ] = useState<Array<CalendarDay>>([]);
 
     const {
+        nextPrevToolChevronButton: nextPrevToolChevronButtonDynamicStyle,
+        nextPrevToolContainer: nextPrevToolContainerDynamicStyle,
         todayIndicator: todayIndicatorDynamicStyle,
         dayOfWeek: dayOfWeekDynamicStyle,
         day: dayDynamicStyle
@@ -77,7 +84,12 @@ const DateSelector = ({
         });
 
         setMonthDays(allDays);
-    }, [viewDate]);
+    }, [
+        dateRange,
+        viewDate,
+        dateRule,
+        date
+    ]);
 
     useEffect(() => {
         if(viewDateProp) {
@@ -89,11 +101,7 @@ const DateSelector = ({
         ref,
         () => ({
             changeCurrentMonth: (date: Date) => {
-                const allDays = getDaysOfViewMonth({
-                    tDate: date
-                });
-
-                setMonthDays(allDays);
+                setViewDate(date);
             }
         }),
         []
@@ -182,6 +190,20 @@ const DateSelector = ({
 
         return <TouchableOpacity
             key={`day-${weekIndex}-${dayIndex}`}
+            disabled={!dayItem.isCurrentMonth}
+            onPress={() => {
+                if(!dayItem.isCurrentMonth) {
+                    return;
+                }
+
+                if(variant === "single") {
+                    setDate(dayItem.date.toDate());
+                } else if(variant === "range") {
+                    console.log("range");
+                } else {
+                    console.log("rrule");
+                }
+            }}
             style={[
                 stylesheet.day,
                 dayDynamicStyle,
@@ -212,6 +234,50 @@ const DateSelector = ({
         </TouchableOpacity>;
     };
 
+    const renderNextPrevTool = () => {
+        return <View
+            style={[
+                stylesheet.nextPrevToolContainer,
+                nextPrevToolContainerDynamicStyle
+            ]}
+        >
+            <TouchableOpacity
+                onPress={() => {
+                    const prevViewDate = moment(viewDate).clone().subtract(1, "months");
+                    setViewDate(prevViewDate.toDate());
+                }}
+                style={[
+                    nextPrevToolChevronButtonDynamicStyle
+                ]}
+            >
+                <ChevronLeftIcon
+                    color={colors.content.icon.default}
+                    size={26}
+                />
+            </TouchableOpacity>
+            <Text
+                variant="labelLargeSize"
+                color="high"
+            >
+                {moment(viewDate).format("MMMM YYYY")}
+            </Text>
+            <TouchableOpacity
+                onPress={() => {
+                    const nextViewDate = moment(viewDate).clone().add(1, "months");
+                    setViewDate(nextViewDate.toDate());
+                }}
+                style={[
+                    nextPrevToolChevronButtonDynamicStyle
+                ]}
+            >
+                <ChevronRightIcon
+                    color={colors.content.icon.default}
+                    size={26}
+                />
+            </TouchableOpacity>
+        </View>;
+    };
+
     let weekDays = moment.weekdays(localeBasedFirstDayOfWeek ? true : false);
 
     if(dayOfWeekLength === "short") {
@@ -225,6 +291,9 @@ const DateSelector = ({
             stylesheet.container
         ]}
     >
+        <View>
+            {renderNextPrevTool()}
+        </View>
         <View
             style={[
                 stylesheet.contentContainer

src/components/dateSelector/stylesheet.ts

@@ -39,6 +39,12 @@ const stylesheet = StyleSheet.create({
     todayIndicator: {
         position: "absolute",
         zIndex: 999
+    },
+    nextPrevToolContainer: {
+        justifyContent: "space-between",
+        flexDirection: "row",
+        alignItems: "center",
+        flex: 1
     }
 });
 
@@ -72,6 +78,12 @@ export const useStyles = ({
             right: spaces.spacingXs,
             left: spaces.spacingXs,
             top: spaces.spacingXs
+        } as Mutable<ViewStyle>,
+        nextPrevToolContainer: {
+            marginBottom: spaces.spacingMd
+        } as Mutable<ViewStyle>,
+        nextPrevToolChevronButton: {
+            padding: spaces.spacingSm
         } as Mutable<ViewStyle>
     };
 

src/components/dateSelector/type.ts

@@ -1,8 +1,12 @@
-import type moment from "moment";
+import type {
+    SetStateAction,
+    Dispatch
+} from "react";
 import type {
     DateTimePickerDateRange,
     DateTimePickerVariant
 } from "../dateTimePicker/type";
+import type moment from "moment";
 import type {
     RRule
 } from "rrule";
@@ -37,6 +41,7 @@ export type DateSelectInitialGeneratorType = {
 export type DayOfWeekLengthType = "short" | "very-short" | "long";
 
 interface IDateSelectorProps {
+    setDate: Dispatch<SetStateAction<Date | undefined>>;
     dayOfWeekLength?: DayOfWeekLengthType;
     localeBasedFirstDayOfWeek?: boolean;
     dateRange?: DateTimePickerDateRange;

src/components/dateTimePicker/type.ts

@@ -178,6 +178,8 @@ interface IDateTimePickerProps {
     hintText?: string;
     subTitle?: string;
     style?: ViewStyle;
+    maxDate?: Date;
+    minDate?: Date;
     title?: string;
     id?: string;
 };

src/components/dateTimeSheet/index.tsx

@@ -99,6 +99,7 @@ const DateTimeSheet = ({
                 dayOfWeekLength={dayOfWeekLength}
                 dateRange={dateRange}
                 dateRule={dateRule}
+                setDate={setDate}
                 variant={variant}
                 date={date}
             />