fix: new arch measurements

Author: okwasniewski

.github/workflows/ReactNativeSlider-CI.yml

@@ -125,6 +125,10 @@ jobs:
           path: example/node_modules
           key: ${{ hashFiles('./example/package-lock.json') }}-${{ hashFiles('./package/package-lock.json') }}
 
+      - name: Install xcbeautify for better logs 
+        run: |
+          brew install xcbeautify
+
       - name: Install required dependencies on cache miss (npm)
         if: steps.cache-npm.outputs.cache-hit != 'true'
         run: |
@@ -157,7 +161,7 @@ jobs:
           device=$(xcrun simctl list devices "${device_name}" available | grep "${device_name} (")
           re='\(([-0-9A-Fa-f]+)\)'
           [[ $device =~ $re ]] || exit 1
-          xcodebuild -workspace example.xcworkspace -scheme example -destination "platform=iOS Simulator,id=${BASH_REMATCH[1]}" CODE_SIGNING_ALLOWED=NO COMPILER_INDEX_STORE_ENABLE=NO build
+          set -o pipefail && xcodebuild -workspace example.xcworkspace -scheme example -destination "platform=iOS Simulator,id=${BASH_REMATCH[1]}" CODE_SIGNING_ALLOWED=NO COMPILER_INDEX_STORE_ENABLE=NO build | xcbeautify --renderer github-actions
         working-directory: example/ios
 
 
@@ -196,6 +200,10 @@ jobs:
         run: |
           cd example/ios && RCT_NEW_ARCH_ENABLED=1 pod install
 
+      - name: Install xcbeautify for better logs 
+        run: |
+          brew install xcbeautify
+
       - name: Reinstall Pods only if using cached ones
         if: steps.cache-pods.outputs.cache-hit == 'true'
         run: cd example/ios && RCT_NEW_ARCH_ENABLED=1 pod install
@@ -209,7 +217,7 @@ jobs:
           device=$(xcrun simctl list devices "${device_name}" available | grep "${device_name} (")
           re='\(([-0-9A-Fa-f]+)\)'
           [[ $device =~ $re ]] || exit 1
-          xcodebuild -workspace example.xcworkspace -scheme example -destination "platform=iOS Simulator,id=${BASH_REMATCH[1]}" CODE_SIGNING_ALLOWED=NO COMPILER_INDEX_STORE_ENABLE=NO build
+          set -o pipefail && xcodebuild -workspace example.xcworkspace -scheme example -destination "platform=iOS Simulator,id=${BASH_REMATCH[1]}" CODE_SIGNING_ALLOWED=NO COMPILER_INDEX_STORE_ENABLE=NO build | xcbeautify --renderer github-actions
         working-directory: example/ios
 
 

example/ios/Podfile.lock

@@ -932,15 +932,40 @@ PODS:
   - React-jsinspector (0.72.6)
   - React-logger (0.72.6):
     - glog
-  - react-native-pager-view (6.2.2):
-    - RCT-Folly
+  - react-native-pager-view (6.3.0):
+    - hermes-engine
+    - RCT-Folly (= 2021.07.22.00)
     - RCTRequired
     - RCTTypeSafety
     - React-Codegen
     - React-Core
+    - React-debug
+    - React-Fabric
+    - React-graphics
+    - React-NativeModulesApple
     - React-RCTFabric
+    - React-utils
+    - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
+    - Yoga
   - react-native-slider (4.5.0):
