feat(iOS): change Fabric implementation to UIScrollView (#672)

krozniata · web-flow · commit e6bfc6e33c9d · 2023-01-17T17:57:10.000+01:00
* feat(iOS): change Fabric implementation to UIScrollView

* fix: fix offset values in vertical orientation

* feat: add initialPage props support

* feat: add RTL language support

* feat: add pageMargin prop support

* fix: fix typescript error

* feat: remove React.cloneElement

* feat(ios): add getPageOffset method

* fix: fix styles in old example

* fix: behavior on page remove
diff --git a/common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerComponentDescriptor.h b/common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerComponentDescriptor.h
@@ -0,0 +1,12 @@
+#pragma once
+
+#include "RNCViewPagerShadowNode.h"
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+
+namespace facebook {
+namespace react {
+
+using RNCViewPagerComponentDescriptor = ConcreteComponentDescriptor<RNCViewPagerShadowNode>;
+
+}
+}
diff --git a/common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerShadowNode.cpp b/common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerShadowNode.cpp
@@ -0,0 +1,35 @@
+#include "RNCViewPagerShadowNode.h"
+
+#include <react/debug/react_native_assert.h>
+#include <react/renderer/core/LayoutMetrics.h>
+
+namespace facebook {
+namespace react {
+
+const char RNCViewPagerComponentName[] = "RNCViewPager";
+
+void RNCViewPagerShadowNode::updateStateIfNeeded() {
+    ensureUnsealed();
+    
+    auto contentBoundingRect = Rect{};
+    for (const auto &childNode : getLayoutableChildNodes()) {
+        contentBoundingRect.unionInPlace(childNode->getLayoutMetrics().frame);
+    }
+    
+    auto state = getStateData();
+    
+    if (state.contentBoundingRect != contentBoundingRect) {
+        state.contentBoundingRect = contentBoundingRect;
+        setStateData(std::move(state));
+    }
+}
+
+#pragma mark - LayoutableShadowNode
+
+void RNCViewPagerShadowNode::layout(LayoutContext layoutContext) {
+    ConcreteViewShadowNode::layout(layoutContext);
+    updateStateIfNeeded();
+}
+
+}
+}
diff --git a/common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerShadowNode.h b/common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerShadowNode.h
@@ -0,0 +1,31 @@
+#pragma once
+
+#include <react/renderer/components/RNCViewPager/EventEmitters.h>
+#include <react/renderer/components/RNCViewPager/Props.h>
+#include <react/renderer/components/RNCViewPager/RNCViewPagerState.h>
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <react/renderer/core/LayoutContext.h>
+
+namespace facebook {
+namespace react {
+
+extern const char RNCViewPagerComponentName[];
+
+class RNCViewPagerShadowNode final : public ConcreteViewShadowNode<
+                                                RNCViewPagerComponentName,
+                                                RNCViewPagerProps,
+                                                RNCViewPagerEventEmitter,
+                                                RNCViewPagerState> {
+public:
+    using ConcreteViewShadowNode::ConcreteViewShadowNode;
+    
+#pragma mark - LayoutableShadowNode
+    
+    void layout(LayoutContext layoutContext) override;
+    
+private:
+    void updateStateIfNeeded();
+};
+
+}
+}
diff --git a/common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerState.cpp b/common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerState.cpp
@@ -0,0 +1,11 @@
+#include "RNCViewPagerState.h"
+
+namespace facebook {
+namespace react {
+
+Size RNCViewPagerState::getContentSize() const {
+    return contentBoundingRect.size;
+}
+
+}
+}
diff --git a/common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerState.h b/common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerState.h
@@ -0,0 +1,18 @@
+#pragma once
+
+#include <react/renderer/graphics/Geometry.h>
+
+namespace facebook {
+namespace react {
+
+class RNCViewPagerState final {
+public:
+    Point contentOffset;
+    Rect contentBoundingRect;
+    
+    Size getContentSize() const;
+    
+};
+
+}
+}
diff --git a/example/src/NestPagerView.tsx b/example/src/NestPagerView.tsx
@@ -20,12 +20,12 @@ export function NestPagerView() {
       >
         <View
           key="1"
-          style={{ backgroundColor: BGCOLOR[0] }}
+          style={[styles.page, { backgroundColor: BGCOLOR[0] }]}
           collapsable={false}
         >
           <LikeCount />
         </View>
-        <View key="2" collapsable={false}>
+        <View style={styles.page} key="2" collapsable={false}>
           <Text style={styles.title}>
             There has two Nest PagerView with horizontal and vertical.
           </Text>
@@ -39,15 +39,15 @@ export function NestPagerView() {
           >
             <View
               key="1"
-              style={{ backgroundColor: BGCOLOR[1] }}
+              style={[styles.page, { backgroundColor: BGCOLOR[1] }]}
               collapsable={false}
             >
               <LikeCount />
               <Text>Horizontal</Text>
             </View>
             <View
               key="2"
-              style={{ backgroundColor: BGCOLOR[2] }}
+              style={[styles.page, { backgroundColor: BGCOLOR[2] }]}
               collapsable={false}
             >
               <LikeCount />
@@ -64,15 +64,15 @@ export function NestPagerView() {
           >
             <View
               key="1"
-              style={{ backgroundColor: BGCOLOR[3] }}
+              style={[styles.page, { backgroundColor: BGCOLOR[3] }]}
               collapsable={false}
             >
               <LikeCount />
               <Text>Vertical</Text>
             </View>
             <View
               key="2"
-              style={{ backgroundColor: BGCOLOR[4] }}
+              style={[styles.page, { backgroundColor: BGCOLOR[4] }]}
               collapsable={false}
             >
               <LikeCount />
@@ -82,7 +82,7 @@ export function NestPagerView() {
         </View>
         <View
           key="3"
-          style={{ backgroundColor: BGCOLOR[3] }}
+          style={[styles.page, { backgroundColor: BGCOLOR[3] }]}
           collapsable={false}
         >
           <LikeCount />
@@ -105,5 +105,8 @@ const styles = StyleSheet.create({
   PagerView: {
     flex: 1,
   },
+  page: {
+    flex: 1,
+  },
   title: { fontSize: 22, paddingVertical: 10 },
 });
diff --git a/example/src/PaginationDotsExample.tsx b/example/src/PaginationDotsExample.tsx
@@ -166,6 +166,7 @@ const styles = StyleSheet.create({
   },
   progressContainer: { flex: 0.1, backgroundColor: '#63a4ff' },
   center: {
+    flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     alignContent: 'center',
diff --git a/example/src/utils.ts b/example/src/utils.ts
@@ -23,6 +23,7 @@ export const createPage = (key: number): CreatePage => {
   return {
     key: key,
     style: {
+      flex: 1,
       backgroundColor: BGCOLOR[key % BGCOLOR.length],
       alignItems: 'center',
       padding: 20,
diff --git a/fabricexample/ios/Podfile.lock b/fabricexample/ios/Podfile.lock
@@ -625,7 +625,16 @@ PODS:
   - React-jsinspector (0.70.5)
   - React-logger (0.70.5):
     - glog
-  - react-native-pager-view (6.1.1):
+  - react-native-pager-view (6.1.2):
+    - RCT-Folly
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Codegen
+    - React-Core
+    - react-native-pager-view/common (= 6.1.2)
+    - React-RCTFabric
+    - ReactCommon/turbomodule/core
+  - react-native-pager-view/common (6.1.2):
     - RCT-Folly
     - RCTRequired
     - RCTTypeSafety
@@ -1013,7 +1022,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 31564fa6912459921568e8b0e49024285a4d584b
   React-jsinspector: badd81696361249893a80477983e697aab3c1a34
   React-logger: fdda34dd285bdb0232e059b19d9606fa0ec3bb9c
-  react-native-pager-view: 22ef94ca5a46cb18e4573ed3e179f4f84d477490
+  react-native-pager-view: 991c947924d48f1232a98ba6e6d3466eaf51034d
   react-native-safe-area-context: 2f75b317784a1a8e224562941e50ecbc932d2097
   React-perflogger: e68d3795cf5d247a0379735cbac7309adf2fb931
   React-RCTActionSheet: 05452c3b281edb27850253db13ecd4c5a65bc247
diff --git a/fabricexample/src/NestPagerView.tsx b/fabricexample/src/NestPagerView.tsx
@@ -20,12 +20,12 @@ export function NestPagerView() {
       >
         <View
           key="1"
-          style={{ backgroundColor: BGCOLOR[0] }}
+          style={[styles.page, { backgroundColor: BGCOLOR[0] }]}
           collapsable={false}
         >
           <LikeCount />
         </View>
-        <View key="2" collapsable={false}>
+        <View style={styles.page} key="2" collapsable={false}>
           <Text style={styles.title}>
             There has two Nest PagerView with horizontal and vertical.
           </Text>
@@ -39,15 +39,15 @@ export function NestPagerView() {
           >
             <View
               key="1"
-              style={{ backgroundColor: BGCOLOR[1] }}
+              style={[styles.page, { backgroundColor: BGCOLOR[1] }]}
               collapsable={false}
             >
               <LikeCount />
               <Text>Horizontal</Text>
             </View>
             <View
               key="2"
-              style={{ backgroundColor: BGCOLOR[2] }}
+              style={[styles.page, { backgroundColor: BGCOLOR[2] }]}
               collapsable={false}
             >
               <LikeCount />
@@ -64,15 +64,15 @@ export function NestPagerView() {
           >
             <View
               key="1"
-              style={{ backgroundColor: BGCOLOR[3] }}
+              style={[styles.page, { backgroundColor: BGCOLOR[3] }]}
               collapsable={false}
             >
               <LikeCount />
               <Text>Vertical</Text>
             </View>
             <View
               key="2"
-              style={{ backgroundColor: BGCOLOR[4] }}
+              style={[styles.page, { backgroundColor: BGCOLOR[4] }]}
               collapsable={false}
             >
               <LikeCount />
@@ -82,7 +82,7 @@ export function NestPagerView() {
         </View>
         <View
           key="3"
-          style={{ backgroundColor: BGCOLOR[3] }}
+          style={[styles.page, { backgroundColor: BGCOLOR[3] }]}
           collapsable={false}
         >
           <LikeCount />
@@ -105,5 +105,8 @@ const styles = StyleSheet.create({
   PagerView: {
     flex: 1,
   },
+  page: {
+    flex: 1,
+  },
   title: { fontSize: 22, paddingVertical: 10 },
 });
diff --git a/fabricexample/src/PaginationDotsExample.tsx b/fabricexample/src/PaginationDotsExample.tsx
@@ -166,6 +166,7 @@ const styles = StyleSheet.create({
   },
   progressContainer: { flex: 0.1, backgroundColor: '#63a4ff' },
   center: {
+    flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     alignContent: 'center',
diff --git a/fabricexample/src/utils.ts b/fabricexample/src/utils.ts
@@ -23,6 +23,7 @@ export const createPage = (key: number): CreatePage => {
   return {
     key: key,
     style: {
+      flex: 1,
       backgroundColor: BGCOLOR[key % BGCOLOR.length],
       alignItems: 'center',
       padding: 20,
diff --git a/ios/Fabric/RNCPagerViewComponentView.h b/ios/Fabric/RNCPagerViewComponentView.h
@@ -7,14 +7,8 @@
 
 NS_ASSUME_NONNULL_BEGIN
 
-@interface RNCPagerViewComponentView : RCTViewComponentView <UIPageViewControllerDataSource, UIPageViewControllerDelegate, UIScrollViewDelegate>
-
-@property(strong, nonatomic, readonly) UIPageViewController *nativePageViewController;
-@property(nonatomic, strong) NSMutableArray<UIViewController *> *nativeChildrenViewControllers;
-@property(nonatomic) NSInteger initialPage;
-@property(nonatomic) NSInteger currentIndex;
-@property(nonatomic) NSInteger destinationIndex;
-@property(nonatomic) NSString* layoutDirection;
+@interface RNCPagerViewComponentView : RCTViewComponentView <UIScrollViewDelegate>
+
 @property(nonatomic) BOOL overdrag;
 
 - (void)setPage:(NSInteger)number;
diff --git a/ios/Fabric/RNCPagerViewComponentView.mm b/ios/Fabric/RNCPagerViewComponentView.mm
diff --git a/react-native-pager-view.podspec b/react-native-pager-view.podspec
diff --git a/src/PagerView.tsx b/src/PagerView.tsx
diff --git a/src/utils.tsx b/src/utils.tsx
