@lodev09/react-native-true-sheet 0.11.3 → 0.12.0

package/README.md

@@ -6,7 +6,7 @@
 
 The true native bottom sheet experience for your React Native Apps. 💩
 
-<img alt="React Native True Sheet" src="docs/static/img/preview.gif" width="600px" />
+<img alt="React Native True Sheet - IOS" src="docs/static/img/preview.gif" width="300" height="600" /><img alt="React Native True Sheet - Android" src="docs/static/img/preview-2.gif" width="300" height="600" />
 
 ## Features
 

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

@@ -19,6 +19,8 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
   BottomSheetDialog(reactContext) {
 
   private var keyboardManager = KeyboardManager(reactContext)
+  private var sheetView: ViewGroup
+  private var windowAnimation: Int = 0
 
   /**
    * Specify whether the sheet background is dimmed.
@@ -53,19 +55,20 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
 
   var sizes: Array<Any> = arrayOf("medium", "large")
 
-  private var sheetView: ViewGroup
-
   init {
     setContentView(rootSheetView)
     sheetView = rootSheetView.parent as ViewGroup
     sheetView.setBackgroundColor(Color.TRANSPARENT)
 
-    // Setup window params to adjust layout based on Keyboard state.
+    // Setup window params to adjust layout based on Keyboard state
     window?.apply {
       // SOFT_INPUT_ADJUST_RESIZE to resize the sheet above the keyboard
       setSoftInputMode(
         WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE
       )
+
+      // Store current windowAnimation value to toggle later
+      windowAnimation = attributes.windowAnimations
     }
 
     // Update the usable sheet height
@@ -107,10 +110,16 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
     }
   }
 
+  fun resetAnimation() {
+    window?.apply {
+      setWindowAnimations(windowAnimation)
+    }
+  }
+
   /**
    * Present the sheet.
    */
-  fun present(sizeIndex: Int) {
+  fun present(sizeIndex: Int, animated: Boolean = true) {
     setupDimmedBackground(sizeIndex)
     if (isShowing) {
       setStateForSizeIndex(sizeIndex)
@@ -118,7 +127,12 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
       configure()
       setStateForSizeIndex(sizeIndex)
 
-      this.show()
+      if (!animated) {
+        // Disable animation
+        window?.setWindowAnimations(0)
+      }
+
+      show()
     }
   }
 
@@ -178,10 +192,7 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
         else -> (maxScreenHeight * 0.5).toInt()
       }
 
-    return when (maxSheetHeight) {
-      null -> height
-      else -> minOf(height, maxSheetHeight ?: maxScreenHeight)
-    }
+    return maxSheetHeight?.let { minOf(height, it, maxScreenHeight) } ?: minOf(height, maxScreenHeight)
   }
 
   /**
@@ -216,7 +227,7 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
    * Also update footer's Y position.
    */
   fun registerKeyboardManager() {
-    keyboardManager.registerKeyboardListener(object : KeyboardManager.OnKeyboardListener {
+    keyboardManager.registerKeyboardListener(object : KeyboardManager.OnKeyboardChangeListener {
       override fun onKeyboardStateChange(isVisible: Boolean, visibleHeight: Int?) {
         maxScreenHeight = when (isVisible) {
           true -> visibleHeight ?: 0
@@ -228,6 +239,10 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
     })
   }
 
+  fun setOnSizeChangeListener(listener: RootSheetView.OnSizeChangeListener) {
+    rootSheetView.setOnSizeChangeListener(listener)
+  }
+
   /**
    * Remove keyboard listener.
    */
@@ -263,7 +278,8 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
           isFitToContents = false
 
           setPeekHeight(getSizeHeight(sizes[0]), isShowing)
-          halfExpandedRatio = getSizeHeight(sizes[1]).toFloat() / maxScreenHeight.toFloat()
+
+          halfExpandedRatio = minOf(getSizeHeight(sizes[1]).toFloat() / maxScreenHeight.toFloat(), 1.0f)
           maxHeight = getSizeHeight(sizes[2])
         }
       }

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

@@ -11,10 +11,11 @@ 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.lodev09.truesheet.core.DismissEvent
-import com.lodev09.truesheet.core.PresentEvent
 import com.lodev09.truesheet.core.RootSheetView
-import com.lodev09.truesheet.core.SizeChangeEvent
+import com.lodev09.truesheet.events.DismissEvent
+import com.lodev09.truesheet.events.MountEvent
+import com.lodev09.truesheet.events.PresentEvent
+import com.lodev09.truesheet.events.SizeChangeEvent
 
 class TrueSheetView(context: Context) :
   ViewGroup(context),
@@ -27,6 +28,9 @@ class TrueSheetView(context: Context) :
   private val surfaceId: Int
     get() = UIManagerHelper.getSurfaceId(this)
 
+  var initialIndex: Int = -1
+  var initialIndexAnimated: Boolean = true
+
   /**
    * Current activeIndex.
    */
@@ -52,11 +56,6 @@ class TrueSheetView(context: Context) :
    */
   private val rootSheetView: RootSheetView
 
-  /**
-   * 2nd child of the container view.
-   */
-  private var footerView: ViewGroup? = null
-
   init {
     reactContext.addLifecycleEventListener(this)
     eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, id)
@@ -77,13 +76,16 @@ class TrueSheetView(context: Context) :
           positionFooter()
         }
 
+        // Re-enable animation
+        resetAnimation()
+
         // Resolve the present promise
         presentPromise?.let { promise ->
           promise()
           presentPromise = null
         }
 
-        // dispatch onPresent event
+        // Dispatch onPresent event
         eventDispatcher?.dispatchEvent(PresentEvent(surfaceId, id, sheetDialog.getSizeInfoForIndex(currentSizeIndex)))
       }
 
