@swmansion/react-native-bottom-sheet 0.7.0-next.5 → 0.7.0-next.7

package/ReactNativeBottomSheet.podspec

@@ -13,11 +13,12 @@ Pod::Spec.new do |s|
   s.platforms    = { :ios => min_ios_version_supported }
   s.source       = { :git => "https://github.com/software-mansion-labs/react-native-bottom-sheet.git", :tag => "#{s.version}" }
 
-  s.source_files = "ios/**/*.{h,m,mm,cpp,swift}"
+  s.source_files = ["ios/**/*.{h,m,mm,cpp,swift}", "common/**/*.{h,cpp}"]
   s.private_header_files = "ios/**/*.h"
   s.swift_version = "5.0"
   s.pod_target_xcconfig = {
-    "DEFINES_MODULE" => "YES"
+    "DEFINES_MODULE" => "YES",
+    "HEADER_SEARCH_PATHS" => "\"$(PODS_TARGET_SRCROOT)/common/cpp\""
   }
 
   install_modules_dependencies(s)

package/android/src/main/java/com/swmansion/reactnativebottomsheet/BottomSheetView.kt

@@ -11,7 +11,9 @@ import android.widget.FrameLayout
 import androidx.dynamicanimation.animation.DynamicAnimation
 import androidx.dynamicanimation.animation.SpringAnimation
 import androidx.dynamicanimation.animation.SpringForce
+import com.facebook.react.bridge.Arguments
 import com.facebook.react.uimanager.PointerEvents
+import com.facebook.react.uimanager.StateWrapper
 import com.facebook.react.views.view.ReactViewGroup
 import kotlin.math.abs
 
@@ -27,6 +29,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
   // MARK: - Listener
 
   var listener: BottomSheetViewListener? = null
+  var stateWrapper: StateWrapper? = null
 
   // MARK: - State
 
@@ -48,6 +51,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
 
   // Touch tracking
   private var initialTouchY = 0f
+  private var initialTouchX = 0f
   private var lastTouchY = 0f
   private var activePointerId = MotionEvent.INVALID_POINTER_ID
 
@@ -129,6 +133,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
 
     if (activeAnimation != null || isPanning) return
     sheetContainer.translationY = translationY(targetIndex)
+    updateShadowState(sheetContainer.translationY)
   }
 
   private fun layoutSheetChildren() {
@@ -207,6 +212,19 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
     val maxHeight = detentSpecs.lastOrNull()?.height ?: height.toFloat()
     val ty = sheetContainer.translationY
     listener?.onPositionChange(((maxHeight - ty) / density).toDouble())
+    updateShadowState(ty)
+  }
+
+  private var lastShadowOffsetY = Float.NaN
+
+  private fun updateShadowState(translationY: Float) {
+    val offsetY = (translationY / density).toDouble()
+    if (offsetY.toFloat() == lastShadowOffsetY) return
+    lastShadowOffsetY = offsetY.toFloat()
+    val sw = stateWrapper ?: return
+    val map = Arguments.createMap()
+    map.putDouble("contentOffsetY", offsetY)
+    sw.updateState(map)
   }
 
   // MARK: - Choreographer (position tracking during animation)
@@ -282,12 +300,13 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
 
   override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
     val sheetTop = sheetContainer.top + sheetContainer.translationY
