@sdcx/bottom-sheet 0.17.0 → 1.0.0

package/README.md

@@ -4,9 +4,15 @@
 
 它位于屏幕底部，可拖拽，支持嵌套滚动，可以和可滚动视图（`FlatList`, `FlashList`, `WebView` 等等）一起使用。
 
-|                                                      |                                                     |
-| ---------------------------------------------------- | --------------------------------------------------- |
-| <img src="./docs/assets/scrollview.gif" width="320"> | <img src="./docs/assets/pagerview.gif" width="320"> |
+<img src="https://raw.githubusercontent.com/sdcxtech/react-native-troika/master/packages/bottom-sheet/docs/assets/scrollview.gif" width="320">
+<img src="https://raw.githubusercontent.com/sdcxtech/react-native-troika/master/packages/bottom-sheet/docs/assets/pagerview.gif" width="320">
+
+## 版本兼容
+
+| 版本 | RN 版本 | RN 架构 |
+| ---- | ------- | ------- |
+| 0.x  | < 0.82  | 旧架构  |
+| 1.x  | >= 0.82 | 新架构  |
 
 ## Installation
 
@@ -21,26 +27,26 @@ pod install
 `BottomSheet` 在使用上是非常简单的，几乎没有什么心智负担。
 
 ```tsx
-import BottomSheet from '@sdcx/bottom-sheet'
+import BottomSheet from '@sdcx/bottom-sheet';
 
 const App = () => {
-  return (
-    <View style={styles.container}>
-      <ScrollView>...</ScrollView>
-      <BottomSheet peeekHeight={200}>
-        {
-          // 在这里放置你的内容，可以是任何组件，如：
-        }
-        <View />
-        <PagerView>
-          <FlatList nestedScrollEnabled />
-          <ScrollView nestedScrollEnabled />
-          <WebView />
-        </PagerView>
-      </BottomSheet>
-    </View>
-  )
-}
+	return (
+		<View style={styles.container}>
+			<ScrollView>...</ScrollView>
+			<BottomSheet peeekHeight={200}>
+				{
+					// 在这里放置你的内容，可以是任何组件，如：
+				}
+				<View />
+				<PagerView>
+					<FlatList nestedScrollEnabled />
+					<ScrollView nestedScrollEnabled />
+					<WebView />
+				</PagerView>
+			</BottomSheet>
+		</View>
+	);
+};
 ```
 
 > :exclamation: :exclamation: :exclamation:
@@ -54,53 +60,53 @@ const App = () => {
 
 `BottomSheet` 由内外两层视图组成，外层是绝对定位，默认填满父组件，除非设置了 `top` 样式属性，内层也是绝对定位，默认填满外层视图。外层的位置固定不变，内层则可拖动。
 
-![README-2023-04-18-16-17-39](./docs/assets/struct.png)
+![README-2023-04-18-16-17-39](https://raw.githubusercontent.com/sdcxtech/react-native-troika/master/packages/bottom-sheet/docs/assets/struct.png)
 
 `BottomSheet` 拥有 3 个属性和两个回调。
 
 ### 属性
 
-- `peekHeight`, 是指 BottomSheet 收起时，在屏幕上露出的高度，默认是 200。
+-   `peekHeight`, 是指 BottomSheet 收起时，在屏幕上露出的高度，默认是 200。
 
-- `state`, 是指 BottomSheet 的状态，有三种状态：
+-   `state`, 是指 BottomSheet 的状态，有三种状态：
 
-  - `'collapsed'`，收起状态，此时 BottomSheet 的高度为 `peekHeight`。
+    -   `'collapsed'`，收起状态，此时 BottomSheet 的高度为 `peekHeight`。
 
-  - `'expanded'`，展开状态，此时 BottomSheet 的高度为父组件的高度或内容的高度，参考 `fitToContents` 属性。
+    -   `'expanded'`，展开状态，此时 BottomSheet 的高度为父组件的高度或内容的高度，参考 `fitToContents` 属性。
 
-  - `'hidden'`，隐藏状态，此时 BottomSheet 的高度为 0。
+    -   `'hidden'`，隐藏状态，此时 BottomSheet 的高度为 0。
 
-- `fitToContents`，是指 BottomSheet 在展开时，是否适应内容的高度，默认是 `false`。当和可滚动列表，譬如 ScrollView 一起使用时，请保持默认值。
+-   `fitToContents`，是指 BottomSheet 在展开时，是否适应内容的高度，默认是 `false`。当和可滚动列表，譬如 ScrollView 一起使用时，请保持默认值。
 
-- `contentContainerStyle`，用来设置内层视图的样式。
+-   `contentContainerStyle`，用来设置内层视图的样式。
 
 ### 回调
 
-- `onStateChanged`, 是指 BottomSheet 状态变化时的回调，它和 `state` 属性是一对，用来实现受控模式。
+-   `onStateChanged`, 是指 BottomSheet 状态变化时的回调，它和 `state` 属性是一对，用来实现受控模式。
 
-  ```tsx
-  export type BottomSheetState = 'collapsed' | 'expanded' | 'hidden'
+    ```tsx
+    export type BottomSheetState = 'collapsed' | 'expanded' | 'hidden';
 
-  export interface StateChangedEventData {
-    state: BottomSheetState
-  }
+    export interface StateChangedEventData {
+    	state: BottomSheetState;
+    }
 
-  interface NativeBottomSheetProps extends ViewProps {
-    onStateChanged?: (event: NativeSyntheticEvent<StateChangedEventData>) => void
-  }
-  ```
+    interface NativeBottomSheetProps extends ViewProps {
+    	onStateChanged?: (event: NativeSyntheticEvent<StateChangedEventData>) => void;
+    }
+    ```
 
-- `onSlide`, 是指 BottomSheet 滑动时的回调，可以用它来实现一些动画效果。
+-   `onSlide`, 是指 BottomSheet 滑动时的回调，可以用它来实现一些动画效果。
 
-  ```tsx
-  export interface OffsetChangedEventData {
-    progress: number // 是指 `BottomSheet` 当前的位置在 `collapsedOffset` 和 `expandedOffset` 之间的比例，它的值在 0 和 1 之间。
-    offset: number // 是指 `BottomSheet` 当前的位置，它的值在 `collapsedOffset` 和 `expandedOffset` 之间。
-    expandedOffset: number // 是指 `BottomSheet` 完全展开时，内层顶部距离外层顶部的距离，通常是 0。但如果设置了 `fitToContents` 属性，则可能大于 0。
-    collapsedOffset: number // 是指 `BottomSheet` 完全收起时，内层顶部距离外层顶部的距离。可以看到，它的值等于外层的高度减去 `peekHeight`。
-  }
+    ```tsx
+    export interface OffsetChangedEventData {
+    	progress: number; // 是指 `BottomSheet` 当前的位置在 `collapsedOffset` 和 `expandedOffset` 之间的比例，它的值在 0 和 1 之间。
+    	offset: number; // 是指 `BottomSheet` 当前的位置，它的值在 `collapsedOffset` 和 `expandedOffset` 之间。
+    	expandedOffset: number; // 是指 `BottomSheet` 完全展开时，内层顶部距离外层顶部的距离，通常是 0。但如果设置了 `fitToContents` 属性，则可能大于 0。
+    	collapsedOffset: number; // 是指 `BottomSheet` 完全收起时，内层顶部距离外层顶部的距离。可以看到，它的值等于外层的高度减去 `peekHeight`。
+    }
 
-  interface NativeBottomSheetProps extends ViewProps {
-    onSlide?: (event: NativeSyntheticEvent<OffsetChangedEventData>) => void
-  }
-  ```
+    interface NativeBottomSheetProps extends ViewProps {
+    	onSlide?: (event: NativeSyntheticEvent<OffsetChangedEventData>) => void;
+    }
+    ```

package/RNBottomSheet.podspec

@@ -6,13 +6,14 @@ Pod::Spec.new do |s|
   s.name         = "RNBottomSheet"
   s.version      = package["version"]
   s.summary      = package["description"]
- 
+
   s.homepage     = package["homepage"]
   s.license      = package["license"]
   s.authors      = package["author"]
-  s.platforms    = { :ios => "10.0" }
+  s.platforms    = { :ios => min_ios_version_supported }
   s.source       = { :git => "https://github.com/github-account/bottom-sheet.git", :tag => "#{s.version}" }
 
   s.source_files = "ios/BottomSheet/**/*.{h,m,mm}"
-  s.dependency "React-Core"
-end
+
+  install_modules_dependencies(s)
+end

package/android/build.gradle

@@ -1,35 +1,58 @@
-// android/build.gradle
 
-def safeExtGet(prop, fallback) {
-    rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+buildscript {
+  repositories {
+    mavenCentral()
+    google()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:8.7.2"
+  }
 }
 
 apply plugin: 'com.android.library'
+apply plugin: 'com.facebook.react'
+
+def safeExtGet(prop, fallback) {
+    rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+}
 
 android {
-    compileOptions {
-        sourceCompatibility JavaVersion.VERSION_1_8
-        targetCompatibility JavaVersion.VERSION_1_8
+
+  def agpVersion = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION.tokenize('.')
+  // Check AGP version for backward compatibility w/react-native versions still on gradle plugin 6
+  def major = agpVersion[0].toInteger()
+  def minor = agpVersion[1].toInteger()
+  if ((major == 7 && minor >= 3) || major >= 8) {
+    namespace "com.reactnative.bottomsheet"
+    buildFeatures {
+      buildConfig true
     }
+  }
 
-    compileSdkVersion safeExtGet('compileSdkVersion', 30)
-    buildToolsVersion safeExtGet('buildToolsVersion', '30.0.2')
+  compileSdkVersion safeExtGet('compileSdkVersion', 35)
+  buildToolsVersion safeExtGet('buildToolsVersion', '35.0.0')
 
-    defaultConfig {
-        minSdkVersion safeExtGet('minSdkVersion', 21)
-        targetSdkVersion safeExtGet('targetSdkVersion', 30)
-        versionCode 1
-        versionName "1.0.0"
-    }
+  defaultConfig {
+    minSdkVersion safeExtGet('minSdkVersion', 24)
+    targetSdkVersion safeExtGet('targetSdkVersion', 35)
+  }
 
-    buildTypes {
-        release {
-            consumerProguardFiles 'proguard-rules.pro'
+  sourceSets {
+        main {
+            java.srcDirs += [
+                    "generated/java",
+                    "generated/jni"
+            ]
         }
     }
 }
 
+repositories {
+  google()
+  mavenCentral()
+}
+
 dependencies {
-    implementation fileTree(dir: 'libs', include: ['*.jar'])
-    implementation 'com.facebook.react:react-native:+'
+  api 'com.facebook.react:react-native:+'
 }

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

@@ -1,11 +1,11 @@
 package com.reactnative.bottomsheet;
 
 
-import static com.reactnative.bottomsheet.BottomSheetState.COLLAPSED;
-import static com.reactnative.bottomsheet.BottomSheetState.DRAGGING;
-import static com.reactnative.bottomsheet.BottomSheetState.EXPANDED;
-import static com.reactnative.bottomsheet.BottomSheetState.HIDDEN;
-import static com.reactnative.bottomsheet.BottomSheetState.SETTLING;
+import static com.reactnative.bottomsheet.BottomSheetStatus.COLLAPSED;
+import static com.reactnative.bottomsheet.BottomSheetStatus.DRAGGING;
+import static com.reactnative.bottomsheet.BottomSheetStatus.EXPANDED;
+import static com.reactnative.bottomsheet.BottomSheetStatus.HIDDEN;
+import static com.reactnative.bottomsheet.BottomSheetStatus.SETTLING;
 import static java.lang.Math.max;
 
 import android.annotation.SuppressLint;
@@ -51,7 +51,7 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
         this.nestedScrollingParentHelper = new NestedScrollingParentHelper(this);
     }
 
-    private BottomSheetState state = COLLAPSED;
+    private BottomSheetStatus status = COLLAPSED;
 
     private SettleRunnable settleRunnable = null;
 
@@ -114,11 +114,11 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
 
             getViewTreeObserver().removeOnPreDrawListener(preDrawListener);
             int top = contentView.getTop();
-            if (state == COLLAPSED) {
+            if (status == COLLAPSED) {
                 child.offsetTopAndBottom(collapsedOffset - top);
-            } else if (state == EXPANDED) {
+            } else if (status == EXPANDED) {
                 child.offsetTopAndBottom(expandedOffset - top);
-            } else if (state == HIDDEN) {
+            } else if (status == HIDDEN) {
                 child.offsetTopAndBottom(getHeight() - top);
             }
             getViewTreeObserver().addOnPreDrawListener(preDrawListener);
@@ -152,8 +152,8 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
         this.peekHeight = max(peekHeight, 0);
         if (contentView != null) {
             calculateOffset();
-            if (state == COLLAPSED) {
-                settleToState(contentView, state);
+            if (status == COLLAPSED) {
+                settleToStatus(contentView, status);
             }
         }
     }
@@ -162,19 +162,19 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
         this.draggable = draggable;
     }
 
-    public void setState(BottomSheetState state) {
-        if (this.state == state) {
+    public void setStatus(BottomSheetStatus status) {
+        if (this.status == status) {
             return;
         }
 
         if (contentView == null) {
             // The view is not laid out yet; modify mState and let onLayoutChild handle it later
-            if (state == COLLAPSED || state == EXPANDED || state == HIDDEN) {
-                this.state = state;
+            if (status == COLLAPSED || status == EXPANDED || status == HIDDEN) {
+                this.status = status;
             }
             return;
         }
-        settleToState(contentView, state);
+        settleToStatus(contentView, status);
     }
 
     @Nullable
@@ -203,12 +203,13 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
         return null;
     }
 
+	@NonNull
     public PointerEvents getPointerEvents() {
         return PointerEvents.BOX_NONE;
     }
 
     @Override
-    public boolean onInterceptTouchEvent(MotionEvent event) {
+    public boolean onInterceptTouchEvent(@NonNull MotionEvent event) {
         if (shouldInterceptTouchEvent(event)) {
             NativeGestureUtil.notifyNativeGestureStarted(this, event);
             return true;
@@ -246,7 +247,7 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
                 initialY = (int) event.getY();
                 // Only intercept nested scrolling events here if the view not being moved by the
                 // ViewDragHelper.
-                if (state != SETTLING) {
+                if (status != SETTLING) {
                     View scroll = nestedScrollingChildRef != null ? nestedScrollingChildRef.get() : null;
                     if (scroll != null && isPointInChildBounds(scroll, initialX, initialY)) {
                         activePointerId = event.getPointerId(event.getActionIndex());
@@ -271,20 +272,20 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
         return action == MotionEvent.ACTION_MOVE
             && scroll != null
             && !ignoreEvents
-            && state != DRAGGING
+            && status != DRAGGING
             && !isPointInChildBounds(scroll, (int) event.getX(), (int) event.getY())
             && viewDragHelper != null
             && Math.abs(initialY - event.getY()) > viewDragHelper.getTouchSlop();
     }
 
     @Override
-    public boolean onTouchEvent(MotionEvent event) {
+    public boolean onTouchEvent(@NonNull MotionEvent event) {
         if (!draggable) {
             return false;
         }
 
         int action = event.getActionMasked();
-        if (state == DRAGGING && action == MotionEvent.ACTION_DOWN) {
+        if (status == DRAGGING && action == MotionEvent.ACTION_DOWN) {
             return true;
         }
         if (viewDragHelper != null) {
@@ -332,22 +333,22 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
             if (newTop < expandedOffset) {
                 consumed[1] = currentTop - expandedOffset;
                 ViewCompat.offsetTopAndBottom(child, -consumed[1]);
-                setStateInternal(EXPANDED);
+                setStatusInternal(EXPANDED);
             } else {
                 consumed[1] = dy;
                 ViewCompat.offsetTopAndBottom(child, -dy);
-                setStateInternal(DRAGGING);
+                setStatusInternal(DRAGGING);
             }
         } else if (dy < 0) { // Downward
             if (!target.canScrollVertically(-1)) {
                 if (newTop <= collapsedOffset) {
                     consumed[1] = dy;
                     ViewCompat.offsetTopAndBottom(child, -dy);
-                    setStateInternal(DRAGGING);
+                    setStatusInternal(DRAGGING);
                 } else {
                     consumed[1] = currentTop - collapsedOffset;
                     ViewCompat.offsetTopAndBottom(child, -consumed[1]);
-                    setStateInternal(COLLAPSED);
+                    setStatusInternal(COLLAPSED);
                 }
             }
         }
@@ -368,7 +369,7 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
         View child = contentView;
 
         if (child.getTop() == expandedOffset) {
-            setStateInternal(EXPANDED);
+            setStatusInternal(EXPANDED);
             return;
         }
 
@@ -377,7 +378,7 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
         }
 
         int top;
-        BottomSheetState targetState;
+        BottomSheetStatus targetState;
 
         if (lastNestedScrollDy > 0) {
             top = expandedOffset;
@@ -407,7 +408,7 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
     @Override
     public boolean onNestedPreFling(@NonNull View target, float velocityX, float velocityY) {
         if (nestedScrollingChildRef != null) {
-            return target == nestedScrollingChildRef.get() && (state != EXPANDED);
+            return target == nestedScrollingChildRef.get() && (status != EXPANDED);
         } else {
             return false;
         }
@@ -455,13 +456,13 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
     private final ViewDragHelper.Callback dragCallback = new ViewDragHelper.Callback() {
         @Override
         public boolean tryCaptureView(@NonNull View child, int pointerId) {
-            if (state == DRAGGING) {
+            if (status == DRAGGING) {
                 return false;
             }
             if (touchingScrollingChild) {
                 return false;
             }
-            if (state == EXPANDED && activePointerId == pointerId) {
+            if (status == EXPANDED && activePointerId == pointerId) {
                 View scroll = nestedScrollingChildRef != null ? nestedScrollingChildRef.get() : null;
                 if (scroll != null && scroll.canScrollVertically(-1)) {
                     // Let the content scroll up
@@ -479,14 +480,14 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
         @Override
         public void onViewDragStateChanged(int state) {
             if (state == ViewDragHelper.STATE_DRAGGING) {
-                setStateInternal(DRAGGING);
+                setStatusInternal(DRAGGING);
             }
         }
 
         @Override
         public void onViewReleased(@NonNull View releasedChild, float xvel, float yvel) {
             int top;
-            BottomSheetState targetState;
+            BottomSheetStatus targetState;
             if (yvel < 0) { // Moving up
                 top = expandedOffset;
                 targetState = EXPANDED;
@@ -527,60 +528,60 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
 
     void dispatchOnSlide(int top) {
         if (contentView != null) {
-            sentEvent(new OffsetChangedEvent(UIManagerHelper.getSurfaceId(reactContext), getId(), top, expandedOffset, collapsedOffset));
+            sentEvent(new OnSlideEvent(UIManagerHelper.getSurfaceId(reactContext), getId(), top, expandedOffset, collapsedOffset));
         }
     }
 
-    void settleToState(@NonNull View child, BottomSheetState state) {
+    void settleToStatus(@NonNull View child, BottomSheetStatus status) {
         int top;
-        if (state == COLLAPSED) {
+        if (status == COLLAPSED) {
             top = collapsedOffset;
-        } else if (state == EXPANDED) {
+        } else if (status == EXPANDED) {
             top = expandedOffset;
-        } else if (state == HIDDEN) {
+        } else if (status == HIDDEN) {
             top = getHeight();
         } else {
-            throw new IllegalArgumentException("Illegal state argument: " + state);
+            throw new IllegalArgumentException("Illegal status argument: " + status);
         }
-        startSettlingAnimation(child, state, top, false);
+        startSettlingAnimation(child, status, top, false);
     }
 
-    void startSettlingAnimation(View child, BottomSheetState state, int top, boolean settleFromViewDragHelper) {
+    void startSettlingAnimation(View child, BottomSheetStatus status, int top, boolean settleFromViewDragHelper) {
         boolean startedSettling =
             viewDragHelper != null
                 && (settleFromViewDragHelper
                 ? viewDragHelper.settleCapturedViewAt(child.getLeft(), top)
                 : viewDragHelper.smoothSlideViewTo(child, child.getLeft(), top));
         if (startedSettling) {
-            setStateInternal(SETTLING);
-            // STATE_SETTLING won't animate the material shape, so do that here with the target state.
-            // updateDrawableForTargetState(state);
+            setStatusInternal(SETTLING);
+            // STATE_SETTLING won't animate the material shape, so do that here with the target status.
+            // updateDrawableForTargetState(status);
             if (settleRunnable == null) {
                 // If the singleton SettleRunnable instance has not been instantiated, create it.
-                settleRunnable = new SettleRunnable(child, state);
+                settleRunnable = new SettleRunnable(child, status);
             }
-            // If the SettleRunnable has not been posted, post it with the correct state.
+            // If the SettleRunnable has not been posted, post it with the correct status.
             if (!settleRunnable.isPosted) {
-                settleRunnable.targetState = state;
+                settleRunnable.targetStatus = status;
                 ViewCompat.postOnAnimation(child, settleRunnable);
                 settleRunnable.isPosted = true;
             } else {
-                // Otherwise, if it has been posted, just update the target state.
-                settleRunnable.targetState = state;
+                // Otherwise, if it has been posted, just update the target status.
+                settleRunnable.targetStatus = status;
             }
         } else {
-            setStateInternal(state);
+            setStatusInternal(status);
         }
     }
 
-    void setStateInternal(BottomSheetState state) {
-        if (this.state == state) {
+    void setStatusInternal(BottomSheetStatus status) {
+        if (this.status == status) {
             return;
         }
-        this.state = state;
+        this.status = status;
 
-        if (state == COLLAPSED || state == EXPANDED || state == HIDDEN) {
-            sentEvent(new StateChangedEvent(UIManagerHelper.getSurfaceId(reactContext), getId(), state.name().toLowerCase()));
+        if (status == COLLAPSED || status == EXPANDED || status == HIDDEN) {
+            sentEvent(new OnStateChangedEvent(UIManagerHelper.getSurfaceId(reactContext), getId(), status.name().toLowerCase()));
         }
     }
 
@@ -590,11 +591,11 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
 
         private boolean isPosted;
 
-        BottomSheetState targetState;
+        BottomSheetStatus targetStatus;
 
-        SettleRunnable(View view, BottomSheetState targetState) {
+        SettleRunnable(View view, BottomSheetStatus targetStatus) {
             this.view = view;
-            this.targetState = targetState;
+            this.targetStatus = targetStatus;
         }
 
         @Override
@@ -602,7 +603,7 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
             if (viewDragHelper != null && viewDragHelper.continueSettling(true)) {
                 ViewCompat.postOnAnimation(view, this);
             } else {
-                setStateInternal(targetState);
+                setStatusInternal(targetStatus);
             }
             this.isPosted = false;
         }

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

@@ -7,10 +7,12 @@ import com.facebook.react.uimanager.PixelUtil;
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.uimanager.ViewGroupManager;
 import com.facebook.react.uimanager.annotations.ReactProp;
+import com.facebook.react.viewmanagers.BottomSheetManagerInterface;
 
 import java.util.Map;
 
-public class BottomSheetManager extends ViewGroupManager<BottomSheet> {
+public class BottomSheetManager extends ViewGroupManager<BottomSheet>
+	implements BottomSheetManagerInterface<BottomSheet> {
 
     @NonNull
     @Override
@@ -27,21 +29,25 @@ public class BottomSheetManager extends ViewGroupManager<BottomSheet> {
     @Override
     public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
         return MapBuilder.<String, Object>builder()
-                .put(StateChangedEvent.Name, MapBuilder.of("registrationName", StateChangedEvent.JSEventName))
-                .put(OffsetChangedEvent.Name, MapBuilder.of("registrationName", OffsetChangedEvent.JSEventName))
+                .put(OnStateChangedEvent.Name, MapBuilder.of("registrationName", OnStateChangedEvent.JSEventName))
+                .put(OnSlideEvent.Name, MapBuilder.of("registrationName", OnSlideEvent.JSEventName))
                 .build();
     }
 
+	@Override
     @ReactProp(name = "peekHeight", defaultInt = 200)
     public void setPeekHeight(BottomSheet view, int dp) {
         view.setPeekHeight((int) (PixelUtil.toPixelFromDIP(dp) + 0.5));
     }
 
-    @ReactProp(name = "state")
-    public void setState(BottomSheet view, String state) {
-        view.setState(BottomSheetState.valueOf(state.toUpperCase()));
+	@Override
+    @ReactProp(name = "status")
+    public void setStatus(BottomSheet view, String status) {
+		assert status != null;
+        view.setStatus(BottomSheetStatus.valueOf(status.toUpperCase()));
     }
 
+	@Override
     @ReactProp(name = "draggable")
     public void setDraggable(BottomSheet view, boolean draggable) {
         view.setDraggable(draggable);

package/android/src/main/java/com/reactnative/bottomsheet/{BottomSheetState.java → BottomSheetStatus.java}

@@ -1,5 +1,5 @@
 package com.reactnative.bottomsheet;
 
-public enum BottomSheetState {
+public enum BottomSheetStatus {
     COLLAPSED, EXPANDED, HIDDEN, DRAGGING, SETTLING
 }

package/android/src/main/java/com/reactnative/bottomsheet/{OffsetChangedEvent.java → OnSlideEvent.java}

@@ -1,5 +1,6 @@
 package com.reactnative.bottomsheet;
 
+import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 
 import com.facebook.react.bridge.Arguments;
@@ -7,21 +8,22 @@ import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.uimanager.PixelUtil;
 import com.facebook.react.uimanager.events.Event;
 
-public class OffsetChangedEvent extends Event<OffsetChangedEvent> {
-    public static final String Name = "offsetEvent";
+public class OnSlideEvent extends Event<OnSlideEvent> {
+    public static final String Name = "topSlide";
     public static final String JSEventName = "onSlide";
 
     private final int offset;
     private final int minOffset;
     private final int maxOffset;
 
-    public OffsetChangedEvent(int surfaceId, int viewTag, int offset, int minOffset, int maxOffset) {
+    public OnSlideEvent(int surfaceId, int viewTag, int offset, int minOffset, int maxOffset) {
         super(surfaceId, viewTag);
         this.offset = offset;
         this.maxOffset = maxOffset;
         this.minOffset = minOffset;
     }
 
+	@NonNull
     @Override
     public String getEventName() {
         return Name;