@@ -97,10 +99,17 @@ class TrueSheetView(context: Context) :
           dismissPromise = null
         }
 
-        // dispatch onDismiss event
+        // Dispatch onDismiss event
         eventDispatcher?.dispatchEvent(DismissEvent(surfaceId, id))
       }
 
+      // Configure when showing and size changed
+      setOnSizeChangeListener(object : RootSheetView.OnSizeChangeListener {
+        override fun onSizeChange(width: Int, height: Int) {
+          maxScreenHeight = height
+        }
+      })
+
       // Configure sheet behavior events
       behavior.addBottomSheetCallback(
         object : BottomSheetBehavior.BottomSheetCallback() {
@@ -132,7 +141,7 @@ class TrueSheetView(context: Context) :
             currentSizeIndex = sizeInfo.index
             setupDimmedBackground(sizeInfo.index)
 
-            // dispatch onSizeChange event
+            // Dispatch onSizeChange event
             eventDispatcher?.dispatchEvent(SizeChangeEvent(surfaceId, id, sizeInfo))
           }
         }
@@ -164,13 +173,28 @@ class TrueSheetView(context: Context) :
     visibility = GONE
 
     (child as ViewGroup).let {
-      // Container View's first child is the Content View
-      footerView = it.getChildAt(1) as ViewGroup
-
-      sheetDialog.footerView = footerView
-
       // rootView's first child is the Container View
       rootSheetView.addView(it, index)
+
+      // Initialize content
+      UiThreadUtil.runOnUiThread {
+        // 1st child is the content view
+        val contentView = it.getChildAt(0) as ViewGroup
+        setContentHeight(contentView.height)
+
+        // 2nd child is the footer view
+        val footerView = it.getChildAt(1) as ViewGroup
+        sheetDialog.footerView = footerView
+        setFooterHeight(footerView.height)
+
+        if (initialIndex >= 0) {
+          currentSizeIndex = initialIndex
+          sheetDialog.present(initialIndex, initialIndexAnimated)
+        }
+
+        // Dispatch onMount event
+        eventDispatcher?.dispatchEvent(MountEvent(surfaceId, id))
+      }
     }
   }
 
