@lodev09/react-native-true-sheet 0.2.1 → 0.3.0

package/README.md

@@ -11,6 +11,7 @@ The true native bottom sheet.
 * ✅ **_NOT_** your pure JS, (re)animated View.
 * ✅ Clean, fast and lightweight.
 * ✅ Handles your Sscrolling needs, easy.
+* ✅ Asynchronus `ref` methods.
 
 ## Installation
 
@@ -34,7 +35,7 @@ const openSheet = () => {
 return (
   <View>
     <Button onPress={openSheet} title="Open Sheet" />
-    <TrueSheet ref={sheet}>
+    <TrueSheet sizes={['auto', 'large']} ref={sheet}>
       // ...
     </TrueSheet>
   </View>
@@ -51,7 +52,3 @@ See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the
 ## License
 
 MIT
-
----
-
-Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

package/android/build.gradle

@@ -90,5 +90,6 @@ dependencies {
   //noinspection GradleDynamicVersion
   implementation "com.facebook.react:react-native:+"
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
+  implementation "com.google.android.material:material:1.11.0"
 }
 

package/android/src/main/java/com/lodev09/truesheet/TrueSheetPackage.kt

@@ -5,13 +5,8 @@ import com.facebook.react.bridge.NativeModule
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.uimanager.ViewManager
 
-
 class TrueSheetPackage : ReactPackage {
-  override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
-    return emptyList()
-  }
+  override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> = listOf(TrueSheetViewModule(reactContext))
 
-  override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
-    return listOf(TrueSheetViewManager())
-  }
+  override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> = listOf(TrueSheetViewManager())
 }

package/android/src/main/java/com/lodev09/truesheet/TrueSheetView.kt

