diff --git a/packages/app/components/trip/TripCards/TripDateRangeCard.tsx b/packages/app/components/trip/TripCards/TripDateRangeCard.tsx
index a4b5b0cfc..a772f5788 100644
--- a/packages/app/components/trip/TripCards/TripDateRangeCard.tsx
+++ b/packages/app/components/trip/TripCards/TripDateRangeCard.tsx
@@ -9,9 +9,8 @@ import {
 } from 'react-native-paper-dates';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import useTheme from 'app/hooks/useTheme';
-import { RStack, RText, Datepickers } from '@packrat/ui';
+import { RStack, RText, DateRangePicker } from '@packrat/ui';
 import { TripCardBase } from './TripCardBase';
-const { RangePicker } = Datepickers;
 
 export interface DateRange {
   start_date: Date | null;
@@ -59,7 +58,7 @@ export const TripDateRangeCard = ({
       )}
       title="Trip Date Range"
     >
-      <RangePicker
+      <DateRangePicker
         selectedDates={selectedDates}
         onDatesChange={onDatesChange}
         offsetDate={offsetDate}
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 4f6c4f1f0..8e5bf68e1 100755
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -54,6 +54,7 @@
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.51.0",
     "react-native": "0.73.6",
+    "react-native-daterange-picker": "^1.5.1",
     "react-native-svg": "14.1.0",
     "react-native-web": "^0.19.10",
     "swr": "^2.2.5",
diff --git a/packages/ui/src/DateRangePicker/DateRangePicker.native.tsx b/packages/ui/src/DateRangePicker/DateRangePicker.native.tsx
new file mode 100644
index 000000000..65997d22e
--- /dev/null
+++ b/packages/ui/src/DateRangePicker/DateRangePicker.native.tsx
@@ -0,0 +1,22 @@
+import { useState } from 'react';
+import { Text } from 'react-native';
+import { View } from 'tamagui';
+import DateRangePickerComponent from 'react-native-daterange-picker';
+import moment from 'moment';
+
+const DateRangePicker = () => {
+  const [dates, setDates] = useState({ startDate: null, endDate: null });
+  return (
+    <DateRangePickerComponent
+      onChange={setDates}
+      endDate={dates.endDate}
+      startDate={dates.endDate}
+      displayedDate={moment()}
+      range
+    >
+      <Text>Click me!</Text>
+    </DateRangePickerComponent>
+  );
+};
+
+export default DateRangePicker;
diff --git a/packages/ui/src/DateRangePicker/DateRangePicker.web.tsx b/packages/ui/src/DateRangePicker/DateRangePicker.web.tsx
new file mode 100644
index 000000000..1be02dd7e
--- /dev/null
+++ b/packages/ui/src/DateRangePicker/DateRangePicker.web.tsx
@@ -0,0 +1 @@
+export { RangePicker as default } from '../Bento/elements/datepickers/RangePicker';
diff --git a/packages/ui/src/DateRangePicker/index.ts b/packages/ui/src/DateRangePicker/index.ts
new file mode 100644
index 000000000..982ed2d72
--- /dev/null
+++ b/packages/ui/src/DateRangePicker/index.ts
@@ -0,0 +1 @@
+ export { default as DateRangePicker} from './DateRangePicker'; 
\ No newline at end of file
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index 4d325661d..a58ff6163 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -93,6 +93,7 @@ export * from './RScrollview';
 export * from './RStack';
 export * from './RTabs';
 export * from './RText';
+export * from './DateRangePicker';
 export * from './Rparagraph';
 export * from './SizableText';
 export * from './XStack';
diff --git a/yarn.lock b/yarn.lock
index 6490ec188..98da8472f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5496,6 +5496,7 @@ __metadata:
     react-dropzone: "npm:^14.2.3"
     react-hook-form: "npm:^7.51.0"
     react-native: "npm:0.73.6"
+    react-native-daterange-picker: "npm:^1.5.1"
     react-native-svg: "npm:14.1.0"
     react-native-web: "npm:^0.19.10"
     swr: "npm:^2.2.5"
@@ -25364,7 +25365,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash@npm:4.17.21, lodash@npm:4.17.x, lodash@npm:^4.17.13, lodash@npm:^4.17.15, lodash@npm:^4.17.20, lodash@npm:^4.17.21, lodash@npm:^4.17.4, lodash@npm:^4.6.1":
+"lodash@npm:4.17.21, lodash@npm:4.17.x, lodash@npm:^4.17.13, lodash@npm:^4.17.15, lodash@npm:^4.17.19, lodash@npm:^4.17.20, lodash@npm:^4.17.21, lodash@npm:^4.17.4, lodash@npm:^4.6.1":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
   checksum: 10/c08619c038846ea6ac754abd6dd29d2568aa705feb69339e836dfa8d8b09abbb2f859371e86863eda41848221f9af43714491467b5b0299122431e202bb0c532
@@ -26757,6 +26758,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"moment@npm:^2.27.0":
+  version: 2.30.1
+  resolution: "moment@npm:2.30.1"
+  checksum: 10/ae42d876d4ec831ef66110bdc302c0657c664991e45cf2afffc4b0f6cd6d251dde11375c982a5c0564ccc0fa593fc564576ddceb8c8845e87c15f58aa6baca69
+  languageName: node
+  linkType: hard
+
 "mongodb-connection-string-url@npm:^2.6.0":
   version: 2.6.0
   resolution: "mongodb-connection-string-url@npm:2.6.0"
@@ -30383,6 +30391,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-daterange-picker@npm:^1.5.1":
+  version: 1.5.1
+  resolution: "react-native-daterange-picker@npm:1.5.1"
+  dependencies:
+    lodash: "npm:^4.17.19"
+    moment: "npm:^2.27.0"
+  peerDependencies:
+    react: ^16.13.1
+    react-native: ^0.63.2
+  checksum: 10/d3ce1dd2d20a396b0eb05086ec2e5f8b33938421b7a9ecb9354d5ce89846a4cd9382fd0f85bb9d3d2599525caf82150b903611f2f03c2675223fbca9f52aaa4e
+  languageName: node
+  linkType: hard
+
 "react-native-dotenv@npm:^3.4.8":
   version: 3.4.11
   resolution: "react-native-dotenv@npm:3.4.11"