@@ -224,21 +248,29 @@ class TrueSheetView(context: Context) :
   }
 
   fun setMaxHeight(height: Int) {
+    if (sheetDialog.maxSheetHeight == height) return
+
     sheetDialog.maxSheetHeight = height
     configureIfShowing()
   }
 
   fun setContentHeight(height: Int) {
+    if (sheetDialog.contentHeight == height) return
+
     sheetDialog.contentHeight = height
     configureIfShowing()
   }
 
   fun setFooterHeight(height: Int) {
+    if (sheetDialog.footerHeight == height) return
+
     sheetDialog.footerHeight = height
     configureIfShowing()
   }
 
   fun setDimmed(dimmed: Boolean) {
+    if (sheetDialog.dimmed == dimmed) return
+
     sheetDialog.dimmed = dimmed
     if (sheetDialog.isShowing) {
       sheetDialog.setupDimmedBackground(currentSizeIndex)
@@ -246,6 +278,8 @@ class TrueSheetView(context: Context) :
   }
 
   fun setDimmedIndex(index: Int) {
+    if (sheetDialog.dimmedIndex == index) return
+
     sheetDialog.dimmedIndex = index
     if (sheetDialog.isShowing) {
       sheetDialog.setupDimmedBackground(currentSizeIndex)

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

@@ -7,10 +7,11 @@ 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
 import com.lodev09.truesheet.core.Utils
+import com.lodev09.truesheet.events.DismissEvent
+import com.lodev09.truesheet.events.MountEvent
+import com.lodev09.truesheet.events.PresentEvent
+import com.lodev09.truesheet.events.SizeChangeEvent
 
 class TrueSheetViewManager : ViewGroupManager<TrueSheetView>() {
   override fun getName() = TAG
@@ -24,6 +25,7 @@ class TrueSheetViewManager : ViewGroupManager<TrueSheetView>() {
 
   override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any>? =
     MapBuilder.builder<String, Any>()
+      .put(MountEvent.EVENT_NAME, MapBuilder.of("registrationName", "onMount"))
       .put(PresentEvent.EVENT_NAME, MapBuilder.of("registrationName", "onPresent"))
       .put(DismissEvent.EVENT_NAME, MapBuilder.of("registrationName", "onDismiss"))
       .put(SizeChangeEvent.EVENT_NAME, MapBuilder.of("registrationName", "onSizeChange"))
@@ -44,6 +46,16 @@ class TrueSheetViewManager : ViewGroupManager<TrueSheetView>() {
     view.setDimmed(dimmed)
   }
 
+  @ReactProp(name = "initialIndex")
+  fun setInitialIndex(view: TrueSheetView, index: Int) {
+    view.initialIndex = index
+  }
+
+  @ReactProp(name = "initialIndexAnimated")
+  fun setInitialIndexAnimated(view: TrueSheetView, animate: Boolean) {
+    view.initialIndexAnimated = animate
+  }
+
   @ReactProp(name = "dimmedIndex")
   fun setDimmedIndex(view: TrueSheetView, index: Int) {
     view.setDimmedIndex(index)

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

@@ -7,7 +7,7 @@ import android.view.inputmethod.InputMethodManager
 import com.facebook.react.bridge.ReactContext
 
 class KeyboardManager(reactContext: ReactContext) {
-  interface OnKeyboardListener {
+  interface OnKeyboardChangeListener {
     fun onKeyboardStateChange(isVisible: Boolean, visibleHeight: Int?)
   }
 
@@ -20,7 +20,7 @@ class KeyboardManager(reactContext: ReactContext) {
     contentView = activity?.findViewById(android.R.id.content)
   }
 
-  fun registerKeyboardListener(listener: OnKeyboardListener?) {
+  fun registerKeyboardListener(listener: OnKeyboardChangeListener?) {
     contentView?.apply {
       unregisterKeyboardListener()
 

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

@@ -26,21 +26,26 @@ import com.facebook.react.views.view.ReactViewGroup
  * 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.
  */
-class RootSheetView(context: Context?) :
+class RootSheetView(private val 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
+  private val jSTouchDispatcher = JSTouchDispatcher(this)
+  private var jSPointerDispatcher: JSPointerDispatcher? = null
+  private var sizeChangeListener: OnSizeChangeListener? = null
 
   var eventDispatcher: EventDispatcher? = null
 
+  interface OnSizeChangeListener {
+    fun onSizeChange(width: Int, height: Int)
+  }
+
   init {
     if (ReactFeatureFlags.dispatchPointerEvents) {
-      mJSPointerDispatcher = JSPointerDispatcher(this)
+      jSPointerDispatcher = JSPointerDispatcher(this)
     }
   }
 
@@ -50,6 +55,12 @@ class RootSheetView(context: Context?) :
     viewWidth = w
     viewHeight = h
     updateFirstChildView()
+
+    sizeChangeListener?.onSizeChange(w, h)
+  }
+
+  fun setOnSizeChangeListener(listener: OnSizeChangeListener) {
+    sizeChangeListener = listener
   }
 
   private fun updateFirstChildView() {
@@ -88,15 +99,15 @@ class RootSheetView(context: Context?) :
     get() = context as ThemedReactContext
 
   override fun onInterceptTouchEvent(event: MotionEvent): Boolean {
-    mJSTouchDispatcher.handleTouchEvent(event, eventDispatcher)
-    mJSPointerDispatcher?.handleMotionEvent(event, eventDispatcher, true)
+    jSTouchDispatcher.handleTouchEvent(event, eventDispatcher)
+    jSPointerDispatcher?.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)
+    jSTouchDispatcher.handleTouchEvent(event, eventDispatcher)
+    jSPointerDispatcher?.handleMotionEvent(event, eventDispatcher, false)
     super.onTouchEvent(event)
 
     // In case when there is no children interested in handling touch event, we return true from
@@ -105,28 +116,28 @@ class RootSheetView(context: Context?) :
   }
 
   override fun onInterceptHoverEvent(event: MotionEvent): Boolean {
-    mJSPointerDispatcher?.handleMotionEvent(event, eventDispatcher, true)
+    jSPointerDispatcher?.handleMotionEvent(event, eventDispatcher, true)
     return super.onHoverEvent(event)
   }
 
   override fun onHoverEvent(event: MotionEvent): Boolean {
-    mJSPointerDispatcher?.handleMotionEvent(event, eventDispatcher, false)
+    jSPointerDispatcher?.handleMotionEvent(event, eventDispatcher, false)
     return super.onHoverEvent(event)
   }
 
   @Deprecated("Deprecated in Java")
   override fun onChildStartedNativeGesture(ev: MotionEvent?) {
-    mJSTouchDispatcher.onChildStartedNativeGesture(ev, eventDispatcher)
+    jSTouchDispatcher.onChildStartedNativeGesture(ev, eventDispatcher)
   }
 
   override fun onChildStartedNativeGesture(childView: View, ev: MotionEvent) {
-    mJSTouchDispatcher.onChildStartedNativeGesture(ev, eventDispatcher)
-    mJSPointerDispatcher?.onChildStartedNativeGesture(childView, ev, eventDispatcher)
+    jSTouchDispatcher.onChildStartedNativeGesture(ev, eventDispatcher)
+    jSPointerDispatcher?.onChildStartedNativeGesture(childView, ev, eventDispatcher)
   }
 
   override fun onChildEndedNativeGesture(childView: View, ev: MotionEvent) {
-    mJSTouchDispatcher.onChildEndedNativeGesture(ev, eventDispatcher)
-    mJSPointerDispatcher?.onChildEndedNativeGesture()
+    jSTouchDispatcher.onChildEndedNativeGesture(ev, eventDispatcher)
+    jSPointerDispatcher?.onChildEndedNativeGesture()
   }
 
   override fun requestDisallowInterceptTouchEvent(disallowIntercept: Boolean) {

package/android/src/main/java/com/lodev09/truesheet/events/DismissEvent.kt

@@ -0,0 +1,16 @@
+package com.lodev09.truesheet.events
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+
+// onDismiss
+class DismissEvent(surfaceId: Int, viewId: Int) : Event<DismissEvent>(surfaceId, viewId) {
+  override fun getEventName() = EVENT_NAME
+
+  override fun getEventData(): WritableMap = Arguments.createMap()
+
+  companion object {
+    const val EVENT_NAME = "dismiss"
+  }
+}

package/android/src/main/java/com/lodev09/truesheet/events/MountEvent.kt

@@ -0,0 +1,16 @@
+package com.lodev09.truesheet.events
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+
+// onMount
+class MountEvent(surfaceId: Int, viewId: Int) : Event<MountEvent>(surfaceId, viewId) {
+  override fun getEventName() = EVENT_NAME
+
+  override fun getEventData(): WritableMap = Arguments.createMap()
+
+  companion object {
+    const val EVENT_NAME = "ready"
+  }
+}

package/android/src/main/java/com/lodev09/truesheet/events/PresentEvent.kt

@@ -0,0 +1,23 @@
+package com.lodev09.truesheet.events
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+import com.lodev09.truesheet.SizeInfo
+
+// onPresent
+class PresentEvent(surfaceId: Int, viewId: Int, private val sizeInfo: SizeInfo) : Event<PresentEvent>(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 = "present"
+  }
+}

package/android/src/main/java/com/lodev09/truesheet/events/SizeChangeEvent.kt

@@ -0,0 +1,23 @@
+package com.lodev09.truesheet.events
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+import com.lodev09.truesheet.SizeInfo
+
+// onSizeChange
+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"
+  }
+}