feat: innerRef prop + updating defaults and docs

snooperapp · May 17, 2020 · 67d0a18 · 67d0a18
1 parent ed2e28a
commit 67d0a18
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -62,24 +62,15 @@ const styles = StyleSheet.create({
   header: {
     alignItems: 'center',
     backgroundColor: 'white',
-    paddingTop: 20,
+    paddingVertical: 20,
     borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: -10,
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 5.0,
-    elevation: 16,
+    borderTopRightRadius: 20
   },
   panelHandle: {
     width: 40,
     height: 2,
     backgroundColor: 'rgba(0,0,0,0.3)',
-    borderRadius: 4,
-    marginBottom: 10,
+    borderRadius: 4
   },
   item: {
     padding: 20,
@@ -100,17 +91,19 @@ This is the list of exclusive props that are meant to be used to customise the b
 
 | Name                      | Required | Type | Description |
 | ------------------------- | -------- | ------- | ------------|
-| componentType             | yes      | `string `       | 'FlatList', 'ScrollView', or 'SectionList' |
-| snapPoints                | yes      | `Array<string \| number>`       | Array of numbers and/or percentages that indicate the different resting positions of the bottom sheet (in dp or %), **starting from the top**. If a percentage is used, that would translate to the relative amount of the total window height. If you want that percentage to be calculated based on the parent available space instead, for example to account for safe areas or navigation bars, use it in combination with `topInset` prop |
-| initialSnapIndex          | yes       | `number`       | Index that references the initial resting position of the drawer, **starting from the top** |
-| renderHandle              | yes      |  `() => React.ReactNode`      | Render prop for the handle, should return a React Element |
-| onSettle                  | no       |  `(index: number) => void`       | Callback that is executed right after the bottom sheet settles in one of the snapping points. The new index is provided on the callback |
-| animatedPosition          | no       |  `Animated.Value<number>`       | Animated value that tracks the position of the drawer, being: 0 => closed, 1 => fully opened |
-| animationConfig           | no       | `{ duration: number, easing: Animated.EasingFunction }`         | Timing configuration for the animation, by default it uses a duration of 350ms and easing fn `Easing.inOut(Easing.ease)`  |
-| topInset                  | no       | `number`  | This value is useful to provide an offset (in dp) when applying percentages for snapping points |
+| `componentType`             | yes      | `string `       | 'FlatList', 'ScrollView', or 'SectionList' |
+| `snapPoints`                | yes      | `Array<string \| number>`       | Array of numbers and/or percentages that indicate the different resting positions of the bottom sheet (in dp or %), **starting from the top**. If a percentage is used, that would translate to the relative amount of the total window height. If you want that percentage to be calculated based on the parent available space instead, for example to account for safe areas or navigation bars, use it in combination with `topInset` prop |
+| `initialSnapIndex`          | yes      | `number`       | Index that references the initial resting position of the drawer, **starting from the top** |
+| `renderHandle`              | yes      |  `() => React.ReactNode`      | Render prop for the handle, should return a React Element |
+| `onSettle`                  | no       |  `(index: number) => void`       | Callback that is executed right after the bottom sheet settles in one of the snapping points. The new index is provided on the callback |
+| `animatedPosition`          | no       |  `Animated.Value<number>`       | Animated value that tracks the position of the drawer, being: 0 => closed, 1 => fully opened |
+| `animationConfig`           | no       | `{ duration: number, easing: Animated.EasingFunction }`         | Timing configuration for the animation, by default it uses a duration of 350ms and easing fn `Easing.inOut(Easing.linear)`  |
+| `topInset`                  | no       | `number`  | This value is useful to provide an offset (in dp) when applying percentages for snapping points |
+| `innerRef`                  | no       | `RefObject`  | Ref to the inner scrollable component (ScrollView, FlatList or SectionList), so that you can call its imperative methods. For instance, calling `scrollTo` on a ScrollView. In order to so, you have to use `getNode` as well, since it's wrapped into an _animated_ component: `ref.current.getNode().scrollTo({y: 0, animated: true})` |
+
 
 ### Inherited
-Depending on the value of `componentType` chosen, the bottom sheet component will inherit its underlying props, being one of 
+Depending on the value of `componentType` chosen, the bottom sheet component will inherit its underlying props, being one of
 [FlatListProps](https://reactnative.dev/docs/flatlist#props), [ScrollViewProps](https://reactnative.dev/docs/scrollview#props) or [SectionListProps](https://reactnative.dev/docs/sectionlist#props), so that you can tailor the scrollable content behaviour as per your needs.
 
 ## Methods

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, RefObject } from 'react';
 import {
   Dimensions,
   FlatList,
@@ -55,7 +55,7 @@ const DRAG_TOSS = 0.05;
 const IOS_NORMAL_DECELERATION_RATE = 0.998;
 const ANDROID_NORMAL_DECELERATION_RATE = 0.985;
 const DEFAULT_ANIMATION_DURATION = 350;
-const DEFAULT_EASING = Easing.inOut(Easing.ease);
+const DEFAULT_EASING = Easing.inOut(Easing.linear);
 const imperativeScrollOptions = {
   [FlatListComponentType]: {
     method: 'scrollToIndex',
@@ -152,6 +152,10 @@ type CommonProps = {
    * @see https://github.com/th3rdwave/react-native-safe-area-context#usage, insets.top
    */
   topInset: number;
+  /**
+   * Reference to FlatList, ScrollView or SectionList in order to execute its imperative methods.
+   */
+  innerRef: RefObject<FlatList | ScrollView | SectionList>;
 };
 
 type Props<T> = CommonProps &
@@ -160,6 +164,7 @@ type Props<T> = CommonProps &
 export class ScrollBottomSheet<T extends any> extends Component<Props<T>> {
   static defaultProps = {
     topInset: 0,
+    innerRef: React.createRef<AnimatedScrollableComponent>(),
   };
   /**
    * Gesture Handler references
@@ -169,10 +174,6 @@ export class ScrollBottomSheet<T extends any> extends Component<Props<T>> {
   private drawerContentRef = React.createRef<PanGestureHandler>();
   private scrollComponentRef = React.createRef<NativeViewGestureHandler>();
 
-  /**
-   * Reference to FlatList, ScrollView or SectionList in order to execute its imperative methods.
-   */
-  private contentComponentRef = React.createRef<AnimatedScrollableComponent>();
   /**
    * ScrollView prop
    */
@@ -622,8 +623,7 @@ export class ScrollBottomSheet<T extends any> extends Component<Props<T>> {
                 overScrollMode="never"
                 bounces={false}
                 {...rest}
-                // @ts-ignore
-                ref={this.contentComponentRef}
+                ref={this.props.innerRef}
                 // @ts-ignore
                 decelerationRate={this.decelerationRate}
                 onScrollBeginDrag={this.onScrollBeginDrag}
@@ -675,7 +675,7 @@ export class ScrollBottomSheet<T extends any> extends Component<Props<T>> {
                     this.props.componentType
                   ];
                   // @ts-ignore
-                  this.contentComponentRef.current?._component[method](args);
+                  this.props.innerRef.current?.getNode()[method](args);
                 })
               ),
               set(this.dragY, 0),