Skip to content

Commit 11d23a9

Browse files
CommanderRedYTCommanderRedYT
committed
Migrate to another BottomSheet library
1 parent 4c3fdb8 commit 11d23a9

File tree

6 files changed

+243
-148
lines changed

6 files changed

+243
-148
lines changed

‎licenses.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
11
{
2+
"@devvie/[email protected]": {
3+
"licenses": "MIT",
4+
"repository": "https://github.com/stanleyugwu/react-native-bottom-sheet",
5+
"licenseUrl": "https://github.com/stanleyugwu/react-native-bottom-sheet/raw/master/LICENSE",
6+
"parents": "opendtu-react-native"
7+
},
28
"@octokit/[email protected]": {
39
"licenses": "MIT",
410
"repository": "github:octokit/rest.js",
@@ -167,12 +173,6 @@
167173
"licenseUrl": "https://github.com/i18next/react-i18next/raw/master/LICENSE",
168174
"parents": "opendtu-react-native"
169175
},
170-
"[email protected]": {
171-
"licenses": "ISC",
172-
"repository": "https://github.com/AtharvaDeolalikar/react-native-animated-bottom-drawer",
173-
"licenseUrl": "https://github.com/AtharvaDeolalikar/react-native-animated-bottom-drawer",
174-
"parents": "opendtu-react-native"
175-
},
176176
"[email protected]": {
177177
"licenses": "MIT",
178178
"repository": "https://github.com/wuxudong/react-native-charts-wrapper",

‎package.json‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
"pod-install": "cd ios && pod install"
3333
},
3434
"dependencies": {
35+
"@devvie/bottom-sheet": "^0.4.3",
3536
"@octokit/rest": "^21.0.2",
3637
"@os-team/i18next-react-native-language-detector": "^1.1.5",
3738
"@pchmn/expo-material3-theme": "^1.3.2",
@@ -62,7 +63,6 @@
6263
"react": "18.3.1",
6364
"react-i18next": "^15.2.0",
6465
"react-native": "0.76.5",
65-
"react-native-animated-bottom-drawer": "^0.0.23",
6666
"react-native-charts-wrapper": "^0.6.0",
6767
"react-native-config": "^1.5.3",
6868
"react-native-fast-image": "^8.6.3",
@@ -112,6 +112,7 @@
112112
"@react-native/typescript-config": "0.76.5",
113113
"@testing-library/react-native": "^12.9.0",
114114
"@trivago/prettier-plugin-sort-imports": "^5.2.0",
115+
"@types/color": "^4.2.0",
115116
"@types/jest": "^29.5.14",
116117
"@types/markdown-it": "^14.1.2",
117118
"@types/npm-license-crawler": "^0.2.3",
@@ -121,9 +122,11 @@
121122
"@types/react-test-renderer": "^18.3.0",
122123
"@types/styled-components": "^5.1.34",
123124
"@types/uuid": "^10.0.0",
125+
"@typescript-eslint/eslint-plugin": "^7.18.1-alpha.3",
126+
"@typescript-eslint/parser": "^7.18.1-alpha.3",
124127
"babel-jest": "^29.7.0",
125128
"babel-plugin-module-resolver": "^5.0.2",
126-
"eslint": "^8.57.0",
129+
"eslint": "^8",
127130
"eslint-import-resolver-typescript": "^3.7.0",
128131
"eslint-plugin-import": "^2.31.0",
129132
"eslint-plugin-no-relative-import-paths": "^1.5.5",
@@ -136,7 +139,7 @@
136139
"react-native-version": "4.0.0",
137140
"react-test-renderer": "18.3.1",
138141
"ts-jest": "^29.2.5",
139-
"typescript": "5.6.3"
142+
"typescript": "^5 <5.6.0"
140143
},
141144
"engines": {
142145
"node": ">=18"

‎src/components/modals/ChangeBooleanValueModal.tsx‎

Lines changed: 20 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
11
import type { FC } from 'react';
22
import { useEffect, useRef, useState } from 'react';
33
import { useTranslation } from 'react-i18next';
4-
import type { BottomDrawerMethods } from 'react-native-animated-bottom-drawer';
5-
import BottomDrawer from 'react-native-animated-bottom-drawer';
64
import type { SwitchProps } from 'react-native-paper';
75
import { Button, Switch, Text, useTheme } from 'react-native-paper';
86

97
import { View } from 'react-native';
108

9+
import useOrientation, { Orientation } from '@/hooks/useOrientation';
10+
1111
import { spacing } from '@/constants';
1212

13+
import type { BottomSheetMethods } from '@devvie/bottom-sheet';
14+
import BottomSheet from '@devvie/bottom-sheet';
15+
1316
export interface ChangeBooleanValueModalProps {
1417
isOpen?: boolean;
1518
onClose?: () => void;
1619
defaultValue?: boolean;
1720
onChange?: (value: boolean) => void;
1821
title?: string;
1922
description?: string;
20-
extraHeight?: number;
2123
inputProps?: Omit<SwitchProps, 'value' | 'onValueChange'>;
2224
}
2325

@@ -29,14 +31,11 @@ const ChangeBooleanValueModal: FC<ChangeBooleanValueModalProps> = ({
2931
onChange: onSave,
3032
onClose,
3133
inputProps,
32-
extraHeight,
3334
}) => {
3435
const theme = useTheme();
35-
const drawerRef = useRef<BottomDrawerMethods>(null);
36+
const drawerRef = useRef<BottomSheetMethods>(null);
3637
const { t } = useTranslation();
3738

38-
const [initialHeight, setInitialHeight] = useState<number>(0);
39-
4039
const [value, setValue] = useState<boolean>(defaultValue ?? false);
4140
const [wasModified, setWasModified] = useState<boolean>(false);
4241

@@ -69,44 +68,27 @@ const ChangeBooleanValueModal: FC<ChangeBooleanValueModalProps> = ({
6968
}
7069
}, [defaultValue, wasModified]);
7170

71+
const { orientation } = useOrientation();
72+
7273
return (
73-
<BottomDrawer
74+
<BottomSheet
7475
ref={drawerRef}
75-
overDrag
76-
customStyles={{
77-
container: {
78-
backgroundColor: theme.colors.surface,
79-
},
80-
handleContainer: {
81-
backgroundColor: theme.colors.surfaceVariant,
82-
minHeight: 35,
83-
borderTopLeftRadius: 20,
84-
borderTopRightRadius: 20,
85-
},
86-
handle: {
87-
backgroundColor: theme.colors.surfaceDisabled,
88-
width: 40,
89-
height: 5,
90-
borderRadius: 5,
91-
},
92-
}}
93-
initialHeight={initialHeight}
9476
onClose={handleCancel}
77+
style={{
78+
borderTopLeftRadius: 20,
79+
borderTopRightRadius: 20,
80+
backgroundColor: theme.colors.surface,
81+
left: orientation === Orientation.LANDSCAPE ? '25%' : 0,
82+
right: orientation === Orientation.LANDSCAPE ? '25%' : 0,
83+
width: orientation === Orientation.LANDSCAPE ? '50%' : '100%',
84+
}}
85+
openDuration={450}
86+
closeDuration={300}
9587
>
9688
<View
9789
style={{
9890
paddingHorizontal: spacing * 2,
9991
paddingTop: spacing * 2,
100-
paddingBottom: spacing * 3,
101-
}}
102-
onLayout={e => {
103-
const { height, y } = e.nativeEvent.layout;
104-
const heightValue = height + y + (extraHeight ?? 0);
105-
106-
drawerRef.current?.snapToPosition(heightValue, {
107-
resetLastPosition: false,
108-
});
109-
setInitialHeight(heightValue);
11092
}}
11193
>
11294
<View
@@ -148,7 +130,7 @@ const ChangeBooleanValueModal: FC<ChangeBooleanValueModalProps> = ({
148130
</Button>
149131
</View>
150132
</View>
151-
</BottomDrawer>
133+
</BottomSheet>
152134
);
153135
};
154136

‎src/components/modals/ChangeEnumValueModal.tsx‎

Lines changed: 20 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
import type { FC } from 'react';
22
import { useEffect, useRef, useState } from 'react';
33
import { useTranslation } from 'react-i18next';
4-
import type { BottomDrawerMethods } from 'react-native-animated-bottom-drawer';
5-
import BottomDrawer from 'react-native-animated-bottom-drawer';
64
import { Box } from 'react-native-flex-layout';
75
import { Button, RadioButton, Text, useTheme } from 'react-native-paper';
86

97
import { ScrollView, View } from 'react-native';
108

9+
import useOrientation, { Orientation } from '@/hooks/useOrientation';
10+
1111
import { spacing } from '@/constants';
1212

13+
import type { BottomSheetMethods } from '@devvie/bottom-sheet';
14+
import BottomSheet from '@devvie/bottom-sheet';
15+
1316
export interface ChangeEnumValueModalProps {
1417
isOpen?: boolean;
1518
onClose?: () => void;
@@ -18,7 +21,6 @@ export interface ChangeEnumValueModalProps {
1821
possibleValues: PossibleEnumValues;
1922
title?: string;
2023
description?: string;
21-
extraHeight?: number;
2224
}
2325

2426
export type PossibleEnumValues = { label: string; value: string }[];
@@ -30,15 +32,12 @@ const ChangeEnumValueModal: FC<ChangeEnumValueModalProps> = ({
3032
defaultValue,
3133
onChange: onSave,
3234
onClose,
33-
extraHeight,
3435
possibleValues,
3536
}) => {
3637
const theme = useTheme();
37-
const drawerRef = useRef<BottomDrawerMethods>(null);
38+
const drawerRef = useRef<BottomSheetMethods>(null);
3839
const { t } = useTranslation();
3940

40-
const [initialHeight, setInitialHeight] = useState<number>(0);
41-
4241
const [value, setValue] = useState<string>(defaultValue ?? '');
4342
const [wasModified, setWasModified] = useState<boolean>(false);
4443

@@ -71,44 +70,27 @@ const ChangeEnumValueModal: FC<ChangeEnumValueModalProps> = ({
7170
}
7271
}, [defaultValue, wasModified]);
7372

73+
const { orientation } = useOrientation();
74+
7475
return (
75-
<BottomDrawer
76+
<BottomSheet
7677
ref={drawerRef}
77-
overDrag
78-
customStyles={{
79-
container: {
80-
backgroundColor: theme.colors.surface,
81-
},
82-
handleContainer: {
83-
backgroundColor: theme.colors.surfaceVariant,
84-
minHeight: 35,
85-
borderTopLeftRadius: 20,
86-
borderTopRightRadius: 20,
87-
},
88-
handle: {
89-
backgroundColor: theme.colors.surfaceDisabled,
90-
width: 40,
91-
height: 5,
92-
borderRadius: 5,
93-
},
94-
}}
95-
initialHeight={initialHeight}
9678
onClose={handleCancel}
79+
style={{
80+
borderTopLeftRadius: 20,
81+
borderTopRightRadius: 20,
82+
backgroundColor: theme.colors.surface,
83+
left: orientation === Orientation.LANDSCAPE ? '25%' : 0,
84+
right: orientation === Orientation.LANDSCAPE ? '25%' : 0,
85+
width: orientation === Orientation.LANDSCAPE ? '50%' : '100%',
86+
}}
87+
openDuration={450}
88+
closeDuration={300}
9789
>
9890
<View
9991
style={{
10092
paddingHorizontal: spacing * 2,
10193
paddingTop: spacing * 2,
102-
paddingBottom: spacing * 3,
103-
}}
104-
onLayout={e => {
105-
const { height, y } = e.nativeEvent.layout;
106-
const heightValue = height + y + (extraHeight ?? 0);
107-
108-
drawerRef.current?.snapToPosition(heightValue, {
109-
resetLastPosition: false,
110-
});
111-
setInitialHeight(heightValue);
11294
}}
11395
>
11496
<View
@@ -167,7 +149,7 @@ const ChangeEnumValueModal: FC<ChangeEnumValueModalProps> = ({
167149
</Button>
168150
</View>
169151
</View>
170-
</BottomDrawer>
152+
</BottomSheet>
171153
);
172154
};
173155

0 commit comments

Comments
 (0)