react-native-screens 3.35.0-rc.1 → 4.0.0-beta.1

package/README.md

@@ -188,7 +188,7 @@ To take advantage of the native stack navigator primitive for React Navigation t
 
 ## `FullWindowOverlay`
 
-Native `iOS` component for rendering views straight under the `Window`. Based on `RCTPerfMonitor`. You should treat it as a wrapper, providing full-screen, transparent view which receives no props and should ideally render one child `View`, being the root of its view hierarchy. For the example usage, see https://github.com/software-mansion/react-native-screens/blob/main/TestsExample/src/Test1096.tsx
+Native `iOS` component for rendering views straight under the `Window`. Based on `RCTPerfMonitor`. You should treat it as a wrapper, providing full-screen, transparent view which receives no props and should ideally render one child `View`, being the root of its view hierarchy. For the example usage, see https://github.com/software-mansion/react-native-screens/blob/main/apps/src/tests/Test1096.tsx
 
 ## Interop with [react-native-navigation](https://github.com/wix/react-native-navigation)
 

package/android/build.gradle

@@ -9,7 +9,11 @@ buildscript {
         rnsDefaultKotlinVersion = '1.8.0'
     }
     ext.safeExtGet = {prop, fallback ->
-        rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+        def props = (prop instanceof String) ? [prop] : prop
+        def result = props.find { key ->
+            return rootProject.ext.has(key)
+        }
+        return result ? rootProject.ext.get(result) : fallback
     }
     repositories {
         google()
@@ -77,8 +81,8 @@ android {
     }
 
     defaultConfig {
-        minSdkVersion safeExtGet('minSdkVersion', rnsDefaultMinSdkVersion)
-        targetSdkVersion safeExtGet('targetSdkVersion', rnsDefaultTargetSdkVersion)
+        minSdkVersion safeExtGet(['minSdkVersion', 'minSdk'], rnsDefaultMinSdkVersion)
+        targetSdkVersion safeExtGet(['targetSdkVersion', 'targetSdk'], rnsDefaultTargetSdkVersion)
         versionCode 1
         versionName "1.0"
         buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", IS_NEW_ARCHITECTURE_ENABLED.toString()
@@ -136,7 +140,7 @@ android {
             }
         }
         res {
-            if (safeExtGet('compileSdkVersion', rnsDefaultCompileSdkVersion) >= 33) {
+            if (safeExtGet(['compileSdkVersion', 'compileSdk'], rnsDefaultCompileSdkVersion) >= 33) {
                 srcDirs = ["${androidResDir}/base", "${androidResDir}/v33"]
             } else {
                 srcDirs = ["${androidResDir}/base"]
@@ -148,10 +152,26 @@ android {
 repositories {
     maven {
         // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
-        // Matches the RN Hello World template
+
+        // First look for the standard location of react-native, as in RN Hello World template
         // https://github.com/facebook/react-native/blob/1e8f3b11027fe0a7514b4fc97d0798d3c64bc895/local-cli/templates/HelloWorld/android/build.gradle#L21
-        url "$projectDir/../node_modules/react-native/android"
+        // TODO(kkafar): Note, that in latest template app https://github.com/react-native-community/template/blob/0f4745b7a9d84232aeedec2def8d75ab9b050d11/template/android/build.gradle
+        // this is not specified at all.
+        File standardRnAndroidDirLocation = file("$rootDir/../node_modules/react-native/android")
+        if (standardRnAndroidDirLocation.exists()) {
+            url standardRnAndroidDirLocation
+        } else {
+            // We're in non standard setup - try to use node resolver to locate the react-native package.
+            File reactNativePackage = file(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim())
+            def rnAndroidDirLocation = "$reactNativePackage.parentFile/android"
+            if (reactNativePackage.exists()) {
+                url rnAndroidDirLocation
+            } else {
+                println "[RNScreens] Failed to resolve react-native directory. Attempted locations: ${standardRnAndroidDirLocation}, ${rnAndroidDirLocation}"
+            }
+        }
     }
+
     mavenCentral()
     mavenLocal()
     google()
@@ -159,8 +179,8 @@ repositories {
 
 dependencies {
     implementation 'com.facebook.react:react-native:+'
-    implementation 'androidx.appcompat:appcompat:1.4.2'
-    implementation 'androidx.fragment:fragment:1.3.6'
+    implementation 'androidx.appcompat:appcompat:1.6.1'
+    implementation 'androidx.fragment:fragment-ktx:1.6.1'
     implementation 'androidx.coordinatorlayout:coordinatorlayout:1.2.0'
     implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0'
     implementation 'com.google.android.material:material:1.6.1'

package/android/src/fabric/java/com/swmansion/rnscreens/FabricEnabledViewGroup.kt

@@ -24,7 +24,7 @@ abstract class FabricEnabledViewGroup(
     protected fun updateScreenSizeFabric(
         width: Int,
         height: Int,
-        headerHeight: Double,
+        headerHeight: Int,
     ) {
         updateState(width, height, headerHeight)
     }
@@ -33,10 +33,11 @@ abstract class FabricEnabledViewGroup(
     fun updateState(
         width: Int,
         height: Int,
-        headerHeight: Double,
+        headerHeight: Int,
     ) {
         val realWidth: Float = PixelUtil.toDIPFromPixel(width.toFloat())
         val realHeight: Float = PixelUtil.toDIPFromPixel(height.toFloat())
+        val realHeaderHeight: Float = PixelUtil.toDIPFromPixel(headerHeight.toFloat())
 
         // Check incoming state values. If they're already the correct value, return early to prevent
         // infinite UpdateState/SetState loop.
@@ -54,7 +55,7 @@ abstract class FabricEnabledViewGroup(
                 putDouble("frameWidth", realWidth.toDouble())
                 putDouble("frameHeight", realHeight.toDouble())
                 putDouble("contentOffsetX", 0.0)
-                putDouble("contentOffsetY", headerHeight)
+                putDouble("contentOffsetY", realHeaderHeight.toDouble())
             }
         mStateWrapper?.updateState(map)
     }

package/android/src/main/java/com/swmansion/rnscreens/CustomToolbar.kt

@@ -2,11 +2,50 @@ package com.swmansion.rnscreens
 
 import android.annotation.SuppressLint
 import android.content.Context
+import android.os.Build
 import androidx.appcompat.widget.Toolbar
+import com.facebook.react.modules.core.ChoreographerCompat
+import com.facebook.react.modules.core.ReactChoreographer
 
 // This class is used to store config closer to search bar
 @SuppressLint("ViewConstructor") // Only we construct this view, it is never inflated.
 open class CustomToolbar(
     context: Context,
     val config: ScreenStackHeaderConfig,
-) : Toolbar(context)
+) : Toolbar(context) {
+    private var isLayoutEnqueued = false
+    private val layoutCallback: ChoreographerCompat.FrameCallback =
+        object : ChoreographerCompat.FrameCallback() {
+            override fun doFrame(frameTimeNanos: Long) {
+                isLayoutEnqueued = false
+                measure(
+                    MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+                    MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY),
+                )
+                layout(left, top, right, bottom)
+            }
+        }
+
+    override fun requestLayout() {
+        super.requestLayout()
+        if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.Q) {
+            // Below Android API 29, layout is not being requested when subviews are being added to the layout,
+            // leading to having their subviews in position 0,0 of the toolbar (as Android don't calculate
+            // the position of each subview, even if Yoga has correctly set their width and height).
+            // This is mostly the issue, when windowSoftInputMode is set to adjustPan in AndroidManifest.
+            // Thus, we're manually calling the layout **after** the current layout.
+            @Suppress("SENSELESS_COMPARISON") // mLayoutCallback can be null here since this method can be called in init
+            if (!isLayoutEnqueued && layoutCallback != null) {
+                isLayoutEnqueued = true
+                // we use NATIVE_ANIMATED_MODULE choreographer queue because it allows us to catch the current
+                // looper loop instead of enqueueing the update in the next loop causing a one frame delay.
+                ReactChoreographer
+                    .getInstance()
+                    .postFrameCallback(
+                        ReactChoreographer.CallbackType.NATIVE_ANIMATED_MODULE,
+                        layoutCallback,
+                    )
+            }
+        }
+    }
+}

package/android/src/main/java/com/swmansion/rnscreens/InsetsObserverProxy.kt

@@ -0,0 +1,67 @@
+package com.swmansion.rnscreens
+
+import android.view.View
+import androidx.core.view.OnApplyWindowInsetsListener
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowInsetsCompat
+import java.lang.ref.WeakReference
+
+object InsetsObserverProxy : OnApplyWindowInsetsListener {
+    private val listeners: ArrayList<OnApplyWindowInsetsListener> = arrayListOf()
+    private var eventSourceView: WeakReference<View> = WeakReference(null)
+
+    // Please note semantics of this property. This is not `isRegistered`, because somebody, could unregister
+    // us, without our knowledge, e.g. reanimated or different 3rd party library. This holds only information
+    // whether this observer has been initially registered.
+    private var hasBeenRegistered: Boolean = false
+
+    private var shouldForwardInsetsToView = true
+
+    override fun onApplyWindowInsets(
+        v: View,
+        insets: WindowInsetsCompat,
+    ): WindowInsetsCompat {
+        var rollingInsets =
+            if (shouldForwardInsetsToView) {
+                WindowInsetsCompat.toWindowInsetsCompat(
+                    v.onApplyWindowInsets(insets.toWindowInsets()),
+                    v,
+                )
+            } else {
+                insets
+            }
+
+        listeners.forEach {
+            rollingInsets = it.onApplyWindowInsets(v, insets)
+        }
+        return rollingInsets
+    }
+
+    fun addOnApplyWindowInsetsListener(listener: OnApplyWindowInsetsListener) {
+        listeners.add(listener)
+    }
+
+    fun removeOnApplyWindowInsetsListener(listener: OnApplyWindowInsetsListener) {
+        listeners.remove(listener)
+    }
+
+    fun registerOnView(view: View) {
+        if (!hasBeenRegistered) {
+            ViewCompat.setOnApplyWindowInsetsListener(view, this)
+            eventSourceView = WeakReference(view)
+            hasBeenRegistered = true
+        } else if (getObservedView() != view) {
+            throw IllegalStateException(
+                "[RNScreens] Attempt to register InsetsObserverProxy on $view while it has been already registered on ${getObservedView()}",
+            )
+        }
+    }
+
+    fun unregister() {
+        eventSourceView.get()?.takeIf { hasBeenRegistered }?.let {
+            ViewCompat.setOnApplyWindowInsetsListener(it, null)
+        }
+    }
+
+    private fun getObservedView(): View? = eventSourceView.get()
+}

package/android/src/main/java/com/swmansion/rnscreens/RNScreensPackage.kt

@@ -37,6 +37,8 @@ class RNScreensPackage : TurboReactPackage() {
             ScreenStackHeaderConfigViewManager(),
             ScreenStackHeaderSubviewManager(),
             SearchBarManager(),
+            ScreenFooterManager(),
+            ScreenContentWrapperManager(),
         )
     }
 

package/android/src/main/java/com/swmansion/rnscreens/Screen.kt

@@ -5,27 +5,39 @@ import android.content.pm.ActivityInfo
 import android.graphics.Paint
 import android.os.Parcelable
 import android.util.SparseArray
-import android.util.TypedValue
 import android.view.View
 import android.view.ViewGroup
 import android.view.WindowManager
 import android.webkit.WebView
+import android.widget.ImageView
+import androidx.coordinatorlayout.widget.CoordinatorLayout
 import androidx.core.view.children
 import androidx.fragment.app.Fragment
+import androidx.swiperefreshlayout.widget.SwipeRefreshLayout
 import com.facebook.react.bridge.GuardedRunnable
 import com.facebook.react.bridge.ReactContext
-import com.facebook.react.uimanager.PixelUtil
 import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.uimanager.UIManagerModule
+import com.facebook.react.uimanager.events.EventDispatcher
+import com.facebook.react.views.scroll.ReactScrollView
+import com.google.android.material.bottomsheet.BottomSheetBehavior
 import com.swmansion.rnscreens.events.HeaderHeightChangeEvent
+import com.swmansion.rnscreens.events.SheetDetentChangedEvent
 
 @SuppressLint("ViewConstructor") // Only we construct this view, it is never inflated.
 class Screen(
-    context: ReactContext?,
-) : FabricEnabledViewGroup(context) {
+    val reactContext: ReactContext,
+) : FabricEnabledViewGroup(reactContext),
+    ScreenContentWrapper.OnLayoutCallback {
     val fragment: Fragment?
         get() = fragmentWrapper?.fragment
 
+    val sheetBehavior: BottomSheetBehavior<Screen>?
+        get() = (layoutParams as? CoordinatorLayout.LayoutParams)?.behavior as? BottomSheetBehavior<Screen>
+
+    val reactEventDispatcher: EventDispatcher?
+        get() = UIManagerHelper.getEventDispatcherForReactTag(reactContext, id)
+
     var fragmentWrapper: ScreenFragmentWrapper? = null
     var container: ScreenContainer? = null
     var activityState: ActivityState? = null
@@ -40,6 +52,33 @@ class Screen(
     var isStatusBarAnimated: Boolean? = null
     var isBeingRemoved = false
 
+    // Props for controlling modal presentation
+    var isSheetGrabberVisible: Boolean = false
+    var sheetCornerRadius: Float = 0F
+        set(value) {
+            field = value
+            (fragment as? ScreenStackFragment)?.onSheetCornerRadiusChange()
+        }
+    var sheetExpandsWhenScrolledToEdge: Boolean = true
+
+    // We want to make sure here that at least one value is present in this array all the time.
+    // TODO: Model this with custom data structure to guarantee that this invariant is not violated.
+    var sheetDetents = mutableListOf(1.0)
+    var sheetLargestUndimmedDetentIndex: Int = -1
+    var sheetInitialDetentIndex: Int = 0
+    var sheetClosesOnTouchOutside = true
+    var sheetElevation: Float = 24F
+
+    var footer: ScreenFooter? = null
+        set(value) {
+            if (value == null && field != null) {
+                sheetBehavior?.let { field!!.unregisterWithSheetBehavior(it) }
+            } else if (value != null) {
+                sheetBehavior?.let { value.registerWithSheetBehavior(it) }
+            }
+            field = value
+        }
+
     init {
         // we set layout params as WindowManager.LayoutParams to workaround the issue with TextInputs
         // not displaying modal menus (e.g., copy/paste or selection). The missing menus are due to the
@@ -54,6 +93,33 @@ class Screen(
         layoutParams = WindowManager.LayoutParams(WindowManager.LayoutParams.TYPE_APPLICATION)
     }
 
+    /**
+     * ScreenContentWrapper notifies us here on it's layout. It is essential for implementing
+     * `fitToContents` for formSheets, as this is first entry point where we can acquire
+     * height of our content.
+     */
+    override fun onLayoutCallback(
+        changed: Boolean,
+        left: Int,
+        top: Int,
+        right: Int,
+        bottom: Int,
+    ) {
+        val height = bottom - top
+
+        if (sheetDetents.count() == 1 && sheetDetents.first() == SHEET_FIT_TO_CONTENTS) {
+            sheetBehavior?.let {
+                if (it.maxHeight != height) {
+                    it.maxHeight = height
+                }
+            }
+        }
+    }
+
+    fun registerLayoutCallbackForWrapper(wrapper: ScreenContentWrapper) {
+        wrapper.delegate = this
+    }
+
     override fun dispatchSaveInstanceState(container: SparseArray<Parcelable>) {
         // do nothing, react native will keep the view hierarchy so no need to serialize/deserialize
         // view's states. The side effect of restoring is that TextInput components would trigger
@@ -75,16 +141,14 @@ class Screen(
             val width = r - l
             val height = b - t
 
-            val headerHeight = calculateHeaderHeight()
-            val totalHeight =
-                headerHeight.first + headerHeight.second // action bar height + status bar height
             if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
-                updateScreenSizeFabric(width, height, totalHeight)
+                updateScreenSizeFabric(width, height, t)
             } else {
                 updateScreenSizePaper(width, height)
             }
 
-            notifyHeaderHeightChange(totalHeight)
+            footer?.onParentLayout(changed, l, t, r, b, container!!.height)
+            notifyHeaderHeightChange(t)
         }
     }
 
@@ -92,7 +156,6 @@ class Screen(
         width: Int,
         height: Int,
     ) {
-        val reactContext = context as ReactContext
         reactContext.runOnNativeModulesQueueThread(
             object : GuardedRunnable(reactContext.exceptionHandler) {
                 override fun runGuarded() {
@@ -127,7 +190,14 @@ class Screen(
         )
     }
 
-    fun isTransparent(): Boolean = stackPresentation === StackPresentation.TRANSPARENT_MODAL
+    fun isTransparent(): Boolean =
+        when (stackPresentation) {
+            StackPresentation.TRANSPARENT_MODAL,
+            StackPresentation.FORM_SHEET,
+            -> true
+
+            else -> false
+        }
 
     private fun hasWebView(viewGroup: ViewGroup): Boolean {
         for (i in 0 until viewGroup.childCount) {
@@ -295,7 +365,7 @@ class Screen(
         parent?.let {
             for (i in 0 until it.childCount) {
                 val child = it.getChildAt(i)
-                if (child.javaClass.simpleName.equals("CircleImageView")) {
+                if (parent is SwipeRefreshLayout && child is ImageView) {
                     // SwipeRefreshLayout class which has CircleImageView as a child,
                     // does not handle `startViewTransition` properly.
                     // It has a custom `getChildDrawingOrder` method which returns
@@ -312,38 +382,22 @@ class Screen(
                     startTransitionRecursive(child.toolbar)
                 }
                 if (child is ViewGroup) {
+                    // The children are miscounted when there's a FlatList with
+                    // removeCLippedSubviews set to true (default).
+                    // We add a simple view for each item in the list to make it work as expected.
+                    // See https://github.com/software-mansion/react-native-screens/issues/2282
+                    if (it is ReactScrollView && it.removeClippedSubviews) {
+                        for (j in 0 until child.childCount) {
+                            child.addView(View(context))
+                        }
+                    }
                     startTransitionRecursive(child)
                 }
             }
         }
     }
 
-    private fun calculateHeaderHeight(): Pair<Double, Double> {
-        val actionBarTv = TypedValue()
-        val resolvedActionBarSize =
-            context.theme.resolveAttribute(android.R.attr.actionBarSize, actionBarTv, true)
-
-        // Check if it's possible to get an attribute from theme context and assign a value from it.
-        // Otherwise, the default value will be returned.
-        val actionBarHeight =
-            TypedValue
-                .complexToDimensionPixelSize(actionBarTv.data, resources.displayMetrics)
-                .takeIf { resolvedActionBarSize && headerConfig?.isHeaderHidden != true && headerConfig?.isHeaderTranslucent != true }
-                ?.let { PixelUtil.toDIPFromPixel(it.toFloat()).toDouble() } ?: 0.0
-
-        val statusBarHeight =
-            context.resources
-                .getIdentifier("status_bar_height", "dimen", "android")
-                // Count only status bar when action bar is visible and status bar is not hidden
-                .takeIf { it > 0 && isStatusBarHidden != true && actionBarHeight > 0 }
-                ?.let { (context.resources::getDimensionPixelSize)(it) }
-                ?.let { PixelUtil.toDIPFromPixel(it.toFloat()).toDouble() }
-                ?: 0.0
-
-        return actionBarHeight to statusBarHeight
-    }
-
-    private fun notifyHeaderHeightChange(headerHeight: Double) {
+    private fun notifyHeaderHeightChange(headerHeight: Int) {
         val screenContext = context as ReactContext
         val surfaceId = UIManagerHelper.getSurfaceId(screenContext)
         UIManagerHelper
@@ -351,10 +405,26 @@ class Screen(
             ?.dispatchEvent(HeaderHeightChangeEvent(surfaceId, id, headerHeight))
     }
 
+    internal fun notifySheetDetentChange(
+        detentIndex: Int,
+        isStable: Boolean,
+    ) {
+        val surfaceId = UIManagerHelper.getSurfaceId(reactContext)
+        reactEventDispatcher?.dispatchEvent(
+            SheetDetentChangedEvent(
+                surfaceId,
+                id,
+                detentIndex,
+                isStable,
+            ),
+        )
+    }
+
     enum class StackPresentation {
         PUSH,
         MODAL,
         TRANSPARENT_MODAL,
+        FORM_SHEET,
     }
 
     enum class StackAnimation {
@@ -366,6 +436,8 @@ class Screen(
         SLIDE_FROM_LEFT,
         FADE_FROM_BOTTOM,
         IOS,
+        IOS_FROM_RIGHT,
+        IOS_FROM_LEFT,
     }
 
     enum class ReplaceAnimation {
@@ -390,4 +462,13 @@ class Screen(
         NAVIGATION_BAR_TRANSLUCENT,
         NAVIGATION_BAR_HIDDEN,
     }
+
+    companion object {
+        const val TAG = "Screen"
+
+        /**
+         * This value describes value in sheet detents array that will be treated as `fitToContents` option.
+         */
+        const val SHEET_FIT_TO_CONTENTS = -1.0
+    }
 }

package/android/src/main/java/com/swmansion/rnscreens/ScreenContentWrapper.kt

@@ -0,0 +1,38 @@
+package com.swmansion.rnscreens
+
+import android.annotation.SuppressLint
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.views.view.ReactViewGroup
+
+/**
+ * When we wrap children of the Screen component inside this component in JS code,
+ * we can later use it to get the enclosing frame size of our content as it is rendered by RN.
+ *
+ * This is useful when adapting form sheet height to its contents height.
+ */
+@SuppressLint("ViewConstructor")
+class ScreenContentWrapper(
+    reactContext: ReactContext,
+) : ReactViewGroup(reactContext) {
+    internal var delegate: OnLayoutCallback? = null
+
+    interface OnLayoutCallback {
+        fun onLayoutCallback(
+            changed: Boolean,
+            left: Int,
+            top: Int,
+            right: Int,
+            bottom: Int,
+        )
+    }
+
+    override fun onLayout(
+        changed: Boolean,
+        left: Int,
+        top: Int,
+        right: Int,
+        bottom: Int,
+    ) {
+        delegate?.onLayoutCallback(changed, left, top, right, bottom)
+    }
+}

package/android/src/main/java/com/swmansion/rnscreens/ScreenContentWrapperManager.kt

@@ -0,0 +1,25 @@
+package com.swmansion.rnscreens
+
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.viewmanagers.RNSScreenContentWrapperManagerDelegate
+import com.facebook.react.viewmanagers.RNSScreenContentWrapperManagerInterface
+
+@ReactModule(name = ScreenContentWrapperManager.REACT_CLASS)
+class ScreenContentWrapperManager :
+    ViewGroupManager<ScreenContentWrapper>(),
+    RNSScreenContentWrapperManagerInterface<ScreenContentWrapper> {
+    private val delegate: ViewManagerDelegate<ScreenContentWrapper> = RNSScreenContentWrapperManagerDelegate(this)
+
+    companion object {
+        const val REACT_CLASS = "RNSScreenContentWrapper"
+    }
+
+    override fun getName(): String = REACT_CLASS
+
+    override fun createViewInstance(reactContext: ThemedReactContext): ScreenContentWrapper = ScreenContentWrapper(reactContext)
+
+    override fun getDelegate(): ViewManagerDelegate<ScreenContentWrapper> = delegate
+}