Skip to content

Commit 86f2082

Browse files
kfaracikkfaracik
committed
chore(bottom-sheet): migrate from @gorhom to @swmansion/react-native-bottom-sheet
1 parent db3d768 commit 86f2082

29 files changed

Lines changed: 420 additions & 456 deletions

‎__mocks__/@gorhom/bottom-sheet.tsx‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎__mocks__/@swmansion/react-native-bottom-sheet.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React, { type ReactNode } from 'react';
2+
import { View } from 'react-native';
3+
4+
type SheetProps = {
5+
surface?: ReactNode;
6+
children?: ReactNode;
7+
};
8+
9+
type DetentValue = number | 'content';
10+
11+
export const BottomSheetProvider = ({ children }: { children: ReactNode }) => (
12+
<>{children}</>
13+
);
14+
15+
export const ModalBottomSheet = ({ surface, children }: SheetProps) => (
16+
<View>
17+
{surface}
18+
{children}
19+
</View>
20+
);
21+
22+
export const BottomSheet = ({ surface, children }: SheetProps) => (
23+
<View>
24+
{surface}
25+
{children}
26+
</View>
27+
);
28+
29+
export const programmatic = (value: DetentValue) => ({
30+
value,
31+
programmatic: true,
32+
});

‎__tests__/ModelManagementSheet.test.tsx‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -32,39 +32,35 @@ jest.mock('../components/model-hub/ModelCard', () => {
3232
return ({ model }: any) => <Text testID="model-card">{model.modelName}</Text>;
3333
});
3434

