Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(bottom-sheet): expo sdk update bug fix #1109

Merged
merged 2 commits into from
Mar 4, 2025
Merged

fix(bottom-sheet): expo sdk update bug fix #1109

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7030ee1
updating content section height bug fix
kitdesai Mar 4, 2025
1db7fe1
bringing bottom sheet in line with core mobile changes
kitdesai Mar 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 54 additions & 34 deletions demo/src/Components/BottomSheet/BottomSheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,17 +32,15 @@ import styles from './styles';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const { height: SCREEN_HEIGHT } = Dimensions.get('window');
const DEFAULT_DAMPING = 50;
const DEFAULT_ANIMATION_DURATION = 200;
const DEFAULT_DAMPING_MULTIPLIER = 0.1;
const MIN_DAMPING = 15;
const DEFAULT_PADDING_ANDROID = 10;
const MIN_VELOCITY_FOR_MOVE = 0.01;
const SWIPE_TO_CLOSE_THRESHOLD = 0.1;

const BottomSheet = (props: HvComponentProps) => {
const insets = useSafeAreaInsets();
const PADDING = Platform.select({
default: insets.top,
ios: insets.bottom,
});

const topOffset = Platform.select({
default: 0,
ios: insets.top,
Expand All @@ -56,7 +54,7 @@ const BottomSheet = (props: HvComponentProps) => {
const hvProps: HvProps = {
animationDuration: animationDuration
? parseInt(animationDuration, 10)
: 250,
: DEFAULT_ANIMATION_DURATION,
contentSections: props.element.getElementsByTagNameNS(
namespace,
BottomSheetContentSection.localName,
Expand Down Expand Up @@ -91,6 +89,14 @@ const BottomSheet = (props: HvComponentProps) => {
}),
};

const gestureEnabled =
hvProps.stopPoints.length > 0 || hvProps.contentSections.length > 0;
const PADDING = Platform.select({
android: DEFAULT_PADDING_ANDROID,
default: 0,
ios: gestureEnabled ? insets.top : 0,
});

const [contentSectionHeights, setContentSectionHeights] = useState(
new Array(hvProps.contentSections.length),
);
Expand Down Expand Up @@ -137,9 +143,14 @@ const BottomSheet = (props: HvComponentProps) => {
// we need the new value to calculate whether innerView should scroll
// so we use upcomingTranslateY to handle this case
runOnJS(setUpcomingTranslateY)(destination);
translateY.value = withSpring(destination, { damping: DEFAULT_DAMPING });
translateY.value = withSpring(destination, {
damping: Math.max(
hvProps.animationDuration * DEFAULT_DAMPING_MULTIPLIER,
MIN_DAMPING,
),
});
},
[translateY],
[hvProps.animationDuration, translateY],
);

useEffect(() => {
Expand Down Expand Up @@ -226,16 +237,6 @@ const BottomSheet = (props: HvComponentProps) => {
};
}, [onHyperviewEventDispatch, visible]);

const childNodes = Array.from(props.element.childNodes).filter(
n => (n as Element).tagName !== 'bottom-sheet:stop-point',
);
const children = Hyperview.renderChildNodes(
childNodes,
props.stylesheets,
props.onUpdate,
props.options,
);

const findBottomSheetEndPoint = () => {
'worklet';

Expand Down Expand Up @@ -291,8 +292,6 @@ const BottomSheet = (props: HvComponentProps) => {
}
};

const gestureEnabled =
hvProps.stopPoints.length > 0 || hvProps.contentSections.length > 0;
const gesture = Gesture.Pan()
.enabled(gestureEnabled)
.onStart(() => {
Expand Down Expand Up @@ -322,18 +321,38 @@ const BottomSheet = (props: HvComponentProps) => {
};
});

const innerView = useMemo(() => {
const onLayout = (event: LayoutChangeEvent) => {
const { height: sheetHeight } = event.nativeEvent.layout;
setHeight(sheetHeight);
};
const onStartShouldSetResponder = useCallback(() => {
return gestureEnabled && upcomingTranslateY > MAX_TRANSLATE_Y;
}, [gestureEnabled, upcomingTranslateY, MAX_TRANSLATE_Y]);

const children = useMemo(() => {
const childNodes = Array.from(props.element.childNodes).filter(
n => (n as Element).tagName !== 'bottom-sheet:stop-point',
);

return Platform.OS === 'ios' ? (
return Hyperview.renderChildNodes(
childNodes,
props.stylesheets,
props.onUpdate,
props.options,
);
}, [
props.element.childNodes,
props.onUpdate,
props.options,
props.stylesheets,
]);

const onLayout = (event: LayoutChangeEvent) => {
const { height: sheetHeight } = event.nativeEvent.layout;
setHeight(sheetHeight);
};

const innerView =
Platform.OS === 'ios' ? (
<View
onLayout={onLayout}
onStartShouldSetResponder={() => {
return upcomingTranslateY > MAX_TRANSLATE_Y;
}}
onStartShouldSetResponder={onStartShouldSetResponder}
>
<>{children}</>
</View>
Expand All @@ -347,7 +366,6 @@ const BottomSheet = (props: HvComponentProps) => {
</ScrollView>
</View>
);
}, [upcomingTranslateY, children, MAX_TRANSLATE_Y]);

const content = (
<GestureDetector gesture={gesture}>
Expand Down Expand Up @@ -378,9 +396,11 @@ const BottomSheet = (props: HvComponentProps) => {
index: number,
contentSectionHeight: number,
) => {
const currentHeights = [...contentSectionHeights];
currentHeights[index] = contentSectionHeight;
setContentSectionHeights(currentHeights);
setContentSectionHeights(prevHeights => {
const currentHeights = [...prevHeights];
currentHeights[index] = contentSectionHeight;
return currentHeights;
});
};

return (
Expand Down