wip: rough working state for android

okwasniewski · okwasniewski · commit 3b34081f34cb · 2025-03-25T15:46:54.000+01:00
diff --git a/apps/example/src/Screens/Article.tsx b/apps/example/src/Screens/Article.tsx
@@ -53,6 +53,7 @@ export function Article({
   console.log(Platform.OS, ' Rendering Article');
   return (
     <ScrollView
+      onLayout={({ nativeEvent: { layout } }) => console.log(layout)}
       ref={ref}
       style={{ backgroundColor: '#fff' }}
       contentContainerStyle={styles.content}
diff --git a/packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabView.kt b/packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabView.kt
@@ -12,6 +12,7 @@ import android.util.Log
 import android.util.Size
 import android.util.TypedValue
 import android.view.Choreographer
+import android.view.Gravity
 import android.view.HapticFeedbackConstants
 import android.view.MenuItem
 import android.view.View
@@ -72,16 +73,19 @@ class ReactBottomNavigationView(context: Context) : LinearLayout(context) {
 
     addView(
       layoutHolder, LayoutParams(
-        LayoutParams.MATCH_PARENT,
+        ViewGroup.LayoutParams.MATCH_PARENT,
         0,
-      ).apply { weight = 1f }
+      )
+        .apply { weight = 1f }
     )
     layoutHolder.isSaveEnabled = false
 
     addView(bottomNavigation, LayoutParams(
       LayoutParams.MATCH_PARENT,
       LayoutParams.WRAP_CONTENT
-    ))
+    ).apply {
+      gravity = Gravity.BOTTOM
+    })
     uiModeConfiguration = resources.configuration.uiMode
 
     post {
@@ -142,9 +146,11 @@ class ReactBottomNavigationView(context: Context) : LinearLayout(context) {
       return
     }
 
-    val container = createContainer()
-    container.addView(child, params)
-    layoutHolder.addView(container, index)
+//    val container = createContainer()
+//    container.addView(child, params)
+    child.visibility = GONE
+    child.isEnabled = false
+    layoutHolder.addView(child, index)
 
     val itemKey = items[index].key
     if (selectedItem == itemKey) {
@@ -153,18 +159,18 @@ class ReactBottomNavigationView(context: Context) : LinearLayout(context) {
     }
   }
 
-  private fun createContainer(): FrameLayout {
-    val container = FrameLayout(context).apply {
-      layoutParams = FrameLayout.LayoutParams(
-        FrameLayout.LayoutParams.MATCH_PARENT,
-        FrameLayout.LayoutParams.MATCH_PARENT
-      )
-      isSaveEnabled = false
-      visibility = GONE
-      isEnabled = false
-    }
-    return container
-  }
+//  private fun createContainer(): FrameLayout {
+//    val container = FrameLayout(context).apply {
+//      layoutParams = FrameLayout.LayoutParams(
+//        FrameLayout.LayoutParams.MATCH_PARENT,
+//        FrameLayout.LayoutParams.MATCH_PARENT
+//      )
+//      isSaveEnabled = false
+//      visibility = GONE
+//      isEnabled = false
+//    }
+//    return container
+//  }
 
   private fun setSelectedIndex(itemId: Int) {
     bottomNavigation.selectedItemId = itemId
diff --git a/packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabViewPackage.kt b/packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabViewPackage.kt
@@ -10,6 +10,7 @@ class RCTTabViewPackage : ReactPackage {
   override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
     val viewManagers: MutableList<ViewManager<*, *>> = ArrayList()
     viewManagers.add(RCTTabViewManager(reactContext))
+    viewManagers.add(RCTTabViewScreenManager(reactContext))
     return viewManagers
   }
 
diff --git a/packages/react-native-bottom-tabs/android/src/main/jni/RNCTabView.h b/packages/react-native-bottom-tabs/android/src/main/jni/RNCTabView.h
@@ -3,7 +3,7 @@
 #include <ReactCommon/JavaTurboModule.h>
 #include <ReactCommon/TurboModule.h>
 #include <jsi/jsi.h>
-#include <react/renderer/components/RNCTabView/RNCTabViewComponentDescriptor.h>
+#include <react/renderer/components/RNCTabView/RNCTabViewScreenComponentDescriptor.h>
 
 namespace facebook::react {
 JSI_EXPORT
diff --git a/packages/react-native-bottom-tabs/android/src/newarch/RCTTabViewManager.kt b/packages/react-native-bottom-tabs/android/src/newarch/RCTTabViewManager.kt
@@ -1,7 +1,9 @@
 package com.rcttabview
 
+import android.util.Log
 import android.view.View
-import android.view.ViewGroup
+import android.widget.FrameLayout
+import androidx.core.view.children
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.module.annotations.ReactModule
@@ -11,7 +13,6 @@ import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.ViewManagerDelegate
 import com.facebook.react.viewmanagers.RNCTabViewManagerDelegate
 import com.facebook.react.viewmanagers.RNCTabViewManagerInterface
-import com.rcttabview.events.OnNativeLayoutEvent
 import com.rcttabview.events.PageSelectedEvent
 import com.rcttabview.events.TabLongPressEvent
 
@@ -36,9 +37,21 @@ class RCTTabViewManager(context: ReactApplicationContext) :
       eventDispatcher?.dispatchEvent(TabLongPressEvent(viewTag = view.id, key))
     }
 
-    view.onNativeLayoutListener = { width, height ->
-      eventDispatcher?.dispatchEvent(OnNativeLayoutEvent(viewTag = view.id, width, height))
-    }
+//    view.onNativeLayoutListener = { width, height ->
+//      val childCount = tabViewImpl.getChildCount(view)
+//      for (i in 0 until childCount) {  // Use 'until' instead of '..' to exclude childCount
+//        val child = tabViewImpl.getChildAt(view, i)
+//
+//        // Safe cast for FrameLayout
+//        if (child is RCTTabViewScreen) {
+//          child.updateFrame(width, height)
+//
+//          Log.w("TAB_VIEW", "CHILD: ${child}")
+//        }
+//      }
+//
+////      eventDispatcher?.dispatchEvent(OnNativeLayoutEvent(viewTag = view.id, width, height))
+//    }
     return view
 
   }
@@ -72,9 +85,9 @@ class RCTTabViewManager(context: ReactApplicationContext) :
     tabViewImpl.removeViewAt(parent, index)
   }
 
-  override fun needsCustomLayoutForChildren(): Boolean {
-    return tabViewImpl.needsCustomLayoutForChildren()
-  }
+//  override fun needsCustomLayoutForChildren(): Boolean {
+//    return tabViewImpl.needsCustomLayoutForChildren()
+//  }
 
   override fun setItems(view: ReactBottomNavigationView?, value: ReadableArray?) {
     if (view != null && value != null)
diff --git a/packages/react-native-bottom-tabs/android/src/newarch/RCTTabViewScreenManager.kt b/packages/react-native-bottom-tabs/android/src/newarch/RCTTabViewScreenManager.kt
@@ -0,0 +1,98 @@
+package com.rcttabview
+
+import android.content.Context
+import android.os.Build
+import android.util.Log
+import android.view.View
+import android.view.WindowInsets
+import android.view.WindowManager
+import android.widget.FrameLayout
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowInsetsCompat
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReactApplicationContext
+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
+import com.facebook.react.viewmanagers.RNCTabViewScreenManagerDelegate
+import com.facebook.react.viewmanagers.RNCTabViewScreenManagerInterface
+import com.facebook.react.views.view.ReactViewGroup
+
+class RCTTabViewScreen(context: Context): ReactViewGroup(context) {
+  private var stateWrapper: StateWrapper? = null
+
+  public fun setStateWrapper(stateWrapper: StateWrapper?) {
+    this.stateWrapper = stateWrapper
+  }
+
+  init {
+    getSystemInsets(this) { left, top, right, bottom ->
+      Log.w("TAB_VIEW", "${left} ${top} ${right} ${bottom}")
+
+      stateWrapper?.updateState(Arguments.createMap().apply {
+        putDouble("width", Utils.convertPixelsToDp(context, width))
+        putDouble("height", Utils.convertPixelsToDp(context, height - bottom))
+      })
+    }
+  }
+
+  fun getSystemInsets(view: View, callback: (left: Int, top: Int, right: Int, bottom: Int) -> Unit) {
+    ViewCompat.setOnApplyWindowInsetsListener(view) { v, insets ->
+      val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
+      callback(
+        systemBars.left,   // Left inset (for left-aligned Navigation Rail)
+        systemBars.top,    // Top inset
+        systemBars.right,  // Right inset (for right-aligned Navigation Rail)
+        systemBars.bottom  // Bottom inset (for bottom navigation)
+      )
+      insets
+    }
+    // Ensure we request insets
+    if (view.isAttachedToWindow) {
+      ViewCompat.requestApplyInsets(view)
+    } else {
+      view.addOnAttachStateChangeListener(object : View.OnAttachStateChangeListener {
+        override fun onViewAttachedToWindow(v: View) {
+          ViewCompat.requestApplyInsets(v)
+          v.removeOnAttachStateChangeListener(this)
+        }
+        override fun onViewDetachedFromWindow(v: View) = Unit
+      })
+    }
+  }
+}
+
+
+@ReactModule(name = "RNCTabViewScreen")
+class RCTTabViewScreenManager(context: ReactApplicationContext) :
+  ViewGroupManager<RCTTabViewScreen>(),
+  RNCTabViewScreenManagerInterface<RCTTabViewScreen> {
+
+  private val delegate: RNCTabViewScreenManagerDelegate<RCTTabViewScreen, RCTTabViewScreenManager> =
+    RNCTabViewScreenManagerDelegate(this)
+
+
+  override fun createViewInstance(context: ThemedReactContext): RCTTabViewScreen {
+    return RCTTabViewScreen(context);
+  }
+
+  override fun updateState(
+    view: RCTTabViewScreen,
+    props: ReactStylesDiffMap?,
+    stateWrapper: StateWrapper?
+  ): Any? {
+    view.setStateWrapper(stateWrapper)
+    return super.updateState(view, props, stateWrapper)
+  }
+
+  override fun getDelegate(): ViewManagerDelegate<RCTTabViewScreen> {
+    return delegate
+  }
+
+  override fun getName(): String {
+    return "RNCTabViewScreen"
+  }
+}
diff --git a/packages/react-native-bottom-tabs/common/cpp/react/renderer/components/RNCTabView/RNCTabViewScreenComponentDescriptor.h b/packages/react-native-bottom-tabs/common/cpp/react/renderer/components/RNCTabView/RNCTabViewScreenComponentDescriptor.h
@@ -13,17 +13,17 @@ class RNCTabViewScreenComponentDescriptor final : public ConcreteComponentDescri
   RNCTabViewScreenComponentDescriptor(const ComponentDescriptorParameters &parameters)
   : ConcreteComponentDescriptor(parameters) {}
 
-  
+
   /**
    Retrieve shadow node's state and update it's layout size accordingly.
    This is needed because we need to accomodate for bottom bar / sidebar size.
    */
   void adopt(ShadowNode &shadowNode) const override {
     auto& layoutableShadowNode = static_cast<RNCTabViewScreenShadowNode&>(shadowNode);
     auto& stateData = layoutableShadowNode.getStateData();
-    
+
     layoutableShadowNode.setSize(stateData.frameSize);
-    
+
     ConcreteComponentDescriptor::adopt(shadowNode);
   }
 };
diff --git a/packages/react-native-bottom-tabs/common/cpp/react/renderer/components/RNCTabView/RNCTabViewScreenState.h b/packages/react-native-bottom-tabs/common/cpp/react/renderer/components/RNCTabView/RNCTabViewScreenState.h
@@ -4,8 +4,6 @@
 #include <react/renderer/graphics/Size.h>
 #ifdef ANDROID
 #include <folly/dynamic.h>
-#include <react/renderer/mapbuffer/MapBuffer.h>
-#include <react/renderer/mapbuffer/MapBufferBuilder.h>
 #endif
 
 namespace facebook::react {
@@ -17,6 +15,14 @@ class RNCTabViewScreenState
   RNCTabViewScreenState(Size frameSize): frameSize(frameSize) {};
 
   Size frameSize;
+
+#ifdef ANDROID
+  RNCTabViewScreenState(RNCTabViewScreenState const &previousState, folly::dynamic data)
+    : frameSize((Float)data["width"].getDouble(), (Float)data["height"].getDouble()) {};
+  folly::dynamic getDynamic() const {
+    return {};
+  };
+#endif
 };
 
 }
diff --git a/packages/react-native-bottom-tabs/react-native.config.js b/packages/react-native-bottom-tabs/react-native.config.js
@@ -3,7 +3,7 @@ module.exports = {
     platforms: {
       android: {
         libraryName: 'RNCTabView',
-        componentDescriptors: ['RNCTabViewComponentDescriptor'],
+        componentDescriptors: ['RNCTabViewScreenComponentDescriptor'],
         cmakeListsPath: 'src/main/jni/CMakeLists.txt',
       },
     },

Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,7 @@ class RCTTabViewPackage : ReactPackage {`
`10`	`10`	`override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<, >> {`
`11`	`11`	`val viewManagers: MutableList<ViewManager<, >> = ArrayList()`
`12`	`12`	`viewManagers.add(RCTTabViewManager(reactContext))`
	`13`	`+ viewManagers.add(RCTTabViewScreenManager(reactContext))`
`13`	`14`	`return viewManagers`
`14`	`15`	`}`
`15`	`16`