@@ -0,0 +1,233 @@
+package com.lodev09.truesheet
+
+import android.content.Context
+import android.view.View
+import android.view.ViewGroup
+import android.view.ViewStructure
+import android.view.accessibility.AccessibilityEvent
+import android.widget.LinearLayout
+import androidx.coordinatorlayout.widget.CoordinatorLayout
+import com.facebook.react.bridge.LifecycleEventListener
+import com.facebook.react.bridge.UiThreadUtil
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.events.EventDispatcher
+import com.google.android.material.bottomsheet.BottomSheetBehavior
+import com.google.android.material.bottomsheet.BottomSheetDialog
+import com.lodev09.truesheet.core.DismissEvent
+import com.lodev09.truesheet.core.PresentEvent
+import com.lodev09.truesheet.core.RootViewGroup
+import com.lodev09.truesheet.core.SheetBehavior
+import com.lodev09.truesheet.core.SizeChangeEvent
+import com.lodev09.truesheet.utils.maxSize
+
+class TrueSheetView(context: Context) :
+  ViewGroup(context),
+  LifecycleEventListener {
+  private var eventDispatcher: EventDispatcher? = null
+
+  private val reactContext: ThemedReactContext
+    get() = context as ThemedReactContext
+
+  private val surfaceId: Int
+    get() = UIManagerHelper.getSurfaceId(this)
+
+  private var sizeIndex: Int = 0
+  private var sizes: Array<Any> = arrayOf("medium", "large")
+
+  private var presentPromise: (() -> Unit)? = null
+  private var dismissPromise: (() -> Unit)? = null
+
+  private val sheetDialog: BottomSheetDialog
+  private val sheetLayout: LinearLayout
+  private val sheetRootView: RootViewGroup
+
+  // 1st child of the container view
+  private var contentView: ViewGroup? = null
+
+  // 2nd child of the container view
+  private var footerView: ViewGroup? = null
+
+  private var sheetBehavior: SheetBehavior<ViewGroup>
+
+  init {
+    reactContext.addLifecycleEventListener(this)
+    eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, id)
+
+    sheetRootView = RootViewGroup(context)
+    sheetRootView.eventDispatcher = eventDispatcher
+
+    sheetDialog = BottomSheetDialog(context)
+    sheetBehavior = SheetBehavior()
+    sheetLayout = LinearLayout(context)
+
+    // Configure Sheet events
+    sheetBehavior.apply {
+      maxSize = maxSize(context)
+
+      addBottomSheetCallback(
+        object : BottomSheetBehavior.BottomSheetCallback() {
+          override fun onSlide(sheetView: View, slideOffset: Float) {
+            footerView?.let {
+              it.y = (sheetView.height - sheetView.top - it.height).toFloat()
+            }
+          }
+
+          override fun onStateChanged(view: View, newState: Int) {
+            val sizeInfo = getSizeInfoForState(sizes.size, newState)
+            if (sizeInfo != null && sizeInfo.index != sizeIndex) {
+              sizeIndex = sizeInfo.index
+
+              // dispatch onSizeChange event
+              eventDispatcher?.dispatchEvent(SizeChangeEvent(surfaceId, id, sizeInfo))
+            }
+
+            when (newState) {
+              BottomSheetBehavior.STATE_HIDDEN -> sheetDialog.dismiss()
+              else -> {}
+            }
+          }
+        }
+      )
+    }
+
+    // Configure the sheet layout
+    sheetLayout.apply {
+      addView(sheetRootView)
+      sheetDialog.setContentView(this)
+
+      val layoutParent = parent as ViewGroup
+      (layoutParent.layoutParams as CoordinatorLayout.LayoutParams).behavior = sheetBehavior
+    }
+
+    // Configure Sheet Dialog
+    sheetDialog.apply {
+      setOnShowListener {
+        UiThreadUtil.runOnUiThread {
+          footerView?.let {
+            val sheetView = sheetLayout.parent as ViewGroup
+            it.y = (sheetView.height - sheetView.top - it.height).toFloat()
+          }
+        }
+
+        presentPromise?.invoke()
+        presentPromise = null
+
+        // dispatch onPresent event
+        eventDispatcher?.dispatchEvent(PresentEvent(surfaceId, id))
+      }
+
+      setOnDismissListener {
+        dismissPromise?.invoke()
+        dismissPromise = null
+
+        // dispatch onDismiss event
+        eventDispatcher?.dispatchEvent(DismissEvent(surfaceId, id))
+      }
+    }
+  }
+
+  override fun dispatchProvideStructure(structure: ViewStructure) {
+    sheetRootView.dispatchProvideStructure(structure)
+  }
+
+  override fun onLayout(
+    changed: Boolean,
+    l: Int,
+    t: Int,
+    r: Int,
+    b: Int
+  ) {
+    // Do nothing as we are laid out by UIManager
+  }
+
+  override fun onDetachedFromWindow() {
+    super.onDetachedFromWindow()
+    sheetDialog.dismiss()
+  }
+
+  override fun addView(child: View, index: Int) {
+    // Hide this host view
+    visibility = GONE
+
+    (child as ViewGroup).let {
+      // Container View's first child is the Content View
+      contentView = it.getChildAt(0) as ViewGroup
+      footerView = it.getChildAt(1) as ViewGroup
+
+      sheetBehavior.contentView = contentView
+      sheetBehavior.footerView = footerView
+
+      // rootView's first child is the Container View
+      sheetRootView.addView(it, index)
+    }
+  }
+
+  override fun getChildCount(): Int {
+    // This method may be called by the parent constructor
+    // before rootView is initialized.
+    return sheetRootView.childCount
+  }
+
+  override fun getChildAt(index: Int): View = sheetRootView.getChildAt(index)
+
+  override fun removeView(child: View) {
+    sheetRootView.removeView(child)
+  }
+
+  override fun removeViewAt(index: Int) {
+    val child = getChildAt(index)
+    sheetRootView.removeView(child)
+  }
+
+  override fun addChildrenForAccessibility(outChildren: ArrayList<View>) {
+    // Explicitly override this to prevent accessibility events being passed down to children
+    // Those will be handled by the rootView which lives in the dialog
+  }
+
+  override fun dispatchPopulateAccessibilityEvent(event: AccessibilityEvent): Boolean {
+    // Explicitly override this to prevent accessibility events being passed down to children
+    // Those will be handled by the rootView which lives in the dialog
+    return false
+  }
+
+  override fun onHostResume() {
+    // do nothing
+  }
+
+  override fun onHostPause() {
+    // do nothing
+  }
+
+  override fun onHostDestroy() {
+    // Drop the instance if the host is destroyed which will dismiss the dialog
+    reactContext.removeLifecycleEventListener(this)
+    sheetDialog.dismiss()
+  }
+
+  fun setSizes(newSizes: Array<Any>) {
+    sizes = newSizes
+    sheetBehavior.configure(sizes)
+  }
+
+  fun present(index: Int, promiseCallback: () -> Unit) {
+    sheetBehavior.setStateForSizeIndex(sizes.size, index)
+
+    if (sheetDialog.isShowing) {
+      promiseCallback()
+    } else {
+      sheetBehavior.configure(sizes)
+      presentPromise = promiseCallback
+      sheetDialog.show()
+    }
+  }
+
+  fun dismiss(promiseCallback: () -> Unit) {
+    dismissPromise = promiseCallback
+    sheetDialog.dismiss()
+  }
+
+  companion object {
+    const val TAG = "TrueSheetView"
+  }
+}

