@sdcx/bottom-sheet 1.0.5 → 1.0.6

package/RNBottomSheet.podspec

@@ -13,7 +13,10 @@ Pod::Spec.new do |s|
   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/**/*.{h,m,mm}"
+  s.source_files = "ios/**/*.{h,m,mm}", "common/cpp/**/*.{cpp,h}"
+  s.pod_target_xcconfig = {
+    "HEADER_SEARCH_PATHS" => "\"$(PODS_TARGET_SRCROOT)/common/cpp\""
+  }
 
   install_modules_dependencies(s)
 end

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

@@ -87,6 +87,9 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
 
     private int contentHeight = -1;
 
+    /** 子 View 的布局 top，用于计算 getContentOriginOffset 的差值 (实际 top - layoutContentTop) */
+    private int layoutContentTop = -1;
+
     @Override
     protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
         if (viewDragHelper == null) {
@@ -114,10 +117,20 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
 
             getViewTreeObserver().removeOnPreDrawListener(preDrawListener);
             int top = contentView.getTop();
+            boolean isFirstLayout = layoutContentTop < 0;
+            if (layoutContentTop < 0) {
+                layoutContentTop = top;
+            }
             if (status == COLLAPSED) {
                 child.offsetTopAndBottom(collapsedOffset - top);
             } else if (status == EXPANDED) {
-                child.offsetTopAndBottom(expandedOffset - top);
+                if (isFirstLayout) {
+                    // 与 iOS 一致：首次 layout 且为 expanded 时先置于 collapsed 再播放展开动画
+                    child.offsetTopAndBottom(collapsedOffset - top);
+                    ViewCompat.postOnAnimation(child, () -> settleToStatus(contentView, EXPANDED));
+                } else {
+                    child.offsetTopAndBottom(expandedOffset - top);
+                }
             } else if (status == HIDDEN) {
                 child.offsetTopAndBottom(getHeight() - top);
             }
@@ -530,6 +543,10 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
 
     void dispatchOnSlide(int top) {
         if (contentView != null) {
+            if (contentView instanceof BottomSheetContentView && layoutContentTop >= 0) {
+                int offsetY = top - layoutContentTop;
+                ((BottomSheetContentView) contentView).updateContentOffset(offsetY);
+            }
             sentEvent(new OnSlideEvent(UIManagerHelper.getSurfaceId(reactContext), getId(), top, expandedOffset, collapsedOffset));
         }
     }

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

@@ -0,0 +1,39 @@
+package com.reactnative.bottomsheet;
+
+import android.content.Context;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.uimanager.PixelUtil;
+import com.facebook.react.uimanager.StateWrapper;
+import com.facebook.react.views.view.ReactViewGroup;
+
+/**
+ * Content view for BottomSheet. Implements getContentOriginOffset via state so that
+ * hit-testing uses the correct coordinates when the parent BottomSheet moves this view.
+ */
+public class BottomSheetContentView extends ReactViewGroup {
+
+    @SuppressWarnings("NullableProblems")
+    private StateWrapper stateWrapper;
+
+    public BottomSheetContentView(Context context) {
+        super(context);
+    }
+
+    public void setStateWrapper(StateWrapper wrapper) {
+        this.stateWrapper = wrapper;
+    }
+
+    /**
+     * Updates Fabric state with content offset (actual top - layout top) so that
+     * getContentOriginOffset can correct hit-testing. Called by the parent BottomSheet.
+     */
+    public void updateContentOffset(int offsetPx) {
+        if (stateWrapper != null) {
+            WritableMap map = Arguments.createMap();
+            map.putDouble("contentOffset", PixelUtil.toDIPFromPixel(offsetPx));
+            stateWrapper.updateState(map);
+        }
+    }
+}

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

@@ -0,0 +1,46 @@
+package com.reactnative.bottomsheet;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import com.facebook.react.uimanager.ReactStylesDiffMap;
+import com.facebook.react.uimanager.StateWrapper;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.ViewGroupManager;
+import com.facebook.react.uimanager.ViewManagerDelegate;
+import com.facebook.react.viewmanagers.BottomSheetContentViewManagerDelegate;
+import com.facebook.react.viewmanagers.BottomSheetContentViewManagerInterface;
+
+public class BottomSheetContentViewManager extends ViewGroupManager<BottomSheetContentView>
+        implements BottomSheetContentViewManagerInterface<BottomSheetContentView> {
+
+    private final BottomSheetContentViewManagerDelegate<BottomSheetContentView, BottomSheetContentViewManager> mDelegate =
+            new BottomSheetContentViewManagerDelegate<>(this);
+
+    @Override
+    protected ViewManagerDelegate<BottomSheetContentView> getDelegate() {
+        return mDelegate;
+    }
+
+    @NonNull
+    @Override
+    public String getName() {
+        return "BottomSheetContentView";
+    }
+
+    @NonNull
+    @Override
+    protected BottomSheetContentView createViewInstance(@NonNull ThemedReactContext context) {
+        return new BottomSheetContentView(context);
+    }
+
+    @Nullable
+    @Override
+    public Object updateState(
+            @NonNull BottomSheetContentView view,
+            ReactStylesDiffMap props,
+            StateWrapper stateWrapper) {
+        view.setStateWrapper(stateWrapper);
+        return super.updateState(view, props, stateWrapper);
+    }
+}

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

@@ -2,6 +2,7 @@ package com.reactnative.bottomsheet;
 
 import androidx.annotation.NonNull;
 
+import java.util.Arrays;
 import java.util.Collections;
 import java.util.List;
 
@@ -20,6 +21,6 @@ public class BottomSheetPackage implements ReactPackage {
     @NonNull
     @Override
     public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
-        return Collections.singletonList(new BottomSheetManager());
+        return Arrays.asList(new BottomSheetManager(), new BottomSheetContentViewManager());
     }
 }

