@lodev09/react-native-true-sheet 0.7.0 → 0.8.0

package/README.md

@@ -9,10 +9,10 @@ The true native bottom sheet 💩
 ![Preview](preview.gif)
 
 ## Features
-* ✅ Implemented on the native realm.
-* ✅ **_NOT_** your pure JS, (re)animated View. But might integrate in the future 👀
-* ✅ Clean, fast and lightweight.
-* ✅ Handles your Sscrolling needs, easy.
+* ✅ Implemented in the native realm.
+* ✅ **_NOT_** your pure JS, (re)animated view (might integrate in the future 👀)
+* ✅ Clean, fast, and lightweight.
+* ✅ Handles your scrolling needs, easy.
 * ✅ Asynchronus `ref` methods.
 
 ## Installation
@@ -21,6 +21,10 @@ The true native bottom sheet 💩
 yarn add @lodev09/react-native-true-sheet
 ```
 
+```sh
+npm i @lodev09/react-native-true-sheet
+```
+
 ## Usage
 
 ```ts
@@ -54,14 +58,14 @@ Extended from `ViewProps`
 
 | Prop | Type | Default | Description | 🍎 | 🤖 |
 | - | - | - | - | - | - |
-| sizes | [`SheetSize`](#sheetsize) | `['medium', 'large']` | The sizes you want the Sheet to support. Maximum of _**3 sizes**_ only! **_collapsed_**, **_half-expanded_** and **_expanded_**. Example: `size={['auto', '60%', 'large']}`| ✅ | ✅ |
+| sizes | [`SheetSize`](#sheetsize) | `['medium', 'large']` | The sizes you want the sheet to support. Maximum of _**3 sizes**_ only! **_collapsed_**, **_half-expanded_**, and **_expanded_**. Example: `size={['auto', '60%', 'large']}`| ✅ | ✅ |
 | backgroundColor | `ColorValue` | `white` | Main sheet background color. | ✅ | ✅ |
-| cornerRadius | `number` | - | The sheet corner radius. | ✅ | ✅ |
+| cornerRadius | `number` | - | the sheet corner radius. | ✅ | ✅ |
 | maxHeight | `number` | - | Overrides `large` or `100%` height. | ✅ | ✅ |
 | contentContainerStyle | `StyleProp<ViewStyle>` | - | Optional content container styles. | ✅ | ✅ |
-| FooterComponent | `ReactNode` | - | A component that floats at the bottom of the Sheet. | ✅ | ✅ |
-| dismissible | `boolean` | `true` | Prevents interactive dismissal of the Sheet. | ✅ | ✅ |
-| grabber | `boolean` | `true` | Shows native grabber (or handle) on iOS. | ✅ | |
+| FooterComponent | `ReactNode` | - | A component that floats at the bottom of the sheet. | ✅ | ✅ |
+| dismissible | `boolean` | `true` | If set to `false`, the sheet will prevent interactive dismissal via dragging or clicking outside of it. | ✅ | ✅ |
+| grabber | `boolean` | `true` | Shows a grabber (or handle). Native on IOS and styled `View` on Android. | ✅ | ✅ |
 | blurTint | [`BlurTint`](#blurTint) | - | The blur effect style on iOS. Overrides `backgroundColor` if set. Example: `light`, `dark`, etc. | ✅ | |
 | scrollRef | `RefObject<...>` | - | The main scrollable ref that Sheet should handle on iOS. | ✅ | |
 
@@ -92,8 +96,8 @@ return (
 | Name | Parameters | Description |
 | - | - | - |
 | present | `index: number = 0` | Present the modal sheet. Optionally accepts a size `index`. See `sizes` prop. |
-| resize | `index: number` | Resizes the Sheet programmatically by `index`. This is an alias of the `present(index)` method. |
-| dismiss | - | Dismisses the Sheet. |
+| resize | `index: number` | Resizes the sheet programmatically by `index`. This is an alias of the `present(index)` method. |
+| dismiss | - | Dismisses the sheet. |
 
 ## Events
 
@@ -111,8 +115,8 @@ return (
 
 | Name | Parameters | Description |
 | - | - | - |
-| onPresent | [`SizeInfo`](#sizeinfo) | Called when the Sheet has been presented. Comes with the size index and value. |
-| onDismiss | - | Called when the Sheet has been dismissed. |
+| onPresent | [`SizeInfo`](#sizeinfo) | Called when the sheet has been presented. Comes with the size index and value. |
+| onDismiss | - | Called when the sheet has been dismissed. |
 | onSizeChange | [`SizeInfo`](#sizeinfo) | Called when the size of the sheet has changed. Either by dragging or presenting programatically. Comes with the size index and value. |
 
 ## Types
@@ -127,12 +131,17 @@ return (
 
 | Value | Description | 🍎 | 🤖 |
 | - | - | - | - |
-| `large` | Translates to 100% | ✅ | ✅ |
-| `medium` | Translates to 50% | **_15+_** | ✅ |
-| `auto` | Auto resize based on content height. | **_16+_** | ✅ |
-| `number` | Fixed height | **_16+_** | ✅ |
+| `"large"` | Translates to 100% | ✅ | ✅ |
+| `"medium"` | Translates to 50% | **_15+_** | ✅ |
+| `"auto"` | Auto resize based on content height. | **_16+_** | ✅ |
+| `"number"` | Fixed height | **_16+_** | ✅ |
 | `${number}%` | Fixed height in % | **_16+_** | ✅ |
-| `small` | Translates to 25% | **_16+_** | ✅ |
+| `"small"` | Translates to 25% | **_16+_** | ✅ |
+
+> [!NOTE]
+> `auto` is not guaranteed to be accurate if your content depends on various rendering logic. Experiment with it and try to keep your content size as fixed as possible.
+>
+> Alternatively, you can programmatically call [`resize`](#methods) to adjust the sheet size on-the-fly.
 
 ### `BlurTint`
 
@@ -184,6 +193,13 @@ Blur tint that is mapped into native values in iOS.
 | index | `number` | The size index from the provided sizes. See `sizes` prop. |
 | value | `number` | The actual height value of the size. |
 
+## v1 Roadmap
+
+- [ ] Android: grabber
+- [ ] Inline sheet
+- [ ] Reanimated integration(?)
+- [ ] Any ideas?
+
 ## Contributing
 
 See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

package/android/src/main/java/com/lodev09/truesheet/{core/TrueSheetBehavior.kt → TrueSheetBehavior.kt}

@@ -1,16 +1,17 @@
-package com.lodev09.truesheet.core
+package com.lodev09.truesheet
 
-import android.graphics.Point
 import android.view.MotionEvent
 import android.view.ViewGroup
 import android.widget.ScrollView
 import androidx.coordinatorlayout.widget.CoordinatorLayout
+import com.facebook.react.bridge.ReactContext
 import com.google.android.material.bottomsheet.BottomSheetBehavior
+import com.lodev09.truesheet.core.Utils
 
 data class SizeInfo(val index: Int, val value: Float)
 
-class TrueSheetBehavior : BottomSheetBehavior<ViewGroup>() {
-  var maxSheetSize: Point = Point()
+class TrueSheetBehavior(private val reactContext: ReactContext) : BottomSheetBehavior<ViewGroup>() {
+  var maxScreenHeight: Int = 0
   var maxSheetHeight: Int? = null
 
   var contentView: ViewGroup? = null
@@ -56,6 +57,9 @@ class TrueSheetBehavior : BottomSheetBehavior<ViewGroup>() {
       event.action == MotionEvent.ACTION_CANCEL
   }
 
+  /**
+   * Get the height value based on the size config value.
+   */
   private fun getSizeHeight(size: Any, contentHeight: Int): Int {
     val height =
       when (size) {
@@ -67,11 +71,11 @@ class TrueSheetBehavior : BottomSheetBehavior<ViewGroup>() {
           when (size) {
             "auto" -> contentHeight
 
-            "large" -> maxSheetSize.y
+            "large" -> maxScreenHeight
 
-            "medium" -> (maxSheetSize.y * 0.50).toInt()
+            "medium" -> (maxScreenHeight * 0.50).toInt()
 
-            "small" -> (maxSheetSize.y * 0.25).toInt()
+            "small" -> (maxScreenHeight * 0.25).toInt()
 
             else -> {
               if (size.endsWith('%')) {
@@ -79,7 +83,7 @@ class TrueSheetBehavior : BottomSheetBehavior<ViewGroup>() {
                 if (percent == null) {
                   0
                 } else {
-                  ((percent / 100) * maxSheetSize.y).toInt()
+                  ((percent / 100) * maxScreenHeight).toInt()
                 }
               } else {
                 val fixedHeight = size.toDoubleOrNull()
@@ -93,13 +97,46 @@ class TrueSheetBehavior : BottomSheetBehavior<ViewGroup>() {
           }
         }
 
-        else -> (maxSheetSize.y * 0.5).toInt()
+        else -> (maxScreenHeight * 0.5).toInt()
       }
 
-    return minOf(height, maxSheetHeight ?: maxSheetSize.y)
+    return minOf(height, maxSheetHeight ?: maxScreenHeight)
   }
 
+  /**
+   * Determines the state based on the given size index.
+   */
+  fun getStateForSizeIndex(index: Int) =
+    when (sizes.size) {
+      1 -> STATE_EXPANDED
+
+      2 -> {
+        when (index) {
+          0 -> STATE_COLLAPSED
+          1 -> STATE_EXPANDED
+          else -> STATE_HIDDEN
+        }
+      }
+
+      3 -> {
+        when (index) {
+          0 -> STATE_COLLAPSED
+          1 -> STATE_HALF_EXPANDED
+          2 -> STATE_EXPANDED
+          else -> STATE_HIDDEN
+        }
+      }
+
+      else -> STATE_HIDDEN
+    }
+
+  /**
+   * Configure the sheet based on size preferences.
+   */
   fun configure() {
+    // Update the usable sheet height
+    maxScreenHeight = Utils.activityView(reactContext)?.height ?: 0
+
     var contentHeight = 0
 
     contentView?.let { contentHeight = it.height }
@@ -107,12 +144,16 @@ class TrueSheetBehavior : BottomSheetBehavior<ViewGroup>() {
 
     // Configure sheet sizes
     apply {
-      isFitToContents = true
       skipCollapsed = false
+      isFitToContents = true
+
+      // m3 max width 640dp
+      maxWidth = Utils.toPixel(640.0)
 
       when (sizes.size) {
         1 -> {
           maxHeight = getSizeHeight(sizes[0], contentHeight)
+          peekHeight = maxHeight
           skipCollapsed = true
         }
 
@@ -126,37 +167,16 @@ class TrueSheetBehavior : BottomSheetBehavior<ViewGroup>() {
           isFitToContents = false
 
           peekHeight = getSizeHeight(sizes[0], contentHeight)
-          halfExpandedRatio = getSizeHeight(sizes[1], contentHeight).toFloat() / maxSheetSize.y.toFloat()
+          halfExpandedRatio = getSizeHeight(sizes[1], contentHeight).toFloat() / maxScreenHeight.toFloat()
           maxHeight = getSizeHeight(sizes[2], contentHeight)
         }
       }
     }
   }
 
-  private fun getStateForIndex(index: Int) =
-    when (sizes.size) {
-      1 -> STATE_EXPANDED
-
-      2 -> {
-        when (index) {
-          0 -> STATE_COLLAPSED
-          1 -> STATE_EXPANDED
-          else -> STATE_HIDDEN
-        }
-      }
-
-      3 -> {
-        when (index) {
-          0 -> STATE_COLLAPSED
-          1 -> STATE_HALF_EXPANDED
-          2 -> STATE_EXPANDED
-          else -> STATE_HIDDEN
-        }
-      }
-
-      else -> STATE_HIDDEN
-    }
-
+  /**
+   * Get the SizeInfo data by state.
+   */
   fun getSizeInfoForState(state: Int): SizeInfo? =
     when (sizes.size) {
       1 -> {
@@ -179,7 +199,7 @@ class TrueSheetBehavior : BottomSheetBehavior<ViewGroup>() {
           STATE_COLLAPSED -> SizeInfo(0, Utils.toDIP(peekHeight))
 
           STATE_HALF_EXPANDED -> {
-            val height = halfExpandedRatio * maxSheetSize.y
+            val height = halfExpandedRatio * maxScreenHeight
             SizeInfo(1, Utils.toDIP(height.toInt()))
           }
 
@@ -192,9 +212,19 @@ class TrueSheetBehavior : BottomSheetBehavior<ViewGroup>() {
       else -> null
     }
 
-  fun getSizeInfoForIndex(index: Int) = getSizeInfoForState(getStateForIndex(index)) ?: SizeInfo(0, 0f)
+  /**
+   * Get SizeInfo data for given size index.
+   */
+  fun getSizeInfoForIndex(index: Int) = getSizeInfoForState(getStateForSizeIndex(index)) ?: SizeInfo(0, 0f)
 
+  /**
+   * Set the state based on the given size index.
+   */
   fun setStateForSizeIndex(index: Int) {
-    state = getStateForIndex(index)
+    state = getStateForSizeIndex(index)
+  }
+
+  companion object {
+    const val TAG = "TrueSheetView"
   }
 }

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

@@ -0,0 +1,84 @@
+package com.lodev09.truesheet
+
+import android.graphics.Color
+import android.view.ViewGroup
+import android.view.WindowManager
+import android.widget.LinearLayout
+import androidx.coordinatorlayout.widget.CoordinatorLayout
+import com.facebook.react.uimanager.ThemedReactContext
+import com.google.android.material.bottomsheet.BottomSheetDialog
+import com.lodev09.truesheet.core.KeyboardManager
+import com.lodev09.truesheet.core.RootViewGroup
+import com.lodev09.truesheet.core.Utils
+
+class TrueSheetDialog(
+  private val reactContext: ThemedReactContext,
+  private val behavior: TrueSheetBehavior,
+  private val rootViewGroup: RootViewGroup
+) : BottomSheetDialog(reactContext) {
+
+  private var keyboardManager = KeyboardManager(reactContext)
+
+  var sheetView: ViewGroup
+
+  init {
+    LinearLayout(reactContext).apply {
+      addView(rootViewGroup)
+      setContentView(this)
+
+      sheetView = parent as ViewGroup
+
+      // Set to transparent background to support corner radius
+      sheetView.setBackgroundColor(Color.TRANSPARENT)
+
+      // Assign our main BottomSheetBehavior
+      val sheetViewParams = sheetView.layoutParams as CoordinatorLayout.LayoutParams
+      sheetViewParams.behavior = behavior
+    }
+
+    // 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
+      )
+    }
+  }
+
+  fun show(sizeIndex: Int) {
+    if (isShowing) {
+      behavior.setStateForSizeIndex(sizeIndex)
+    } else {
+      behavior.configure()
+      behavior.setStateForSizeIndex(sizeIndex)
+
+      this.show()
+    }
+  }
+
+  /**
+   * Handle keyboard state changes and adjust maxScreenHeight (sheet max height) accordingly.
+   * Also update footer's Y position.
+   */
+  fun registerKeyboardManager() {
+    keyboardManager.registerKeyboardListener(object : KeyboardManager.OnKeyboardListener {
+      override fun onKeyboardStateChange(isVisible: Boolean) {
+        behavior.maxScreenHeight = Utils.activityView(reactContext)?.height ?: 0
+        behavior.footerView?.apply {
+          y = (behavior.maxScreenHeight - (sheetView.top ?: 0) - height).toFloat()
+        }
+      }
+    })
+  }
+
+  /**
+   * Remove keyboard listener.
+   */
+  fun unregisterKeyboardManager() {
+    keyboardManager.unregisterKeyboardListener()
+  }
+
+  companion object {
+    const val TAG = "TrueSheetView"
+  }
+}

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

@@ -1,26 +1,20 @@
 package com.lodev09.truesheet
 
 import android.content.Context
-import android.graphics.Color
 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.SizeChangeEvent
-import com.lodev09.truesheet.core.TrueSheetBehavior
-import com.lodev09.truesheet.core.Utils
 
 class TrueSheetView(context: Context) :
   ViewGroup(context),
@@ -33,22 +27,44 @@ class TrueSheetView(context: Context) :
   private val surfaceId: Int
     get() = UIManagerHelper.getSurfaceId(this)
 
+  /**
+   * Current activeIndex.
+   */
   private var activeIndex: Int = 0
 
+  /**
+   * Promise callback to be invoked after `present` is called.
+   */
   private var presentPromise: (() -> Unit)? = null
+
+  /**
+   * Promise callback to be invoked after `dismiss` is called.
+   */
   private var dismissPromise: (() -> Unit)? = null
 
-  private val sheetDialog: BottomSheetDialog
+  /**
+   * The main BottomSheetDialog instance.
+   */
+  private val sheetDialog: TrueSheetDialog
+
+  /**
+   * The custom BottomSheetDialogBehavior instance.
+   */
   private val sheetBehavior: TrueSheetBehavior
-  private val sheetView: ViewGroup
 
-  // React root view placeholder
+  /**
+   * React root view placeholder.
+   */
   private val sheetRootView: RootViewGroup
 
-  // 1st child of the container view
+  /**
+   * 1st child of the container view.
+   */
   private var contentView: ViewGroup? = null
 
-  // 2nd child of the container view
+  /**
+   * 2nd child of the container view.
+   */
   private var footerView: ViewGroup? = null
 
   init {
@@ -58,73 +74,78 @@ class TrueSheetView(context: Context) :
     sheetRootView = RootViewGroup(context)
     sheetRootView.eventDispatcher = eventDispatcher
 
-    sheetDialog = BottomSheetDialog(context)
-    sheetBehavior = TrueSheetBehavior()
-
-    // Configure the sheet layout view
-    LinearLayout(context).apply {
-      addView(sheetRootView)
-      sheetDialog.setContentView(this)
-
-      sheetView = parent as ViewGroup
-      sheetView.setBackgroundColor(Color.TRANSPARENT)
-
-      // Assign our main BottomSheetBehavior
-      val sheetViewParams = sheetView.layoutParams as CoordinatorLayout.LayoutParams
-      sheetViewParams.behavior = sheetBehavior
-    }
+    sheetBehavior = TrueSheetBehavior(reactContext)
+    sheetDialog = TrueSheetDialog(reactContext, sheetBehavior, sheetRootView)
 
     // Configure Sheet Dialog
     sheetDialog.apply {
+      // Setup listener when the dialog has been presented.
       setOnShowListener {
+        registerKeyboardManager()
+
         // Initialize footer y
-        UiThreadUtil.runOnUiThread {
-          footerView?.let {
-            it.y = (sheetView.height - sheetView.top - it.height).toFloat()
+        footerView?.apply {
+          UiThreadUtil.runOnUiThread {
+            y = (sheetBehavior.maxScreenHeight - sheetView.top - height).toFloat()
           }
         }
 
-        presentPromise?.invoke()
-        presentPromise = null
+        presentPromise?.let { promise ->
+          promise()
+          presentPromise = null
+        }
 
         // dispatch onPresent event
         eventDispatcher?.dispatchEvent(PresentEvent(surfaceId, id, sheetBehavior.getSizeInfoForIndex(activeIndex)))
       }
 
+      // Setup listener when the dialog has been dismissed.
       setOnDismissListener {
-        dismissPromise?.invoke()
-        dismissPromise = null
+        unregisterKeyboardManager()
+        dismissPromise?.let { promise ->
+          promise()
+          dismissPromise = null
+        }
 
         // dispatch onDismiss event
         eventDispatcher?.dispatchEvent(DismissEvent(surfaceId, id))
       }
     }
 
-    // Configure Sheet events
+    // Configure sheet behavior events
     sheetBehavior.apply {
-
-      // Set our default max height
-      maxSheetSize = Utils.maxSize(context)
-
       addBottomSheetCallback(
         object : BottomSheetBehavior.BottomSheetCallback() {
           override fun onSlide(sheetView: View, slideOffset: Float) {
             footerView?.let {
-              it.y = (sheetView.height - sheetView.top - it.height).toFloat()
+              val y = (maxScreenHeight - sheetView.top - it.height).toFloat()
+              if (slideOffset >= 0) {
+                it.y = y
+              } else {
+                it.y = y - it.height * slideOffset
+              }
             }
           }
 
           override fun onStateChanged(view: View, newState: Int) {
-            val sizeInfo = getSizeInfoForState(newState)
-            if (sizeInfo != null && sizeInfo.index != activeIndex) {
-              activeIndex = sizeInfo.index
-
-              // dispatch onSizeChange event
-              eventDispatcher?.dispatchEvent(SizeChangeEvent(surfaceId, id, sizeInfo))
-            }
-
-            if (newState == BottomSheetBehavior.STATE_HIDDEN) {
-              sheetDialog.dismiss()
+            when (newState) {
+              BottomSheetBehavior.STATE_HIDDEN -> sheetDialog.dismiss()
+
+              else -> {
+                val sizeInfo = getSizeInfoForState(newState)
+                if (sizeInfo != null && sizeInfo.index != activeIndex) {
+                  // Invoke promise when sheet resized programmatically
+                  presentPromise?.let { promise ->
+                    promise()
+                    presentPromise = null
+                  }
+
+                  activeIndex = sizeInfo.index
+
+                  // dispatch onSizeChange event
+                  eventDispatcher?.dispatchEvent(SizeChangeEvent(surfaceId, id, sizeInfo))
+                }
+              }
             }
           }
         }
@@ -225,21 +246,21 @@ class TrueSheetView(context: Context) :
     sheetBehavior.configure()
   }
 
-  fun present(index: Int, promiseCallback: () -> Unit) {
-    if (sheetDialog.isShowing) {
-      sheetBehavior.setStateForSizeIndex(index)
-      promiseCallback()
-    } else {
-      sheetBehavior.configure()
-
-      activeIndex = index
-      sheetBehavior.setStateForSizeIndex(index)
-
-      presentPromise = promiseCallback
-      sheetDialog.show()
+  /**
+   * Present the sheet at given size index.
+   */
+  fun present(sizeIndex: Int, promiseCallback: () -> Unit) {
+    if (!sheetDialog.isShowing) {
+      activeIndex = sizeIndex
     }
+
+    presentPromise = promiseCallback
+    sheetDialog.show(sizeIndex)
   }
 
+  /**
+   * Dismisses the sheet.
+   */
   fun dismiss(promiseCallback: () -> Unit) {
     dismissPromise = promiseCallback
     sheetDialog.dismiss()

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

@@ -3,6 +3,7 @@ package com.lodev09.truesheet.core
 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) {

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

@@ -0,0 +1,53 @@
+package com.lodev09.truesheet.core
+
+import android.content.Context
+import android.view.View
+import android.view.ViewTreeObserver.OnGlobalLayoutListener
+import android.view.inputmethod.InputMethodManager
+import com.facebook.react.bridge.ReactContext
+
+class KeyboardManager(reactContext: ReactContext) {
+  interface OnKeyboardListener {
+    fun onKeyboardStateChange(isVisible: Boolean)
+  }
+
+  private var screenView: View? = Utils.activityView(reactContext)
+  private var onGlobalLayoutListener: OnGlobalLayoutListener? = null
+  private var isKeyboardVisible = false
+
+  fun registerKeyboardListener(listener: OnKeyboardListener?) {
+    screenView?.apply {
+      unregisterKeyboardListener()
+
+      onGlobalLayoutListener = object : OnGlobalLayoutListener {
+        private var previousHeight = 0
+
+        override fun onGlobalLayout() {
+          val heightDiff = rootView.height - height
+          if (heightDiff > Utils.toPixel(200.0)) {
+            // Will ask InputMethodManager.isAcceptingText() to detect if keyboard appeared or not.
+            val inputManager = context.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
+            if (height != previousHeight && inputManager.isAcceptingText()) {
+              listener?.onKeyboardStateChange(true)
+
+              previousHeight = height
+              isKeyboardVisible = true
+            }
+          } else if (isKeyboardVisible) {
+            listener?.onKeyboardStateChange(false)
+            previousHeight = 0
+            isKeyboardVisible = false
+          }
+        }
+      }
+
+      getViewTreeObserver().addOnGlobalLayoutListener(onGlobalLayoutListener)
+    }
+  }
+
+  fun unregisterKeyboardListener() {
+    onGlobalLayoutListener?.let {
+      screenView?.getViewTreeObserver()?.removeOnGlobalLayoutListener(onGlobalLayoutListener)
+    }
+  }
+}

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

@@ -26,7 +26,7 @@ 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.
  */
-internal class RootViewGroup(context: Context?) :
+class RootViewGroup(context: Context?) :
   ReactViewGroup(context),
   RootView {
   private var hasAdjustedSize = false