ncore-react-native-sheet 1.0.0-alpha.0

package/src/index.tsx

@@ -0,0 +1,631 @@
+import React, {
+    useImperativeHandle,
+    forwardRef,
+    useEffect,
+    useState,
+    Fragment,
+    useMemo,
+    useRef
+} from "react";
+import {
+    PanResponderGestureState,
+    TouchableWithoutFeedback,
+    GestureResponderEvent,
+    PanResponder,
+    ScrollView,
+    Animated,
+    FlatList,
+    View
+} from "react-native";
+import styleSheet from "./styles";
+import {
+    useSafeAreaInsets
+} from "react-native-safe-area-context";
+import {
+    RefForwardingComponent,
+    ISheetProps,
+    DistsType,
+    SheetRef
+} from "./types";
+import {
+    windowHeight
+} from "./constants";
+
+const ANIMATION_TO_SNAP_DURATION = 75;
+const ANIMATION_CLOSE_DURATION = 400;
+const ANIMATION_OPEN_DURATION = 300;
+const VELOCITY_CLOSE = 1.2;
+
+const Sheet: RefForwardingComponent<SheetRef, ISheetProps<any>> = ({
+    handlerColor = "#c4c2c2",
+    panGestureEnabled = true,
+    snapPoint: snapPointProp,
+    isCanFullScreenOnSnap,
+    withSafeArea = true,
+    handler = "inside",
+    autoHeight = true,
+    headerComponent,
+    footerComponent,
+    scrollViewProps,
+    onOverlayPress,
+    withFullScreen,
+    flatListProps,
+    contentStyle,
+    overlayStyle,
+    rootStyle,
+    onClosed,
+    onOpened,
+    children,
+    ...props
+}, ref) => {
+    const insets = useSafeAreaInsets();
+    let maxHeight = withSafeArea ? windowHeight - insets.top : windowHeight;
+    let snapPoint = snapPointProp || maxHeight;
+
+    const [isVisible, setIsVisible] = useState<boolean>(false);
+
+    const contentContainerHeight = useRef(0);
+    const headerContainerHeight = useRef(0);
+    const isScrollable = useRef(false);
+    const contentHeight = useRef(0);
+    const listHeight = useRef(0);
+
+    const moveHeight = useRef(new Animated.Value(snapPoint)).current;
+    const beforeYPosition = useRef(new Animated.Value(0)).current;
+    const height = useRef(new Animated.Value(snapPoint)).current;
+    const overlayOpacity = useRef(new Animated.Value(0)).current;
+    const moveYPosition = useRef(new Animated.Value(0)).current;
+    const opening = useRef(new Animated.Value(0)).current;
+
+    const isAtBottomRef = useRef(false);
+    const scrollOffsetRef = useRef(0);
+    const isScrolling = useRef(false);
+
+    const flatListRef = useRef<FlatList>(null);
+
+    useEffect(() => {
+        isAtBottomRef.current = false;
+        scrollOffsetRef.current = 0;
+
+        if (snapPointProp && snapPointProp > windowHeight || withFullScreen) {
+            snapPoint = maxHeight;
+        }
+    }, []);
+
+    const checkScrollability = (contentH: number, listH: number) => {
+        if (listH > 0 && contentH > listH) {
+            isScrollable.current = true;
+        } else {
+            isScrollable.current = false;
+        }
+    };
+
+    const calculateAutoHeight = (contentHeight: number, headerHeight: number) => {
+        moveHeight.setValue(contentHeight + headerHeight);
+        height.setValue(contentHeight + headerHeight);
+        snapPoint = contentHeight + headerHeight;
+    };
+
+    useImperativeHandle(
+        ref,
+        () => ({
+            close,
+            open
+        }),
+        []
+    );
+
+    const open = () => {
+        opening.setValue(1);
+        openAnimate();
+
+        setTimeout(() => {
+            if (onOpened) onOpened();
+            opening.setValue(0);
+        }, ANIMATION_OPEN_DURATION);
+    };
+
+    const close = () => {
+        closeAnimate();
+
+        setTimeout(() => {
+            if (flatListProps && flatListProps.data?.length) {
+                flatListRef?.current?.scrollToIndex({
+                    index: 0,
+                    animated: false
+                });
+            }
+            if (onClosed) onClosed();
+        }, ANIMATION_CLOSE_DURATION);
+    };
+
+    const openAnimate = () => {
+        setIsVisible(true);
+        let toValue = (withFullScreen ? withSafeArea ? windowHeight - (insets.top) : windowHeight : snapPoint) * -1;
+
+        Animated.parallel([
+            Animated.timing(moveYPosition, {
+                toValue: toValue,
+                useNativeDriver: false,
+                duration: ANIMATION_OPEN_DURATION
+            }),
+            Animated.timing(overlayOpacity, {
+                toValue: .1,
+                useNativeDriver: false,
+                duration: ANIMATION_OPEN_DURATION
+            }),
+            Animated.timing(beforeYPosition, {
+                toValue: toValue,
+                useNativeDriver: false,
+                duration: ANIMATION_OPEN_DURATION
+            })
+        ]).start();
+    };
+
+    const closeAnimate = () => {
+        Animated.parallel([
+            Animated.timing(beforeYPosition, {
+                toValue: 50,
+                useNativeDriver: false,
+                duration: ANIMATION_CLOSE_DURATION
+            }),
+            Animated.timing(moveYPosition, {
+                toValue: 50,
+                useNativeDriver: false,
+                duration: ANIMATION_CLOSE_DURATION
+            }),
+            Animated.timing(height, {
+                toValue: snapPoint,
+                useNativeDriver: false,
+                duration: ANIMATION_CLOSE_DURATION
+            }),
+            Animated.timing(moveHeight, {
+                toValue: snapPoint,
+                useNativeDriver: false,
+                duration: ANIMATION_CLOSE_DURATION
+            }),
+            Animated.timing(overlayOpacity, {
+                toValue: 0,
+                useNativeDriver: false,
+                duration: ANIMATION_CLOSE_DURATION
+            })
+        ]).start(e => {
+            if (e.finished) {
+                setIsVisible(false);
+            }
+        });
+    };
+
+    const disableScroll = () => {
+        if (flatListProps) {
+            flatListRef.current?.setNativeProps({
+                scrollEnabled: false
+            });
+        }
+    };
+
+    const enableScroll = () => {
+        isAtBottomRef.current = false;
+        if (flatListProps) {
+            flatListRef.current?.setNativeProps({
+                scrollEnabled: true
+            });
+        }
+    };
+
+    const onMoveShouldSetPanResponderContent = (e: GestureResponderEvent, gestureState: PanResponderGestureState) => {
+        const {
+            dy
+        } = gestureState;
+
+        if (!isScrolling) {
+            return true;
+        }
+
+        // FlatList scroll ediyorsa panResponder devreye girmesin
+        if (scrollOffsetRef.current < 0 && dy < 0) {
+            // flatlist altta değilken yukarı kaydırma scroll'a gitmeli
+            return false;
+        }
+
+        // FlatList alttayken yukarı çekiyorsa → devreye girsin
+        if (isAtBottomRef.current && dy < 0) {
+            return true;
+        }
+
+        // Aşağı çekme (her zaman sheet)
+        if (dy > 5 && scrollOffsetRef.current <= 0) {
+            return true;
+        }
+
+        if (!isScrollable.current) {
+            return true;
+        }
+
+        return false;
+    };
+
+    const onPanResponderGrant = (e: GestureResponderEvent, gestureState: PanResponderGestureState) => {
+        const {
+            dy, dx, y0
+        } = gestureState;
+
+        disableScroll();
+
+        // @ts-ignore
+        const extra = height._value - snapPoint;
+
+        // @ts-ignore
+        beforeYPosition.setValue(beforeYPosition._value - extra);
+        height.setValue(snapPoint);
+    };
+
+    const onPanResponderMove = (e: GestureResponderEvent, gestureState: PanResponderGestureState) => {
+        const {
+            dy, moveY
+        } = gestureState;
+
+        // @ts-ignore
+        const _beforeYPosition = beforeYPosition._value;
+
+        const newYPosition = _beforeYPosition + dy;
+
+        if (newYPosition > -snapPoint) {
+            // Snap altı
+            moveHeight.setValue(snapPoint);
+            moveYPosition.setValue(newYPosition);
+        } else {
+            // Snap üstü
+            if (!panGestureEnabled) {
+                return;
+            }
+            const absNewY = Math.abs(newYPosition);
+            const extra = Math.max(0, absNewY - snapPoint);
+            const expandedHeight = Math.min(snapPoint + extra, maxHeight);
+
+            moveHeight.setValue(expandedHeight);
+            moveYPosition.setValue(-snapPoint);
+        }
+    };
+
+    const onPanResponderEnd = (e: GestureResponderEvent, gestureState: PanResponderGestureState) => {
+        const {
+            vy, dy
+        } = gestureState;
+
+        enableScroll();
+        // @ts-ignore
+        const moveHeightValue = moveHeight._value;
+        // @ts-ignore
+        const currentYValue = moveYPosition._value;
+        const isBelowSnap = moveHeightValue === snapPoint;
+
+        // @ts-ignore
+        const _moveYPosition = moveHeight._value;
+
+        let targetHeight = snapPoint;
+        let targetY = snapPoint * -1;
+
+        if (vy > VELOCITY_CLOSE) {
+            close();
+            return;
+        }
+
+        const dists: DistsType = {
+            distToTop: {
+                value: isBelowSnap && !withFullScreen ? windowHeight * 10 : Math.abs(moveHeightValue - windowHeight),
+                action: () => {
+                    targetHeight = maxHeight;
+                    targetY = snapPoint * -1;
+                },
+            },
+            distToBottom: {
+                value: isBelowSnap ? Math.abs(currentYValue) : Math.abs(moveHeightValue),
+                action: () => {
+                    close();
+                },
+            },
+        };
+
+        if (snapPointProp) {
+            dists.distToSnap = {
+                value: isBelowSnap ? Math.abs(currentYValue + snapPoint) : Math.abs(moveHeightValue - snapPoint),
+                action: () => {
+                    targetHeight = snapPoint;
+                    targetY = snapPoint * -1;
+                }
+            };
+        }
+
+        const [key, distItem] = Object.entries(dists).reduce(
+            (min, curr) => (curr[1].value < min[1].value ? curr : min)
+        );
+
+        distItem.action();
+
+        if (key === "distToBottom") {
+            return;
+        }
+
+        Animated.parallel([
+            Animated.timing(moveHeight, {
+                toValue: targetHeight,
+                useNativeDriver: false,
+                duration: ANIMATION_TO_SNAP_DURATION
+            }),
+            Animated.timing(moveYPosition, {
+                toValue: targetY,
+                useNativeDriver: false,
+                duration: ANIMATION_TO_SNAP_DURATION
+            }),
+        ])
+            .start();
+
+        beforeYPosition.setValue(targetY);
+        height.setValue(targetHeight);
+    };
+
+    const panResponderHandle = useMemo(() => PanResponder.create({
+        //onStartShouldSetPanResponder: (evt, gestureState) => true,
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderGrant: onPanResponderGrant,
+        onPanResponderMove: onPanResponderMove,
+        onPanResponderEnd: onPanResponderEnd
+    }),
+        [
+        ]);
+
+    const panResponderContent = useMemo(() => PanResponder.create({
+        //onStartShouldSetPanResponder: (evt, gestureState) => true,
+        onMoveShouldSetPanResponder: onMoveShouldSetPanResponderContent,
+        onPanResponderGrant: onPanResponderGrant,
+        onPanResponderMove: onPanResponderMove,
+        onPanResponderEnd: onPanResponderEnd
+    }),
+        [
+
+        ]);
+
+    const renderOverlay = () => {
+        return <TouchableWithoutFeedback
+            style={{
+                ...styleSheet.overlayTouchable,
+                ...overlayStyle
+            }}
+            onPress={() => {
+                if (onOverlayPress) {
+                    onOverlayPress();
+                }
+            }}
+        >
+            <Animated.View
+                style={{
+                    ...styleSheet.overlayView,
+                    opacity: overlayOpacity,
+                }}
+            />
+        </TouchableWithoutFeedback>;
+    };
+
+    const renderHandler = () => {
+        if (withFullScreen && withSafeArea) {
+            return null;
+        }
+
+        return <View
+            style={{
+                ...styleSheet.handler,
+                backgroundColor: handlerColor
+            }}
+        >
+        </View>;
+    };
+
+    const renderHeader = () => {
+        return <Animated.View
+            {...panResponderHandle.panHandlers}
+            key="bottomSheet-header-key"
+            onLayout={(e) => {
+                if (withFullScreen) {
+                    return;
+                }
+
+                if (!autoHeight || snapPointProp) {
+                    return;
+                }
+                //@ts-ignore
+                if (opening._value !== 1) {
+                    return;
+                }
+
+                const absNewHeight = Math.abs(e.nativeEvent.layout.height);
+                const layoutHeight = Math.min(absNewHeight, maxHeight);
+
+                headerContainerHeight.current = layoutHeight;
+                calculateAutoHeight(contentContainerHeight.current, layoutHeight);
+            }}
+            style={[
+                styleSheet.handlerContainer,
+                handler === "outside" ?
+                    {
+                        position: "absolute",
+                        top: -24
+                    }
+                    :
+                    null
+            ]}
+        >
+            {renderHandler()}
+            {renderHeaderComponent()}
+        </Animated.View>;
+    };
+
+    const renderHeaderComponent = () => {
+        if (!headerComponent) {
+            return null;
+        }
+
+        return headerComponent;
+    };
+
+    const renderContentItems = () => {
+        if (flatListProps) {
+            return <FlatList
+                {...flatListProps}
+                key={"bottomSheet-flatlist-key"}
+                ref={flatListRef}
+                scrollEnabled={true}
+                onLayout={(e) => {
+                    const height = e.nativeEvent.layout.height;
+                    listHeight.current = height;
+
+                    checkScrollability(contentHeight.current, height);
+                }}
+                onContentSizeChange={(w, h) => {
+                    isAtBottomRef.current = false;
+                    contentHeight.current = h;
+                    checkScrollability(h, listHeight.current);
+                }}
+                onScroll={(e) => {
+                    const {
+                        layoutMeasurement,
+                        contentOffset,
+                        contentSize
+                    } = e.nativeEvent;
+
+                    scrollOffsetRef.current = contentOffset.y;
+
+                    const paddingToBottom = 12; // tolerans
+                    isAtBottomRef.current = layoutMeasurement.height + contentOffset.y >= contentSize.height - paddingToBottom;
+                }}
+                onTouchStart={() => {
+                    isScrolling.current = true;
+                }}
+                onTouchEnd={() => {
+                    isScrolling.current = false;
+                }}
+                scrollEventThrottle={16}
+            />;
+        }
+
+        if (scrollViewProps) {
+            return <ScrollView
+                {...scrollViewProps}
+                scrollEnabled={true}
+                onLayout={(e) => {
+                    const height = e.nativeEvent.layout.height;
+                    listHeight.current = height;
+                    checkScrollability(contentHeight.current, height);
+                }}
+                onContentSizeChange={(w, h) => {
+                    isAtBottomRef.current = false;
+                    contentHeight.current = h;
+                    checkScrollability(h, listHeight.current);
+                }}
+                onScroll={(e) => {
+                    const {
+                        layoutMeasurement,
+                        contentOffset,
+                        contentSize
+                    } = e.nativeEvent;
+
+                    scrollOffsetRef.current = contentOffset.y;
+
+                    const paddingToBottom = 12; // tolerans
+                    isAtBottomRef.current = layoutMeasurement.height + contentOffset.y >= contentSize.height - paddingToBottom;
+                }}
+                onTouchStart={() => {
+                    isScrolling.current = true;
+                }}
+                onTouchEnd={() => {
+                    isScrolling.current = false;
+                }}
+                scrollEventThrottle={16}
+            >
+                {children}
+            </ScrollView>;
+        }
+
+        return children;
+    };
+
+    const renderFooterComponent = () => {
+        if (!footerComponent) {
+            return null;
+        }
+
+        return footerComponent;
+    };
+
+    const renderContent = () => {
+        return <Animated.View
+            key="bottomSheet-content-key"
+            onLayout={(e) => {
+                if (withFullScreen) {
+                    return;
+                }
+
+                if (!autoHeight || snapPointProp) {
+                    return;
+                }
+                //@ts-ignore
+                if (opening._value !== 1) {
+                    return;
+                }
+
+                const absNewHeight = Math.abs(withSafeArea ? e.nativeEvent.layout.height + insets.bottom : e.nativeEvent.layout.height);
+                const layoutHeight = Math.min(absNewHeight, maxHeight);
+
+                contentContainerHeight.current = layoutHeight;
+                calculateAutoHeight(layoutHeight, headerContainerHeight.current);
+            }}
+            style={{
+                ...styleSheet.bottomViewChildContainer,
+                ...contentStyle,
+                flex: withFullScreen || !autoHeight || snapPointProp ? 1 : 0
+            }}
+            {...panResponderContent.panHandlers}
+        >
+            {renderContentItems()}
+            {renderFooterComponent()}
+        </Animated.View>;
+    };
+
+    const renderView = () => {
+        return <Animated.View
+            key={"bottomSheet-root-view-key"}
+            style={{
+                backgroundColor: "#fff",
+                borderRadius: 8,
+                ...rootStyle,
+                ...styleSheet.bottomViewContainer,
+                //@ts-ignore
+                height: moveHeight._value > 0 ? moveHeight : "auto",
+                bottom: snapPoint * -1,
+                transform: [
+                    {
+                        translateY: moveYPosition
+                    }
+                ]
+            }}
+        >
+            {renderHeader()}
+            {renderContent()}
+        </Animated.View>;
+    };
+
+    return isVisible ?
+        <Fragment>
+            {renderOverlay()}
+            {renderView()}
+        </Fragment>
+        :
+        null;
+};
+
+export type {
+    ISheetProps,
+    SheetRef
+} from "./types";
+
+export default forwardRef(Sheet);

package/src/styles.ts

@@ -0,0 +1,51 @@
+import {
+    StyleSheet
+} from "react-native";
+import {
+    windowHeight,
+    windowWidth
+} from "./constants";
+const styleSheet = StyleSheet.create({
+    bottomViewContainer: {
+        position: "absolute",
+        overflow: "hidden",
+        width: windowWidth
+    },
+    bottomViewChildContainer: {
+        overflow: "hidden"
+    },
+    overlayTouchable: {
+        position: "absolute",
+        height: windowHeight,
+        width: windowWidth,
+        bottom: 0,
+        right: 0,
+        left: 0,
+        top: 0
+    },
+    handlerContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        width: "100%",
+        padding: 8
+    },
+    outsideHandlerContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        position: "absolute",
+        width: "100%",
+        padding: 8,
+        top: -24
+    },
+    handler: {
+        position: "relative",
+        borderRadius: 4,
+        height: 8,
+        width: 48
+    },
+    overlayView: {
+        backgroundColor: "black",
+        flex: 1
+    }
+});
+export default styleSheet;