-    if (ev.y < sheetTop) {
+    if (ev.actionMasked == MotionEvent.ACTION_DOWN && ev.y < sheetTop) {
       return false
     }
 
     when (ev.actionMasked) {
       MotionEvent.ACTION_DOWN -> {
+        initialTouchX = ev.x
         initialTouchY = ev.y
         lastTouchY = ev.y
         activePointerId = ev.getPointerId(0)
@@ -296,10 +315,12 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
         if (activePointerId == MotionEvent.INVALID_POINTER_ID) return false
         val pointerIndex = ev.findPointerIndex(activePointerId)
         if (pointerIndex < 0) return false
+        val x = ev.getX(pointerIndex)
         val y = ev.getY(pointerIndex)
+        val dx = x - initialTouchX
         val dy = y - initialTouchY
 
-        if (abs(dy) > touchSlop) {
+        if (abs(dy) > touchSlop && abs(dy) > abs(dx)) {
           if (!isAtMaxDraggable) {
             lastTouchY = y
             requestDisallowInterceptTouchEvent(false)
@@ -313,6 +334,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
         }
       }
       MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
+        initialTouchX = 0f
         activePointerId = MotionEvent.INVALID_POINTER_ID
       }
     }
@@ -321,7 +343,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
 
   override fun onTouchEvent(event: MotionEvent): Boolean {
     val sheetTop = sheetContainer.top + sheetContainer.translationY
-    if (event.y < sheetTop) {
+    if (event.actionMasked == MotionEvent.ACTION_DOWN && event.y < sheetTop) {
       return false
     }
 
@@ -418,9 +440,12 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
     hasLaidOut = false
     isPanning = false
     initialTouchY = 0f
+    initialTouchX = 0f
     lastTouchY = 0f
     activePointerId = MotionEvent.INVALID_POINTER_ID
     sheetContainer.translationY = 0f
     sheetContainer.removeAllViews()
+    stateWrapper = null
+    lastShadowOffsetY = Float.NaN
   }
 }

package/android/src/main/java/com/swmansion/reactnativebottomsheet/BottomSheetViewManager.kt

@@ -3,6 +3,8 @@ package com.swmansion.reactnativebottomsheet
 import android.view.View
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.module.annotations.ReactModule
+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
@@ -63,6 +65,15 @@ class BottomSheetViewManager :
     parent.removeSheetChildAt(index)
   }
 
+  override fun updateState(
+    view: BottomSheetView,
+    props: ReactStylesDiffMap,
+    stateWrapper: StateWrapper?,
+  ): Any? {
+    view.stateWrapper = stateWrapper
+    return null
+  }
+
   override fun needsCustomLayoutForChildren(): Boolean = true
 
   override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any> {

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

@@ -0,0 +1,78 @@
+cmake_minimum_required(VERSION 3.13)
+set(CMAKE_VERBOSE_MAKEFILE ON)
+
+set(LIB_LITERAL ReactNativeBottomSheetSpec)
+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 ${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}
+)
+
+# Custom headers must come before generated headers so that our ShadowNodes.h
+# and ComponentDescriptors.h take precedence over the codegen type aliases.
+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_nativemodule_core
+    react_render_core
+    react_render_debug
+    react_render_graphics
+    react_render_mapbuffer
+    react_render_componentregistry
+    react_utils
+    rrc_view
+    turbomodulejsijni
+    yoga
+  )
+endif()
+
+target_include_directories(
+  ${CMAKE_PROJECT_NAME}
+  PUBLIC
+  ${CMAKE_CURRENT_SOURCE_DIR}
+)
+
+if(ReactAndroid_VERSION_MINOR GREATER_EQUAL 80)
+  target_compile_reactnative_options(${LIB_TARGET_NAME} PUBLIC)
+else()
+  target_compile_options(
+    ${LIB_TARGET_NAME}
+    PRIVATE
+    -fexceptions
+    -frtti
+    -std=c++20
+    -Wall
+  )
+endif()

package/common/cpp/react/renderer/components/ReactNativeBottomSheetSpec/BottomSheetViewShadowNode.cpp

@@ -0,0 +1,28 @@
+#include "ShadowNodes.h"
+
+#include <yoga/Yoga.h>
+
+namespace facebook::react {
+
+void BottomSheetViewShadowNode::adjustLayoutWithState() {
+#ifdef ANDROID
+  ensureUnsealed();
+
+  auto state =
+      std::static_pointer_cast<const BottomSheetViewShadowNode::ConcreteState>(
+          getState());
+  auto stateData = state->getData();
+
+  auto adjustedStyle = getConcreteProps().yogaStyle;
+  auto newPaddingTop =
+      yoga::Style::Length::points(stateData.contentOffsetY);
+
+  if (adjustedStyle.padding(yoga::Edge::Top) != newPaddingTop) {
+    adjustedStyle.setPadding(yoga::Edge::Top, newPaddingTop);
+    yogaNode_.setStyle(adjustedStyle);
+    yogaNode_.setDirty(true);
+  }
+#endif
+}
+
+} // namespace facebook::react