35-
// BottomSheetModal — immediately render children with injected data
36-
jest.mock('@gorhom/bottom-sheet', () => {
35+
jest.mock('../components/bottomSheets/AppBottomSheet', () => {
3736
const React = require('react');
3837
const { View } = require('react-native');
3938
let _injectedData: any = null;
4039

41-
const BottomSheetModal = React.forwardRef((props: any, _ref: any) => {
42-
if (!props.children || !_injectedData) return null;
40+
const AppBottomSheet = React.forwardRef((props: any, _ref: any) => {
41+
if (typeof props.children !== 'function') {
42+
return <View>{props.children}</View>;
43+
}
44+
if (!_injectedData) return null;
4345
return <View>{props.children({ data: _injectedData })}</View>;
4446
});
4547
// Attach a way for tests to set the data before rendering
46-
(BottomSheetModal as any).__setData = (d: any) => {
48+
(AppBottomSheet as any).__setData = (d: any) => {
4749
_injectedData = d;
4850
};
4951

50-
return {
51-
BottomSheetModal,
52-
BottomSheetView: ({ children, style }: any) => (
53-
<View style={style}>{children}</View>
54-
),
55-
BottomSheetBackdrop: () => null,
56-
};
52+
return { __esModule: true, AppBottomSheet };
5753
});
5854

5955
// ── imports ───────────────────────────────────────────────────────────────────
6056

6157
import ModelManagementSheet from '../components/bottomSheets/ModelManagementSheet';
6258
import { useModelStore } from '../store/modelStore';
63-
import { BottomSheetModal } from '@gorhom/bottom-sheet';
59+
import { AppBottomSheet } from '../components/bottomSheets/AppBottomSheet';
6460
import Toast from 'react-native-toast-message';
6561

6662
const mockUseModelStore = useModelStore as jest.Mock;
67-
const setSheetData = (BottomSheetModal as any).__setData;
63+
const setSheetData = (AppBottomSheet as any).__setData;
6864

6965
const baseModel = {
7066
id: 1,

‎__tests__/ModelSelectSheet.test.tsx‎

Lines changed: 11 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -40,38 +40,25 @@ jest.mock('../components/bottomSheets/BottomSheetSearchInput', () => {
4040
);
4141
});
4242

43-
jest.mock('@gorhom/bottom-sheet', () => {
43+
jest.mock('../components/bottomSheets/AppBottomSheet', () => {
4444
const React = require('react');
4545
const { View } = require('react-native');
46-
const _data: any = null;
4746

48-
const BottomSheetModal = React.forwardRef((props: any, _ref: any) => {
47+
const AppBottomSheet = React.forwardRef((props: any, _ref: any) => {
4948
React.useEffect(() => {
5049
props.onChange?.(0);
5150
}, []);
52-
return <View>{props.children}</View>;
51+
const { children } = props;
52+
return (
53+
<View>
54+
{typeof children === 'function'
55+
? children({ data: undefined })
56+
: children}
57+
</View>
58+
);
5359
});
54-
const BottomSheetFlatList = ({ data, renderItem }: any) => (
55-
<View>
56-
{data.map((item: any, i: number) => (
57-
<View key={i}>{renderItem({ item })}</View>
58-
))}
59-
</View>
60-
);
61-
const BottomSheetView = ({ children, style }: any) => (
62-
<View style={style}>{children}</View>
63-
);
64-
const BottomSheetBackdrop = () => null;
65-
66-
const useBottomSheetTimingConfigs = () => ({});
6760

68-
return {
69-
BottomSheetModal,
70-
BottomSheetFlatList,
71-
BottomSheetView,
72-
BottomSheetBackdrop,
73-
useBottomSheetTimingConfigs,
74-
};
61+
return { __esModule: true, AppBottomSheet };
7562
});
7663

7764
import ModelSelectSheet from '../components/bottomSheets/ModelSelectSheet';

‎__tests__/useAttachment.test.ts‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,6 @@ jest.mock('../store/sourceStore', () => ({
1717
jest.mock('../context/VectorStoreContext', () => ({
1818
useVectorStore: jest.fn(() => ({ vectorStore: {} })),
1919
}));
20-
jest.mock('@gorhom/bottom-sheet', () => ({
21-
BottomSheetModal: jest.fn(),
22-
}));
2320
jest.mock('react-native-toast-message', () => ({
2421
show: jest.fn(),
2522
}));

‎app/(drawer)/benchmark.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import React, {
88
import { View, StyleSheet } from 'react-native';
99
import { useSQLiteContext } from 'expo-sqlite';
1010
import { useLocalSearchParams } from 'expo-router';
11-
import { BottomSheetModal } from '@gorhom/bottom-sheet';
11+
import type { AppBottomSheetRef } from '../../components/bottomSheets/AppBottomSheet';
12+
import type { BenchmarkResultData } from '../../components/bottomSheets/BenchmarkResultSheet';
1213
import { useModelStore } from '../../store/modelStore';
1314
import { useTheme } from '../../context/ThemeContext';
1415
import { Theme } from '../../styles/colors';
@@ -29,7 +30,8 @@ import useDefaultHeader from '../../hooks/useDefaultHeader';
2930

3031
const BenchmarkScreen = () => {
3132
useDefaultHeader();
32-
const bottomSheetModalRef = useRef<BottomSheetModal>(null);
33+
const bottomSheetModalRef =
34+
useRef<AppBottomSheetRef<BenchmarkResultData>>(null);
3335
const { theme } = useTheme();
3436
const styles = useMemo(() => createStyles(theme), [theme]);
3537
const db = useSQLiteContext();

‎app/(drawer)/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import { useTheme } from '../../context/ThemeContext';
2222
import { importChatRoom } from '../../database/exportImportRepository';
2323
import { useChatStore } from '../../store/chatStore';
2424
import ModelSelectSheet from '../../components/bottomSheets/ModelSelectSheet';
25-
import { BottomSheetModal } from '@gorhom/bottom-sheet';
25+
import type { AppBottomSheetRef } from '../../components/bottomSheets/AppBottomSheet';
2626
import { useModelStore } from '../../store/modelStore';
2727
import { useSourceStore } from '../../store/sourceStore';
2828
import useOnboardingRedirect from '../../hooks/useOnboardingRedirect';
@@ -37,7 +37,7 @@ export default function App() {
3737
useOnboardingRedirect();
3838

3939
const navigation = useNavigation();
40-
const bottomSheetModalRef = useRef<BottomSheetModal>(null);
40+
const bottomSheetModalRef = useRef<AppBottomSheetRef>(null);
4141
const { downloadedModels } = useModelStore();
4242
const { loadSources } = useSourceStore();
4343
const hasAutoRedirectedRef = useRef(false);

‎app/(drawer)/model-hub.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ import { useFocusEffect, useRouter } from 'expo-router';
66
import useDefaultHeader from '../../hooks/useDefaultHeader';
77
import { useModelStore } from '../../store/modelStore';
88
import FloatingActionButton from '../../components/model-hub/FloatingActionButton';
9-
import { BottomSheetModal } from '@gorhom/bottom-sheet';
9+
import type { AppBottomSheetRef } from '../../components/bottomSheets/AppBottomSheet';
1010
import AddModelSheet from '../../components/bottomSheets/AddModelSheet';
1111
import WarningSheet, {
12-
WarningSheetData,
12+
type WarningSheetData,
1313
} from '../../components/bottomSheets/WarningSheet';
1414
import ModelManagementSheet from '../../components/bottomSheets/ModelManagementSheet';
1515
import { useTheme } from '../../context/ThemeContext';
@@ -34,11 +34,10 @@ const ModelHubScreen = () => {
3434
const { theme } = useTheme();
3535
const styles = useMemo(() => createStyles(theme), [theme]);
3636

37-
const addModelSheetRef = useRef<BottomSheetModal | null>(null);
38-
const wifiWarningSheetRef = useRef<BottomSheetModal<WarningSheetData> | null>(
39-
null
40-
);
41-
const modelManagementSheetRef = useRef<BottomSheetModal | null>(null);
37+
const addModelSheetRef = useRef<AppBottomSheetRef | null>(null);
38+
const wifiWarningSheetRef =
39+
useRef<AppBottomSheetRef<WarningSheetData> | null>(null);
40+
const modelManagementSheetRef = useRef<AppBottomSheetRef<Model> | null>(null);
4241

4342
const { models, removeModelFiles } = useModelStore();
4443
const [tab, setTab] = useState<ModelHubTab>('featured');

‎app/(modals)/model-family/[family].tsx‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,8 @@ import React, { useMemo, useRef } from 'react';
22
import { Platform, StyleSheet, Text, View } from 'react-native';
33
import { ScrollView } from 'react-native-gesture-handler';
44
import { useLocalSearchParams, useRouter } from 'expo-router';
5-
import {
6-
BottomSheetModal,
7-
BottomSheetModalProvider,
8-
} from '@gorhom/bottom-sheet';
5+
import { BottomSheetProvider } from '@swmansion/react-native-bottom-sheet';
6+
import type { AppBottomSheetRef } from '../../../components/bottomSheets/AppBottomSheet';
97
import { useTheme } from '../../../context/ThemeContext';
108
import { Theme } from '../../../styles/colors';
119
import { fontFamily, fontSizes } from '../../../styles/fontStyles';
@@ -15,7 +13,7 @@ import { getModelFamily } from '../../../utils/modelFamily';
1513
import ModelCard from '../../../components/model-hub/ModelCard';
1614
import ModelManagementSheet from '../../../components/bottomSheets/ModelManagementSheet';
1715
import WarningSheet, {
18-
WarningSheetData,
16+
type WarningSheetData,
1917
} from '../../../components/bottomSheets/WarningSheet';
2018
import ModalHeader from '../../../components/ModalHeader';
2119
import { FAMILY_DESCRIPTIONS } from '../../../constants/family-descriptions';
@@ -29,10 +27,9 @@ const FamilyScreen = () => {
2927

3028
const { models } = useModelStore();
3129

32-
const modelManagementSheetRef = useRef<BottomSheetModal | null>(null);
33-
const wifiWarningSheetRef = useRef<BottomSheetModal<WarningSheetData> | null>(
34-
null
35-
);
30+
const modelManagementSheetRef = useRef<AppBottomSheetRef<Model> | null>(null);
31+
const wifiWarningSheetRef =
32+
useRef<AppBottomSheetRef<WarningSheetData> | null>(null);
3633

3734
const familyModels = useMemo(
3835
() =>
@@ -45,7 +42,7 @@ const FamilyScreen = () => {
4542
const description = FAMILY_DESCRIPTIONS[familyName];
4643

4744
return (
48-
<BottomSheetModalProvider>
45+
<BottomSheetProvider>
4946
<View style={styles.container}>
5047
<View style={styles.content}>
5148
<ModalHeader
@@ -85,7 +82,7 @@ const FamilyScreen = () => {
8582
<ModelManagementSheet bottomSheetModalRef={modelManagementSheetRef} />
8683
<WarningSheet bottomSheetModalRef={wifiWarningSheetRef} />
8784
</View>
88-
</BottomSheetModalProvider>
85+
</BottomSheetProvider>
8986
);
9087
};
9188

‎app/_layout.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
} from '@expo-google-fonts/dm-sans';
1414
import { fontFamily } from '../styles/fontStyles';
1515
import { ThemeProvider } from '../context/ThemeContext';
16-
import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
16+
import { BottomSheetProvider } from '@swmansion/react-native-bottom-sheet';
1717
import { KeyboardProvider } from 'react-native-keyboard-controller';
1818
import AppToast from '../components/AppToast';
1919
import { Platform } from 'react-native';
@@ -116,11 +116,11 @@ export default function Layout() {
116116
<ThemeProvider>
117117
<VectorStoreProvider>
118118
<KeyboardProvider>
119-
<BottomSheetModalProvider>
119+
<BottomSheetProvider>
120120
<RootNavigator />
121121
{Platform.OS === 'android' && <StatusBar style="auto" />}
122122
<AppToast />
123-
</BottomSheetModalProvider>
123+
</BottomSheetProvider>
124124
</KeyboardProvider>
125125
</VectorStoreProvider>
126126
<SplashScreenAnimation />

0 commit comments

Comments
 (0)