package/android/src/main/jni/CMakeLists.txt

@@ -0,0 +1,91 @@
+cmake_minimum_required(VERSION 3.13)
+set(CMAKE_VERBOSE_MAKEFILE ON)
+
+set(LIB_LITERAL bottomsheet)
+set(LIB_TARGET_NAME react_codegen_${LIB_LITERAL})
+
+set(LIB_ANDROID_DIR ${CMAKE_CURRENT_SOURCE_DIR}/../../..)
+set(LIB_COMMON_DIR ${LIB_ANDROID_DIR}/../common/cpp)
+set(LIB_ANDROID_GENERATED_JNI_DIR ${LIB_ANDROID_DIR}/build/generated/source/codegen/jni)
+set(LIB_ANDROID_GENERATED_COMPONENTS_DIR ${LIB_ANDROID_GENERATED_JNI_DIR}/react/renderer/components/${LIB_LITERAL})
+
+file(GLOB LIB_CUSTOM_SRCS CONFIGURE_DEPENDS *.cpp ${LIB_COMMON_DIR}/react/renderer/components/${LIB_LITERAL}/*.cpp)
+file(GLOB LIB_CODEGEN_SRCS CONFIGURE_DEPENDS ${LIB_ANDROID_GENERATED_JNI_DIR}/*.cpp ${LIB_ANDROID_GENERATED_COMPONENTS_DIR}/*.cpp)
+
+add_library(
+  ${LIB_TARGET_NAME}
+  SHARED
+  ${LIB_CUSTOM_SRCS}
+  ${LIB_CODEGEN_SRCS}
+)
+
+target_include_directories(
+  ${LIB_TARGET_NAME}
+  PUBLIC
+  .
+  ${LIB_COMMON_DIR}
+  ${LIB_ANDROID_GENERATED_JNI_DIR}
+  ${LIB_ANDROID_GENERATED_COMPONENTS_DIR}
+)
+
+if (REACTNATIVE_MERGED_SO)
+  target_link_libraries(
+    ${LIB_TARGET_NAME}
+    fbjni
+    jsi
+    reactnative
+  )
+else()
+  target_link_libraries(
+    ${LIB_TARGET_NAME}
+    fbjni
+    folly_runtime
+    glog
+    jsi
+    react_codegen_rncore
+    react_debug
+    react_render_componentregistry
+    react_render_core
+    react_render_debug
+    react_render_graphics
+    react_render_imagemanager
+    react_render_mapbuffer
+    react_utils
+    react_nativemodule_core
+    rrc_image
+    turbomodulejsijni
+    rrc_view
+    yoga
+  )
+endif()
+
+if(ReactAndroid_VERSION_MINOR GREATER_EQUAL 81)
+  target_compile_reactnative_options(${LIB_TARGET_NAME} PUBLIC)
+else()
+  target_compile_options(
+    ${LIB_TARGET_NAME}
+    PRIVATE
+    -fexceptions
+    -frtti
+    -std=c++20
+    -Wall
+    -Wpedantic
+    -Wno-gnu-zero-variadic-macro-arguments
+  )
+endif()
+
+target_compile_options(
+  ${LIB_TARGET_NAME}
+  PRIVATE
+  -DLOG_TAG=\"ReactNative\"
+  -fexceptions
+  -frtti
+  -std=c++20
+  -Wall
+)
+
+target_include_directories(
+  ${CMAKE_PROJECT_NAME}
+  PUBLIC
+  ${CMAKE_CURRENT_SOURCE_DIR}
+)

package/android/src/main/jni/bottomsheet.h

@@ -0,0 +1,17 @@
+#pragma once
+
+#include <ReactCommon/JavaTurboModule.h>
+#include <ReactCommon/TurboModule.h>
+#include <jsi/jsi.h>
+#include <react/renderer/components/bottomsheet/BottomSheetContentViewComponentDescriptor.h>
+
+namespace facebook {
+namespace react {
+
+JSI_EXPORT
+std::shared_ptr<TurboModule> bottomsheet_ModuleProvider(
+    const std::string &moduleName,
+    const JavaTurboModule::InitParams &params);
+
+} // namespace react
+} // namespace facebook

package/dist/BottomSheetContentViewNativeComponent.d.ts

@@ -0,0 +1,5 @@
+import type { HostComponent, ViewProps } from 'react-native';
+export interface NativeProps extends ViewProps {
+}
+declare const _default: HostComponent<NativeProps>;
+export default _default;

package/dist/BottomSheetContentViewNativeComponent.js

@@ -0,0 +1,4 @@
+import { codegenNativeComponent } from 'react-native';
+export default codegenNativeComponent('BottomSheetContentView', {
+    interfaceOnly: true,
+});

package/dist/index.js

@@ -1,18 +1,19 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet } from 'react-native';
 import splitLayoutProps from './splitLayoutProps';
 import BottomSheetNativeComponent from './BottomSheetNativeComponent';
+import BottomSheetContentViewNativeComponent from './BottomSheetContentViewNativeComponent';
 function BottomSheet(props) {
     const { style, contentContainerStyle, children, peekHeight = 200, draggable = true, state = 'collapsed', fitToContents, ...rest } = props;
     const { outer, inner } = splitLayoutProps(StyleSheet.flatten(style));
     return (<BottomSheetNativeComponent style={[StyleSheet.absoluteFill, outer]} peekHeight={peekHeight} draggable={draggable} status={state} {...rest}>
-			<View style={[
+			<BottomSheetContentViewNativeComponent style={[
             fitToContents ? styles.fitToContents : StyleSheet.absoluteFill,
             inner,
             contentContainerStyle,
         ]} collapsable={false}>
 				{children}
-			</View>
+			</BottomSheetContentViewNativeComponent>
 		</BottomSheetNativeComponent>);
 }
 const styles = StyleSheet.create({

package/dist/splitLayoutProps.d.ts

@@ -1,7 +1,7 @@
 import { ViewStyle } from 'react-native';
 export default function splitLayoutProps(props?: ViewStyle): {
     outer: {
-        [key: string]: string | number | import("react-native").OpaqueColorValue | import("react-native").Animated.AnimatedNode | readonly import("react-native").BoxShadowValue[] | readonly import("react-native").FilterFunction[] | readonly import("react-native").GradientValue[] | Readonly<{
+        [key: string]: string | number | import("react-native").OpaqueColorValue | import("react-native").Animated.AnimatedNode | readonly import("react-native").BoxShadowValue[] | readonly import("react-native").FilterFunction[] | readonly import("react-native").BackgroundImageValue[] | readonly import("react-native").BackgroundSizeValue[] | readonly import("react-native").BackgroundPositionValue[] | readonly import("react-native").BackgroundRepeatValue[] | Readonly<{
             width: number;
             height: number;
         }> | readonly (({
@@ -202,7 +202,7 @@ export default function splitLayoutProps(props?: ViewStyle): {
         }))[] | (string | number)[] | number[] | null | undefined;
     };
     inner: {
-        [key: string]: string | number | import("react-native").OpaqueColorValue | import("react-native").Animated.AnimatedNode | readonly import("react-native").BoxShadowValue[] | readonly import("react-native").FilterFunction[] | readonly import("react-native").GradientValue[] | Readonly<{
+        [key: string]: string | number | import("react-native").OpaqueColorValue | import("react-native").Animated.AnimatedNode | readonly import("react-native").BoxShadowValue[] | readonly import("react-native").FilterFunction[] | readonly import("react-native").BackgroundImageValue[] | readonly import("react-native").BackgroundSizeValue[] | readonly import("react-native").BackgroundPositionValue[] | readonly import("react-native").BackgroundRepeatValue[] | Readonly<{
             width: number;
             height: number;
         }> | readonly (({

package/ios/RNBottomSheet.mm

@@ -2,6 +2,8 @@
 #import "RNBottomSheetStateChangedEvent.h"
 #import "RNBottomSheetOffsetChangedEvent.h"
 
+#import "RNBottomSheetContentView.h"
+
 #import <react/renderer/components/bottomsheet/ComponentDescriptors.h>
 #import <react/renderer/components/bottomsheet/EventEmitters.h>
 #import <react/renderer/components/bottomsheet/Props.h>
@@ -58,6 +60,7 @@ using namespace facebook::react;
 	__weak UIView *_rootView;
 	BOOL _isInitialRender;
 	__weak UIView *_reactRootView;
+	CGFloat _layoutContentTop;  // 子 View 的布局 origin.y，用于 contentOffset = 实际 top - 布局 top
 }
 
 // Needed because of this: https://github.com/facebook/react-native/pull/37274
@@ -84,6 +87,7 @@ using namespace facebook::react;
 		_status = BottomSheetStatus::Collapsed;
 		_finalStatus = BottomSheetStatus::Collapsed;
 		_isInitialRender = YES;
+		_layoutContentTop = NAN;
 	}
 	return self;
 }
@@ -228,7 +232,7 @@ using namespace facebook::react;
 
 	dispatch_async(dispatch_get_main_queue(), ^{
 		if (self.finalStatus == BottomSheetStatus::Expanded && self->_isInitialRender) {
-			[self settleToStatus:self.finalStatus withFling:NO];
+			[self settleToStatus:self.finalStatus withFling:YES];
 		}
 
 		self->_isInitialRender = NO;
@@ -238,6 +242,18 @@ using namespace facebook::react;
 - (void)layoutChild {
 	if (!CGRectEqualToRect(self.child.frame, CGRectZero) && !CGRectEqualToRect(self.frame, CGRectZero)) {
 		[self calculateOffset];
+		// 仅当当前 frame.origin.y 不是“本轮要设的目标”时才视为布局结果并捕获，避免初始 collapsed + peekHeight 0 时误把已是 maxY 的 frame 当布局
+		if (isnan(_layoutContentTop)) {
+			CGFloat currentY = self.child.frame.origin.y;
+			CGFloat targetY = (self.status == BottomSheetStatus::Collapsed) ? self.maxY
+				: (self.status == BottomSheetStatus::Expanded) ? self.minY
+				: (CGFloat)self.frame.size.height;
+			if (fabs(currentY - targetY) > 0.5) {
+				_layoutContentTop = currentY;
+			} else {
+				_layoutContentTop = self.minY;  // 无法区分时假定布局在 minY（展开位）
+			}
+		}
 		if (self.status == BottomSheetStatus::Collapsed) {
 			self.child.frame = CGRectOffset(self.child.frame, 0, self.maxY - self.child.frame.origin.y);
 		} else if (self.status == BottomSheetStatus::Expanded) {
@@ -461,6 +477,11 @@ using namespace facebook::react;
 	if (top < 0 || self.maxY == 0) {
 		return;
 	}
+	// 传的是「实际 top - 布局 top」的差值，供 getContentOriginOffset 做 hit-test 校正
+	if ([self.child respondsToSelector:@selector(updateContentOffset:)]) {
+		CGFloat offsetY = top - _layoutContentTop;
+		[(id)self.child updateContentOffset:offsetY];
+	}
 
 	CGFloat progress = fmin((top - self.minY) * 1.0f / (self.maxY - self.minY), 1);
 	BottomSheetEventEmitter::OnSlide payload = BottomSheetEventEmitter::OnSlide{
@@ -509,7 +530,7 @@ using namespace facebook::react;
 }
 
 - (void)stopWatchBottomSheetTransition {
-	if(_displayLink){
+	if (_displayLink) {
 		[_displayLink invalidate];
 		_displayLink = nil;
 	}

package/ios/RNBottomSheetContentView.h

@@ -0,0 +1,12 @@
+#import <React/RCTViewComponentView.h>
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RNBottomSheetContentView : RCTViewComponentView
+
+- (void)updateContentOffset:(CGFloat)contentOffset;
+
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/RNBottomSheetContentView.mm

@@ -0,0 +1,47 @@
+#import "RNBottomSheetContentView.h"
+
+#import <react/renderer/components/bottomsheet/BottomSheetContentViewComponentDescriptor.h>
+#import <react/renderer/components/bottomsheet/BottomSheetContentViewShadowNode.h>
+#import <react/renderer/components/bottomsheet/EventEmitters.h>
+#import <react/renderer/components/bottomsheet/Props.h>
+#import <react/renderer/components/bottomsheet/RCTComponentViewHelpers.h>
+
+using namespace facebook::react;
+
+@implementation RNBottomSheetContentView {
+	std::shared_ptr<const BottomSheetContentViewShadowNode::ConcreteState> _state;
+}
+
++ (void)load {
+	[super load];
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider {
+	return concreteComponentDescriptorProvider<BottomSheetContentViewComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame {
+	if (self = [super initWithFrame:frame]) {
+		static const auto defaultProps = std::make_shared<const BottomSheetContentViewProps>();
+		_props = defaultProps;
+	}
+	return self;
+}
+
+- (void)updateState:(const facebook::react::State::Shared &)state oldState:(const facebook::react::State::Shared &)oldState {
+	_state = std::static_pointer_cast<const BottomSheetContentViewShadowNode::ConcreteState>(state);
+}
+
+- (void)updateContentOffset:(CGFloat)contentOffset {
+	if (!_state) {
+		return;
+	}
+	_state->updateState(
+		[contentOffset](const BottomSheetContentViewShadowNode::ConcreteState::Data &oldData) -> BottomSheetContentViewShadowNode::ConcreteState::SharedData {
+			auto newData = oldData;
+			newData.contentOffset = static_cast<double>(contentOffset);
+			return std::make_shared<BottomSheetContentViewShadowNode::ConcreteState::Data>(newData);
+		});
+}
+
+@end

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@sdcx/bottom-sheet",
 	"description": "A react-native BottomSheet component.",
-	"version": "1.0.5",
+	"version": "1.0.6",
 	"main": "./dist/index",
 	"module": "./dist/index",
 	"types": "./dist/index.d.ts",
@@ -48,7 +48,8 @@
 		},
 		"ios": {
 			"componentProvider": {
-				"BottomSheet": "RNBottomSheet"
+				"BottomSheet": "RNBottomSheet",
+				"BottomSheetContentView": "RNBottomSheetContentView"
 			}
 		}
 	}

package/react-native.config.js

@@ -3,7 +3,8 @@ module.exports = {
 		platforms: {
 			android: {
 				libraryName: 'bottomsheet',
-				componentDescriptors: ['BottomSheetComponentDescriptor'],
+				componentDescriptors: ['BottomSheetContentViewComponentDescriptor'],
+				cmakeListsPath: 'src/main/jni/CMakeLists.txt',
 			},
 		},
 	},

package/src/BottomSheetContentViewNativeComponent.ts

@@ -0,0 +1,8 @@
+import type { HostComponent, ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+
+export interface NativeProps extends ViewProps {}
+
+export default codegenNativeComponent<NativeProps>('BottomSheetContentView', {
+	interfaceOnly: true,
+}) as HostComponent<NativeProps>;

package/src/index.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { NativeSyntheticEvent, StyleSheet, View, ViewProps } from 'react-native';
+import { NativeSyntheticEvent, StyleSheet, ViewProps } from 'react-native';
 import splitLayoutProps from './splitLayoutProps';
 import BottomSheetNativeComponent from './BottomSheetNativeComponent';
+import BottomSheetContentViewNativeComponent from './BottomSheetContentViewNativeComponent';
 import type { OnStateChangedEventPayload, OnSlideEventPayload } from './BottomSheetNativeComponent';
 
 export type BottomSheetState = 'collapsed' | 'expanded' | 'hidden';
@@ -38,7 +39,7 @@ function BottomSheet(props: BottomSheetProps) {
 			status={state}
 			{...rest}
 		>
-			<View
+			<BottomSheetContentViewNativeComponent
 				style={[
 					fitToContents ? styles.fitToContents : StyleSheet.absoluteFill,
 					inner,
@@ -47,7 +48,7 @@ function BottomSheet(props: BottomSheetProps) {
 				collapsable={false}
 			>
 				{children}
-			</View>
+			</BottomSheetContentViewNativeComponent>
 		</BottomSheetNativeComponent>
 	);
 }