@sdcx/bottom-sheet 0.12.0 → 0.14.0

package/android/src/main/java/com/reactnative/bottomsheet/BottomSheet.java

@@ -55,6 +55,8 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
 
     private SettleRunnable settleRunnable = null;
 
+    private boolean draggable;
+
     private int peekHeight;
 
     private int expandedOffset;
@@ -156,6 +158,10 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
         }
     }
 
+    public void setDraggable(boolean draggable) {
+        this.draggable = draggable;
+    }
+
     public void setState(BottomSheetState state) {
         if (state == this.state) {
             return;
@@ -211,6 +217,9 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
     }
 
     private boolean shouldInterceptTouchEvent(MotionEvent event) {
+        if (!draggable) {
+            return false;
+        }
         int action = event.getActionMasked();
         // Record the velocity
         if (action == MotionEvent.ACTION_DOWN) {
@@ -270,6 +279,10 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
 
     @Override
     public boolean onTouchEvent(MotionEvent event) {
+        if (!draggable) {
+            return false;
+        }
+        
         int action = event.getActionMasked();
         if (state == DRAGGING && action == MotionEvent.ACTION_DOWN) {
             return true;

package/android/src/main/java/com/reactnative/bottomsheet/BottomSheetManager.java

@@ -42,4 +42,9 @@ public class BottomSheetManager extends ViewGroupManager<BottomSheet> {
         view.setState(BottomSheetState.valueOf(state.toUpperCase()));
     }
 
+    @ReactProp(name = "draggable")
+    public void setDraggable(BottomSheet view, boolean draggable) {
+        view.setDraggable(draggable);
+    }
+
 }

package/ios/BottomSheet/RNBottomSheet.h

@@ -12,6 +12,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property(nonatomic, copy) RCTDirectEventBlock onStateChanged;
 @property(nonatomic, assign) CGFloat peekHeight;
 @property(nonatomic, assign) RNBottomSheetState state;
+@property(nonatomic, assign) BOOL draggable;
 
 - (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher;
 

package/ios/BottomSheet/RNBottomSheet.m

@@ -171,6 +171,10 @@
 }
 
 - (void)handlePan:(UIPanGestureRecognizer *)pan {
+    if (!self.draggable) {
+        return;
+    }
+    
     CGFloat translationY = [pan translationInView:self.contentView].y;
     [pan setTranslation:CGPointZero inView:self.contentView];
     
@@ -292,6 +296,11 @@
         return;
     }
 
+    if (self.state == RNBottomSheetStateSettling) {
+        [self.layer removeAllAnimations];
+        return;
+    }
+    
     if (CGRectEqualToRect(self.contentView.frame, CGRectZero)) {
         [self setStateInternal:state];
         return;
@@ -302,21 +311,21 @@
 
 - (void)settleToState:(RNBottomSheetState)state withFling:(BOOL)fling {
     if (state == RNBottomSheetStateCollapsed) {
-        [self startSettlingToState:state top:self.maxY withFling:fling];
+        [self settleToState:state top:self.maxY withFling:fling];
     } else if (state == RNBottomSheetStateExpanded) {
-        [self startSettlingToState:state top:self.minY withFling:fling];
+        [self settleToState:state top:self.minY withFling:fling];
     } else if (state == RNBottomSheetStateHidden) {
-        [self startSettlingToState:state top:self.frame.size.height withFling:fling];
+        [self settleToState:state top:self.frame.size.height withFling:fling];
     }
 }
 
-- (void)startSettlingToState:(RNBottomSheetState)state top:(CGFloat)top withFling:(BOOL)fling {
+- (void)settleToState:(RNBottomSheetState)state top:(CGFloat)top withFling:(BOOL)fling {
     self.target.pagingEnabled = YES;
     [self setStateInternal:RNBottomSheetStateSettling];
     [self startWatchBottomSheetTransition];
     [self.layer removeAllAnimations];
 //    CGFloat duration = fmin(fabs(self.contentView.frame.origin.y - top) / (self.maxY - self.minY) * 0.3, 0.3);
-    [UIView animateWithDuration:fling ? 0.5 : 0.25 delay:0 usingSpringWithDamping:1 initialSpringVelocity:1 options:NULL animations:^{
+    [UIView animateWithDuration:fling ? 0.5 : 0.25 delay:0 usingSpringWithDamping:1 initialSpringVelocity:1 options:UIViewAnimationOptionTransitionNone animations:^{
         self.contentView.frame = CGRectOffset(self.contentView.frame, 0, top - self.contentView.frame.origin.y);
     } completion:^(BOOL finished) {
         self.target.pagingEnabled = NO;
@@ -331,6 +340,18 @@
     }
     _state = state;
     
+    if (state == RNBottomSheetStateExpanded) {
+        [self dispatchOnSlide:self.minY];
+    }
+    
+    if (state == RNBottomSheetStateHidden) {
+        [self dispatchOnSlide:self.frame.size.height];
+    }
+    
+    if (state == RNBottomSheetStateCollapsed) {
+        [self dispatchOnSlide:self.maxY];
+    }
+    
     if (state == RNBottomSheetStateCollapsed || state == RNBottomSheetStateExpanded || state == RNBottomSheetStateHidden) {
         [self.eventDispatcher sendEvent:[[RNBottomSheetStateChangedEvent alloc] initWithViewTag:self.reactTag state:state]];
     }
@@ -352,11 +373,6 @@
 }
 
 - (void)stopWatchBottomSheetTransition {
-    if (self.state == RNBottomSheetStateCollapsed) {
-        [self dispatchOnSlide:self.maxY];
-    } else if (self.state == RNBottomSheetStateExpanded) {
-        [self dispatchOnSlide:self.minY];
-    }
     if(_displayLink){
         [_displayLink invalidate];
         _displayLink = nil;

package/ios/BottomSheet/RNBottomSheetManager.m

@@ -15,6 +15,7 @@ RCT_EXPORT_MODULE(BottomSheet)
 RCT_EXPORT_VIEW_PROPERTY(onSlide, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onStateChanged, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(peekHeight, CGFloat)
+RCT_EXPORT_VIEW_PROPERTY(draggable, BOOL)
 
 RCT_CUSTOM_VIEW_PROPERTY(state, NSString, RNBottomSheet) {
     view.state = RNBottomSheetStateFromString([RCTConvert NSString:json]);

package/lib/index.d.ts

@@ -14,6 +14,7 @@ interface NativeBottomSheetProps extends ViewProps {
     onSlide?: (event: NativeSyntheticEvent<OffsetChangedEventData>) => void;
     onStateChanged?: (event: NativeSyntheticEvent<StateChangedEventData>) => void;
     peekHeight?: number;
+    draggable?: boolean;
     state?: BottomSheetState;
     contentContainerStyle?: ViewProps['style'];
 }

package/lib/index.js

@@ -3,9 +3,9 @@ import { requireNativeComponent, StyleSheet, View } from 'react-native';
 import splitLayoutProps from './splitLayoutProps';
 const NativeBottomSheet = requireNativeComponent('BottomSheet');
 const BottomSheet = React.forwardRef((props, ref) => {
-    const { style, contentContainerStyle, children, peekHeight = 200, state = 'collapsed', fitToContents, ...rest } = props;
+    const { style, contentContainerStyle, children, peekHeight = 200, draggable = true, state = 'collapsed', fitToContents, ...rest } = props;
     const { outer, inner } = splitLayoutProps(StyleSheet.flatten(style));
-    return (<NativeBottomSheet style={[StyleSheet.absoluteFill, outer]} peekHeight={peekHeight} state={state} {...rest} ref={ref}>
+    return (<NativeBottomSheet style={[StyleSheet.absoluteFill, outer]} peekHeight={peekHeight} draggable={draggable} state={state} {...rest} ref={ref}>
       <View style={[fitToContents ? styles.fitToContents : StyleSheet.absoluteFill, inner, contentContainerStyle]} collapsable={false}>
         {children}
       </View>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sdcx/bottom-sheet",
   "description": "A react-native BottomSheet component.",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "main": "./lib/index.js",
   "typings": "./lib/index.d.ts",
   "react-native": "src/index",
@@ -11,6 +11,7 @@
     "lib",
     "android",
     "ios",
+    "docs",
     "RNBottomSheet.podspec",
     "!android/build",
     "!ios/build",

package/src/index.tsx

@@ -19,6 +19,7 @@ interface NativeBottomSheetProps extends ViewProps {
   onSlide?: (event: NativeSyntheticEvent<OffsetChangedEventData>) => void
   onStateChanged?: (event: NativeSyntheticEvent<StateChangedEventData>) => void
   peekHeight?: number
+  draggable?: boolean
   state?: BottomSheetState
   contentContainerStyle?: ViewProps['style']
 }
@@ -37,6 +38,7 @@ const BottomSheet = React.forwardRef<NativeBottomSheetInstance, BottomSheetProps
     contentContainerStyle,
     children,
     peekHeight = 200,
+    draggable = true,
     state = 'collapsed',
     fitToContents,
     ...rest
@@ -46,6 +48,7 @@ const BottomSheet = React.forwardRef<NativeBottomSheetInstance, BottomSheetProps
     <NativeBottomSheet
       style={[StyleSheet.absoluteFill, outer]}
       peekHeight={peekHeight}
+      draggable={draggable}
       state={state}
       {...rest}
       ref={ref}>