package/common/cpp/react/renderer/components/ReactNativeBottomSheetSpec/BottomSheetViewState.h

@@ -0,0 +1,36 @@
+#pragma once
+
+#ifdef ANDROID
+#include <folly/dynamic.h>
+#include <react/renderer/mapbuffer/MapBuffer.h>
+#include <react/renderer/mapbuffer/MapBufferBuilder.h>
+#endif
+
+namespace facebook::react {
+
+class BottomSheetViewState final {
+ public:
+  BottomSheetViewState() = default;
+
+#ifdef ANDROID
+  BottomSheetViewState(
+      const BottomSheetViewState& previousState,
+      folly::dynamic data)
+      : contentOffsetY(
+            static_cast<float>(data["contentOffsetY"].getDouble())) {}
+#endif
+
+  float contentOffsetY{0};
+
+#ifdef ANDROID
+  folly::dynamic getDynamic() const {
+    return folly::dynamic::object("contentOffsetY", contentOffsetY);
+  }
+
+  MapBuffer getMapBuffer() const {
+    return MapBufferBuilder::EMPTY();
+  }
+#endif
+};
+
+} // namespace facebook::react

package/common/cpp/react/renderer/components/ReactNativeBottomSheetSpec/ComponentDescriptors.h

@@ -0,0 +1,19 @@
+#pragma once
+
+#include <react/renderer/components/ReactNativeBottomSheetSpec/ShadowNodes.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+
+namespace facebook::react {
+
+class BottomSheetViewComponentDescriptor final
+    : public ConcreteComponentDescriptor<BottomSheetViewShadowNode> {
+  using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
+
+  void adopt(ShadowNode& shadowNode) const override {
+    auto& node = static_cast<BottomSheetViewShadowNode&>(shadowNode);
+    node.adjustLayoutWithState();
+    ConcreteComponentDescriptor::adopt(shadowNode);
+  }
+};
+
+} // namespace facebook::react

package/common/cpp/react/renderer/components/ReactNativeBottomSheetSpec/ShadowNodes.h

@@ -0,0 +1,25 @@
+#pragma once
+
+#include <jsi/jsi.h>
+#include <react/renderer/components/ReactNativeBottomSheetSpec/BottomSheetViewState.h>
+#include <react/renderer/components/ReactNativeBottomSheetSpec/EventEmitters.h>
+#include <react/renderer/components/ReactNativeBottomSheetSpec/Props.h>
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+
+namespace facebook::react {
+
+JSI_EXPORT extern const char BottomSheetViewComponentName[];
+
+class JSI_EXPORT BottomSheetViewShadowNode final
+    : public ConcreteViewShadowNode<
+          BottomSheetViewComponentName,
+          BottomSheetViewProps,
+          BottomSheetViewEventEmitter,
+          BottomSheetViewState> {
+  using ConcreteViewShadowNode::ConcreteViewShadowNode;
+
+ public:
+  void adjustLayoutWithState();
+};
+
+} // namespace facebook::react

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swmansion/react-native-bottom-sheet",
-  "version": "0.7.0-next.5",
+  "version": "0.7.0-next.7",
   "description": "Provides bottom-sheet components for React Native.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -17,6 +17,7 @@
     "lib",
     "android",
     "ios",
+    "common",
     "cpp",
     "*.podspec",
     "react-native.config.js",

package/react-native.config.js

@@ -1 +1,11 @@
-module.exports = {};
+module.exports = {
+  dependency: {
+    platforms: {
+      android: {
+        libraryName: 'ReactNativeBottomSheetSpec',
+        componentDescriptors: ['BottomSheetViewComponentDescriptor'],
+        cmakeListsPath: 'src/main/jni/CMakeLists.txt',
+      },
+    },
+  },
+};