package/android/src/main/java/com/lodev09/truesheet/TrueSheetViewManager.kt

@@ -1,20 +1,52 @@
 package com.lodev09.truesheet
 
-import android.graphics.Color
-import android.view.View
-import com.facebook.react.uimanager.SimpleViewManager
+import android.util.Log
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableType
+import com.facebook.react.common.MapBuilder
 import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.annotations.ReactProp
+import com.lodev09.truesheet.core.DismissEvent
+import com.lodev09.truesheet.core.PresentEvent
+import com.lodev09.truesheet.core.SizeChangeEvent
 
-class TrueSheetViewManager : SimpleViewManager<View>() {
-  override fun getName() = "TrueSheetView"
+class TrueSheetViewManager : ViewGroupManager<TrueSheetView>() {
+  override fun getName() = TAG
 
-  override fun createViewInstance(reactContext: ThemedReactContext): View {
-    return View(reactContext)
+  override fun createViewInstance(reactContext: ThemedReactContext): TrueSheetView = TrueSheetView(reactContext)
+
+  override fun onDropViewInstance(view: TrueSheetView) {
+    super.onDropViewInstance(view)
+    view.onHostDestroy()
+  }
+
+  override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any>? =
+    MapBuilder.builder<String, Any>()
+      .put(PresentEvent.EVENT_NAME, MapBuilder.of("registrationName", "onPresent"))
+      .put(DismissEvent.EVENT_NAME, MapBuilder.of("registrationName", "onDismiss"))
+      .put(SizeChangeEvent.EVENT_NAME, MapBuilder.of("registrationName", "onSizeChange"))
+      .build()
+
+  @ReactProp(name = "sizes")
+  fun setSizes(view: TrueSheetView, sizes: ReadableArray?) {
+    if (sizes != null) {
+      val result = ArrayList<Any>()
+      for (i in 0 until minOf(sizes.size(), 3)) {
+        when (sizes.getType(i)) {
+          ReadableType.Number -> result.add(sizes.getDouble(i))
+          ReadableType.String -> result.add(sizes.getString(i))
+          else -> Log.d(TAG, "Invalid type")
+        }
+      }
+
+      view.setSizes(result.toArray())
+    } else {
+      view.setSizes(arrayOf("medium", "large"))
+    }
   }
 
-  @ReactProp(name = "color")
-  fun setColor(view: View, color: String) {
-    view.setBackgroundColor(Color.parseColor(color))
+  companion object {
+    const val TAG = "TrueSheetView"
   }
 }

package/android/src/main/java/com/lodev09/truesheet/TrueSheetViewModule.kt

@@ -0,0 +1,63 @@
+package com.lodev09.truesheet
+
+import android.util.Log
+import com.facebook.react.bridge.Promise
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReactContextBaseJavaModule
+import com.facebook.react.bridge.ReactMethod
+import com.facebook.react.bridge.UiThreadUtil
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.UIManagerHelper
+import com.lodev09.truesheet.utils.withPromise
+
+@ReactModule(name = TrueSheetViewModule.TAG)
+class TrueSheetViewModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {
+  override fun getName(): String = TAG
+
+  private fun withTrueSheetView(tag: Int, closure: (trueSheetView: TrueSheetView) -> Unit) {
+    UiThreadUtil.runOnUiThread {
+      try {
+        val manager = UIManagerHelper.getUIManagerForReactTag(reactApplicationContext, tag)
+        val view = manager?.resolveView(tag)
+        if (view == null) {
+          Log.d(TAG, "Tag $tag not found")
+          return@runOnUiThread
+        }
+
+        if (view is TrueSheetView) {
+          closure(view)
+        } else {
+          Log.d(TAG, "Tag $tag does not match")
+        }
+      } catch (e: Exception) {
+        e.printStackTrace()
+      }
+    }
+  }
+
+  @ReactMethod
+  fun present(tag: Int, index: Int, promise: Promise) {
+    withTrueSheetView(tag) {
+      it.present(index) {
+        withPromise(promise) {
+          return@withPromise null
+        }
+      }
+    }
+  }
+
+  @ReactMethod
+  fun dismiss(tag: Int, promise: Promise) {
+    withTrueSheetView(tag) {
+      it.dismiss {
+        withPromise(promise) {
+          return@withPromise null
+        }
+      }
+    }
+  }
+
+  companion object {
+    const val TAG = "TrueSheetView"
+  }
+}

package/android/src/main/java/com/lodev09/truesheet/core/Events.kt

@@ -0,0 +1,43 @@
+package com.lodev09.truesheet.core
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+
+// onPresent
+class PresentEvent(surfaceId: Int, viewId: Int) : Event<PresentEvent>(surfaceId, viewId) {
+  override fun getEventName() = EVENT_NAME
+
+  override fun getEventData(): WritableMap = Arguments.createMap()
+
+  companion object {
+    const val EVENT_NAME = "present"
+  }
+}
+
+// onDismiss
+class DismissEvent(surfaceId: Int, viewId: Int) : Event<PresentEvent>(surfaceId, viewId) {
+  override fun getEventName() = EVENT_NAME
+
+  override fun getEventData(): WritableMap = Arguments.createMap()
+
+  companion object {
+    const val EVENT_NAME = "dismiss"
+  }
+}
+
+class SizeChangeEvent(surfaceId: Int, viewId: Int, private val sizeInfo: SizeInfo) : Event<SizeChangeEvent>(surfaceId, viewId) {
+  override fun getEventName() = EVENT_NAME
+
+  override fun getEventData(): WritableMap {
+    val data = Arguments.createMap()
+    data.putInt("index", sizeInfo.index)
+    data.putDouble("value", sizeInfo.value.toDouble())
+
+    return data
+  }
+
+  companion object {
+    const val EVENT_NAME = "sizeChange"
+  }
+}

package/android/src/main/java/com/lodev09/truesheet/core/RootViewGroup.kt

@@ -0,0 +1,136 @@
+package com.lodev09.truesheet.core
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.view.MotionEvent
+import android.view.View
+import com.facebook.react.bridge.GuardedRunnable
+import com.facebook.react.config.ReactFeatureFlags
+import com.facebook.react.uimanager.JSPointerDispatcher
+import com.facebook.react.uimanager.JSTouchDispatcher
+import com.facebook.react.uimanager.RootView
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.UIManagerModule
+import com.facebook.react.uimanager.events.EventDispatcher
+import com.facebook.react.views.view.ReactViewGroup
+
+/**
+ * RootViewGroup is the ViewGroup which contains all the children of a Modal. It gets all
+ * child information forwarded from ReactModalHostView and uses that to create children. It is
+ * also responsible for acting as a RootView and handling touch events. It does this the same way
+ * as ReactRootView.
+ *
+ *
+ * To get layout to work properly, we need to layout all the elements within the Modal as if
+ * they can fill the entire window. To do that, we need to explicitly set the styleWidth and
+ * styleHeight on the LayoutShadowNode to be the window size. This is done through the
+ * UIManagerModule, and will then cause the children to layout as if they can fill the window.
+ */
+internal class RootViewGroup(context: Context?) :
+  ReactViewGroup(context),
+  RootView {
+  private var hasAdjustedSize = false
+  private var viewWidth = 0
+  private var viewHeight = 0
+
+  private val mJSTouchDispatcher = JSTouchDispatcher(this)
+
+  private var mJSPointerDispatcher: JSPointerDispatcher? = null
+
+  var eventDispatcher: EventDispatcher? = null
+
+  init {
+    if (ReactFeatureFlags.dispatchPointerEvents) {
+      mJSPointerDispatcher = JSPointerDispatcher(this)
+    }
+  }
+
+  override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
+    super.onSizeChanged(w, h, oldw, oldh)
+
+    viewWidth = w
+    viewHeight = h
+    updateFirstChildView()
+  }
+
+  private fun updateFirstChildView() {
+    if (childCount > 0) {
+      hasAdjustedSize = false
+      val viewTag = getChildAt(0).id
+      reactContext.runOnNativeModulesQueueThread(
+        object : GuardedRunnable(reactContext) {
+          override fun runGuarded() {
+            val uiManager: UIManagerModule =
+              reactContext
+                .reactApplicationContext
+                .getNativeModule(UIManagerModule::class.java) ?: return
+
+            uiManager.updateNodeSize(viewTag, viewWidth, viewHeight)
+          }
+        }
+      )
+    } else {
+      hasAdjustedSize = true
+    }
+  }
+
+  override fun addView(child: View, index: Int, params: LayoutParams) {
+    super.addView(child, index, params)
+    if (hasAdjustedSize) {
+      updateFirstChildView()
+    }
+  }
+
+  override fun handleException(t: Throwable) {
+    reactContext.reactApplicationContext.handleException(RuntimeException(t))
+  }
+
+  private val reactContext: ThemedReactContext
+    get() = context as ThemedReactContext
+
+  override fun onInterceptTouchEvent(event: MotionEvent): Boolean {
+    mJSTouchDispatcher.handleTouchEvent(event, eventDispatcher)
+    mJSPointerDispatcher?.handleMotionEvent(event, eventDispatcher, true)
+    return super.onInterceptTouchEvent(event)
+  }
+
+  @SuppressLint("ClickableViewAccessibility")
+  override fun onTouchEvent(event: MotionEvent): Boolean {
+    mJSTouchDispatcher.handleTouchEvent(event, eventDispatcher)
+    mJSPointerDispatcher?.handleMotionEvent(event, eventDispatcher, false)
+    super.onTouchEvent(event)
+
+    // In case when there is no children interested in handling touch event, we return true from
+    // the root view in order to receive subsequent events related to that gesture
+    return true
+  }
+
+  override fun onInterceptHoverEvent(event: MotionEvent): Boolean {
+    mJSPointerDispatcher?.handleMotionEvent(event, eventDispatcher, true)
+    return super.onHoverEvent(event)
+  }
+
+  override fun onHoverEvent(event: MotionEvent): Boolean {
+    mJSPointerDispatcher?.handleMotionEvent(event, eventDispatcher, false)
+    return super.onHoverEvent(event)
+  }
+
+  override fun onChildStartedNativeGesture(childView: View, ev: MotionEvent) {
+    mJSTouchDispatcher.onChildStartedNativeGesture(ev, eventDispatcher)
+    mJSPointerDispatcher?.onChildStartedNativeGesture(childView, ev, eventDispatcher)
+  }
+
+  override fun onChildEndedNativeGesture(childView: View, ev: MotionEvent) {
+    mJSTouchDispatcher.onChildEndedNativeGesture(ev, eventDispatcher)
+    mJSPointerDispatcher?.onChildEndedNativeGesture()
+  }
+
+  override fun requestDisallowInterceptTouchEvent(disallowIntercept: Boolean) {
+    // No-op - override in order to still receive events to onInterceptTouchEvent
+    // even when some other view disallow that
+  }
+
+  companion object {
+    const val TAG = "TrueSheetView"
+  }
+}