+    - hermes-engine
+    - RCT-Folly (= 2021.07.22.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Codegen
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-graphics
+    - react-native-slider/common (= 4.5.0)
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-utils
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
+  - react-native-slider/common (4.5.0):
     - hermes-engine
     - RCT-Folly (= 2021.07.22.00)
     - RCTRequired
@@ -1302,13 +1327,13 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 3bf18ff7cb03cd8dfdce08fbbc0d15058c1d71ae
   React-jsinspector: 194e32c6aab382d88713ad3dd0025c5f5c4ee072
   React-logger: cebf22b6cf43434e471dc561e5911b40ac01d289
-  react-native-pager-view: 0ad4b83218270c9bbaa8733090554da78075aa7d
-  react-native-slider: 6b93a4a8d903b8e20ca9875245872c3a19b3f892
+  react-native-pager-view: 7e59cad76754a76ab5a67e821efa52679c8485a6
+  react-native-slider: de2f2e1538a353d183bc8caceddd7e9456351ed6
   React-NativeModulesApple: 02e35e9a51e10c6422f04f5e4076a7c02243fff2
   React-perflogger: e3596db7e753f51766bceadc061936ef1472edc3
   React-RCTActionSheet: 17ab132c748b4471012abbcdcf5befe860660485
   React-RCTAnimation: c8bbaab62be5817d2a31c36d5f2571e3f7dcf099
-  React-RCTAppDelegate: 908a42129440b88e030d236cc75cd289d855e9b0
+  React-RCTAppDelegate: a2b51c18191ef6e3f15fd83f2ccbcc8381344fbb
   React-RCTBlob: 1bcf3a0341eb8d6950009b1ddb8aefaf46996b8c
   React-RCTFabric: 2d72175df6e0e230a13ec2a7eef184ac0a122fd3
   React-RCTImage: 670a3486b532292649b1aef3ffddd0b495a5cee4
@@ -1328,4 +1353,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: fc294bda6eb4bdf564e8b01f128fbe9addb961d2
 
-COCOAPODS: 1.14.2
+COCOAPODS: 1.15.2

package/android/build.gradle

@@ -55,7 +55,7 @@ android {
   sourceSets {
     main {
       if (isNewArchitectureEnabled()) {
-          java.srcDirs += ['src/newarch']
+          java.srcDirs += ['src/newarch', "${project.buildDir}/generated/source/codegen/java"]
       } else {
           java.srcDirs += ['src/oldarch']
       }
@@ -73,10 +73,3 @@ dependencies {
   api 'com.facebook.react:react-native:+'
 }
 
-if (isNewArchitectureEnabled()) {
-    react {
-        jsRootDir = file("../src")
-        libraryName = "ReactSlider"
-        codegenJavaPackageName = "com.reactnativecommunity.slider"
-    }
-}

package/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManagerImpl.java

@@ -134,8 +134,16 @@ public static void setAccessibilityIncrements(ReactSlider view, ReadableArray ac
         view.setAccessibilityIncrements(stringList);
     }
 
-    public static Map getExportedCustomDirectEventTypeConstants() {
-        return MapBuilder.of(ReactSlidingCompleteEvent.EVENT_NAME, MapBuilder.of("registrationName", "onRNCSliderSlidingComplete"),
-                ReactSlidingStartEvent.EVENT_NAME, MapBuilder.of("registrationName", "onRNCSliderSlidingStart"));
+    public static Map<String, Object> getExportedCustomBubblingEventTypeConstants() {
+        return MapBuilder.of(
+                ReactSliderEvent.EVENT_NAME, MapBuilder.of("registrationName", ReactSliderEvent.EVENT_NAME)
+        );
+    }
+
+    public static Map<String, Object> getExportedCustomDirectEventTypeConstants() {
+        return MapBuilder.of(
+                ReactSlidingStartEvent.EVENT_NAME, MapBuilder.of("registrationName", ReactSlidingStartEvent.EVENT_NAME),
+                ReactSlidingCompleteEvent.EVENT_NAME, MapBuilder.of("registrationName", ReactSlidingCompleteEvent.EVENT_NAME)
+        );
     }
 }

package/android/src/main/java/com/reactnativecommunity/slider/ReactSlidingCompleteEvent.java

@@ -17,7 +17,7 @@
  */
 public class ReactSlidingCompleteEvent extends Event<ReactSlidingCompleteEvent> {
 
-    public static final String EVENT_NAME = "topSlidingComplete";
+    public static final String EVENT_NAME = "onRNCSliderSlidingComplete";
 
     private final double mValue;
 

package/android/src/main/java/com/reactnativecommunity/slider/ReactSlidingStartEvent.java

@@ -17,7 +17,7 @@
  */
 
 public class ReactSlidingStartEvent extends Event<ReactSlidingStartEvent> {
-    public static final String EVENT_NAME = "topSlidingStart";
+    public static final String EVENT_NAME = "onRNCSliderSlidingStart";
 
     private final double mValue;
 
@@ -58,4 +58,4 @@ private WritableMap serializeEventData() {
         return eventData;
     }
 
-}
+}

package/android/src/main/jni/CMakeLists.txt

@@ -0,0 +1,79 @@
+cmake_minimum_required(VERSION 3.13)
+set(CMAKE_VERBOSE_MAKEFILE ON)
+
+set(LIB_LITERAL RNCSlider)
+set(LIB_TARGET_NAME react_codegen_${LIB_LITERAL})
+
+set(LIB_ANDROID_DIR ${CMAKE_CURRENT_SOURCE_DIR}/../../..)
+set(LIB_COMMON_DIR ${LIB_ANDROID_DIR}/../common/cpp)
+set(LIB_ANDROID_GENERATED_JNI_DIR ${LIB_ANDROID_DIR}/build/generated/source/codegen/jni)
+set(LIB_ANDROID_GENERATED_COMPONENTS_DIR ${LIB_ANDROID_GENERATED_JNI_DIR}/react/renderer/components/${LIB_LITERAL})
+
+add_compile_options(
+  -fexceptions
+  -frtti
+  -std=c++20
+  -Wall
+  -Wpedantic
+  -Wno-gnu-zero-variadic-macro-arguments
+)
+
+file(GLOB LIB_CUSTOM_SRCS CONFIGURE_DEPENDS *.cpp ${LIB_COMMON_DIR}/react/renderer/components/${LIB_LITERAL}/*.cpp)
+file(GLOB LIB_CODEGEN_SRCS CONFIGURE_DEPENDS ${LIB_ANDROID_GENERATED_JNI_DIR}/*.cpp ${LIB_ANDROID_GENERATED_COMPONENTS_DIR}/*.cpp)
+
+add_library(
+  ${LIB_TARGET_NAME}
+  SHARED
+  ${LIB_CUSTOM_SRCS}
+  ${LIB_CODEGEN_SRCS}
+)
+
+target_include_directories(
+  ${LIB_TARGET_NAME}
+  PUBLIC
+  .
+  ${LIB_COMMON_DIR}
+  ${LIB_ANDROID_GENERATED_JNI_DIR}
+  ${LIB_ANDROID_GENERATED_COMPONENTS_DIR}
+)
+
+target_link_libraries(
+  ${LIB_TARGET_NAME}
+  fbjni
+  folly_runtime
+  glog
+  jsi
+  react_codegen_rncore
+  react_debug
+  react_render_componentregistry
+  react_render_core
+  react_render_debug
+  react_render_graphics
+  react_render_imagemanager
+  react_render_mapbuffer
+  react_render_textlayoutmanager
+  react_utils
+  react_nativemodule_core
+  rrc_image
+  turbomodulejsijni
+  rrc_text
+  rrc_textinput
+  rrc_view
+  yoga
+)
+
+target_compile_options(
+  ${LIB_TARGET_NAME}
+  PRIVATE
+  -DLOG_TAG=\"ReactNative\"
+  -fexceptions
+  -frtti
+  -std=c++20
+  -Wall
+)
+
+target_include_directories(
+  ${CMAKE_PROJECT_NAME}
+  PUBLIC
+  ${CMAKE_CURRENT_SOURCE_DIR}
+)

package/android/src/main/jni/RNCSlider.h

@@ -0,0 +1,18 @@
+#pragma once
+
+#include <ReactCommon/JavaTurboModule.h>
+#include <ReactCommon/TurboModule.h>
+#include <jsi/jsi.h>
+#include <react/renderer/components/RNCSlider/RNCSliderComponentDescriptor.h>
+
+namespace facebook {
+namespace react {
+
+JSI_EXPORT
+std::shared_ptr<TurboModule> RNCSlider_ModuleProvider(
+    const std::string &moduleName,
+    const JavaTurboModule::InitParams &params);
+
+} // namespace react
+} // namespace facebook
+

package/android/src/newarch/java/com/reactnativecommunity/slider/ReactSliderManager.java

@@ -1,11 +1,15 @@
 package com.reactnativecommunity.slider;
 
+import android.content.Context;
+import android.view.View;
 import android.widget.SeekBar;
 import androidx.annotation.Nullable;
 
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.common.MapBuilder;
+import com.facebook.react.uimanager.PixelUtil;
 import com.facebook.react.uimanager.SimpleViewManager;
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.uimanager.UIManagerHelper;
@@ -17,6 +21,8 @@
 import com.facebook.react.viewmanagers.RNCSliderManagerInterface;
 import com.facebook.react.viewmanagers.RNCSliderManagerDelegate;
 import com.facebook.react.module.annotations.ReactModule;
+import com.facebook.yoga.YogaMeasureMode;
+import com.facebook.yoga.YogaMeasureOutput;
 
 /**
  * Manages instances of {@code ReactSlider}.
@@ -190,11 +196,6 @@ protected void addEventEmitters(final ThemedReactContext reactContext, final Rea
     view.setOnSeekBarChangeListener(ON_CHANGE_LISTENER);
   }
 
-  @Override
-  public Map getExportedCustomDirectEventTypeConstants() {
-    return ReactSliderManagerImpl.getExportedCustomDirectEventTypeConstants();
-  }
-
   // these props are not available on Android, however we must override their setters
   @Override
   public void setMinimumTrackImage(ReactSlider view, @Nullable ReadableMap readableMap) {}
@@ -210,4 +211,35 @@ public void setTapToSeek(ReactSlider view, boolean value) {}
 
   @Override
   public void setVertical(ReactSlider view, boolean value) {}
+
+  @Override
+  public long measure(
+          Context context,
+          ReadableMap localData,
+          ReadableMap props,
+          ReadableMap state,
+          float width,
+          YogaMeasureMode widthMode,
+          float height,
+          YogaMeasureMode heightMode,
+          @Nullable float[] attachmentsPositions) {
+    ReactSlider view = new ReactSlider(context, null);
+    int measureSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
+    view.measure(measureSpec, measureSpec);
+    return YogaMeasureOutput.make(
+            PixelUtil.toDIPFromPixel(view.getMeasuredWidth()),
+            PixelUtil.toDIPFromPixel(view.getMeasuredHeight()));
+  }
+
+    @Nullable
+    @Override
+    public Map<String, Object> getExportedCustomBubblingEventTypeConstants() {
+        return ReactSliderManagerImpl.getExportedCustomBubblingEventTypeConstants();
+    }
+
+    @Nullable
+    @Override
+    public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
+        return ReactSliderManagerImpl.getExportedCustomDirectEventTypeConstants();
+    }
 }

package/android/src/oldarch/java/com/reactnativecommunity/slider/ReactSliderManager.java

@@ -200,8 +200,15 @@ protected void addEventEmitters(final ThemedReactContext reactContext, final Rea
     view.setOnSeekBarChangeListener(ON_CHANGE_LISTENER);
   }
 
-  @Override
-  public Map getExportedCustomDirectEventTypeConstants() {
-    return ReactSliderManagerImpl.getExportedCustomDirectEventTypeConstants();
-  }
+    @Nullable
+    @Override
+    public Map<String, Object> getExportedCustomBubblingEventTypeConstants() {
+        return ReactSliderManagerImpl.getExportedCustomBubblingEventTypeConstants();
+    }
+
+    @Nullable
+    @Override
+    public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
+        return ReactSliderManagerImpl.getExportedCustomDirectEventTypeConstants();
+    }
 }