Skip to content

Commit e6bfc6e

Browse files
krozniatakrozniata
authored
feat(iOS): change Fabric implementation to UIScrollView (#672)
* 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
1 parent 00c23de commit e6bfc6e

17 files changed

+302
-316
lines changed

‎common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerComponentDescriptor.h‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
#pragma once
2+
3+
#include "RNCViewPagerShadowNode.h"
4+
#include <react/renderer/core/ConcreteComponentDescriptor.h>
5+
6+
namespace facebook {
7+
namespace react {
8+
9+
using RNCViewPagerComponentDescriptor = ConcreteComponentDescriptor<RNCViewPagerShadowNode>;
10+
11+
}
12+
}

‎common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerShadowNode.cpp‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
#include "RNCViewPagerShadowNode.h"
2+
3+
#include <react/debug/react_native_assert.h>
4+
#include <react/renderer/core/LayoutMetrics.h>
5+
6+
namespace facebook {
7+
namespace react {
8+
9+
const char RNCViewPagerComponentName[] = "RNCViewPager";
10+
11+
void RNCViewPagerShadowNode::updateStateIfNeeded() {
12+
ensureUnsealed();
13+
14+
auto contentBoundingRect = Rect{};
15+
for (const auto &childNode : getLayoutableChildNodes()) {
16+
contentBoundingRect.unionInPlace(childNode->getLayoutMetrics().frame);
17+
}
18+
19+
auto state = getStateData();
20+
21+
if (state.contentBoundingRect != contentBoundingRect) {
22+
state.contentBoundingRect = contentBoundingRect;
23+
setStateData(std::move(state));
24+
}
25+
}
26+
27+
#pragma mark - LayoutableShadowNode
28+
29+
void RNCViewPagerShadowNode::layout(LayoutContext layoutContext) {
30+
ConcreteViewShadowNode::layout(layoutContext);
31+
updateStateIfNeeded();
32+
}
33+
34+
}
35+
}

‎common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerShadowNode.h‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
#pragma once
2+
3+
#include <react/renderer/components/RNCViewPager/EventEmitters.h>
4+
#include <react/renderer/components/RNCViewPager/Props.h>
5+
#include <react/renderer/components/RNCViewPager/RNCViewPagerState.h>
6+
#include <react/renderer/components/view/ConcreteViewShadowNode.h>
7+
#include <react/renderer/core/LayoutContext.h>
8+
9+
namespace facebook {
10+
namespace react {
11+
12+
extern const char RNCViewPagerComponentName[];
13+
14+
class RNCViewPagerShadowNode final : public ConcreteViewShadowNode<
15+
RNCViewPagerComponentName,
16+
RNCViewPagerProps,
17+
RNCViewPagerEventEmitter,
18+
RNCViewPagerState> {
19+
public:
20+
using ConcreteViewShadowNode::ConcreteViewShadowNode;
21+
22+
#pragma mark - LayoutableShadowNode
23+
24+
void layout(LayoutContext layoutContext) override;
25+
26+
private:
27+
void updateStateIfNeeded();
28+
};
29+
30+
}
31+
}

‎common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerState.cpp‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
#include "RNCViewPagerState.h"
2+
3+
namespace facebook {
4+
namespace react {
5+
6+
Size RNCViewPagerState::getContentSize() const {
7+
return contentBoundingRect.size;
8+
}
9+
10+
}
11+
}

‎common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerState.h‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
#pragma once
2+
3+
#include <react/renderer/graphics/Geometry.h>
4+
5+
namespace facebook {
6+
namespace react {
7+
8+
class RNCViewPagerState final {
9+
public:
10+
Point contentOffset;
11+
Rect contentBoundingRect;
12+
13+
Size getContentSize() const;
14+
15+
};
16+
17+
}
18+
}

‎example/src/NestPagerView.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,12 @@ export function NestPagerView() {
2020
>
2121
<View
2222
key="1"
23-
style={{ backgroundColor: BGCOLOR[0] }}
23+
style={[styles.page, { backgroundColor: BGCOLOR[0] }]}
2424
collapsable={false}
2525
>
2626
<LikeCount />
2727
</View>
28-
<View key="2" collapsable={false}>
28+
<View style={styles.page} key="2" collapsable={false}>
2929
<Text style={styles.title}>
3030
There has two Nest PagerView with horizontal and vertical.
3131
</Text>
@@ -39,15 +39,15 @@ export function NestPagerView() {
3939
>
4040
<View
4141
key="1"
42-
style={{ backgroundColor: BGCOLOR[1] }}
42+
style={[styles.page, { backgroundColor: BGCOLOR[1] }]}
4343
collapsable={false}
4444
>
4545
<LikeCount />
4646
<Text>Horizontal</Text>
4747
</View>
4848
<View
4949
key="2"
50-
style={{ backgroundColor: BGCOLOR[2] }}
50+
style={[styles.page, { backgroundColor: BGCOLOR[2] }]}
5151
collapsable={false}
5252
>
5353
<LikeCount />
@@ -64,15 +64,15 @@ export function NestPagerView() {
6464
>
6565
<View
6666
key="1"
67-
style={{ backgroundColor: BGCOLOR[3] }}
67+
style={[styles.page, { backgroundColor: BGCOLOR[3] }]}
6868
collapsable={false}
6969
>
7070
<LikeCount />
7171
<Text>Vertical</Text>
7272
</View>
7373
<View
7474
key="2"
75-
style={{ backgroundColor: BGCOLOR[4] }}
75+
style={[styles.page, { backgroundColor: BGCOLOR[4] }]}
7676
collapsable={false}
7777
>
7878
<LikeCount />
@@ -82,7 +82,7 @@ export function NestPagerView() {
8282
</View>
8383
<View
8484
key="3"
85-
style={{ backgroundColor: BGCOLOR[3] }}
85+
style={[styles.page, { backgroundColor: BGCOLOR[3] }]}
8686
collapsable={false}
8787
>
8888
<LikeCount />
@@ -105,5 +105,8 @@ const styles = StyleSheet.create({
105105
PagerView: {
106106
flex: 1,
107107
},
108+
page: {
109+
flex: 1,
110+
},
108111
title: { fontSize: 22, paddingVertical: 10 },
109112
});

‎example/src/PaginationDotsExample.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,7 @@ const styles = StyleSheet.create({
166166
},
167167
progressContainer: { flex: 0.1, backgroundColor: '#63a4ff' },
168168
center: {
169+
flex: 1,
169170
justifyContent: 'center',
170171
alignItems: 'center',
171172
alignContent: 'center',

‎example/src/utils.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export const createPage = (key: number): CreatePage => {
2323
return {
2424
key: key,
2525
style: {
26+
flex: 1,
2627
backgroundColor: BGCOLOR[key % BGCOLOR.length],
2728
alignItems: 'center',
2829
padding: 20,

‎fabricexample/ios/Podfile.lock‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -625,7 +625,16 @@ PODS:
625625
- React-jsinspector (0.70.5)
626626
- React-logger (0.70.5):
627627
- glog
628-
- react-native-pager-view (6.1.1):
628+
- react-native-pager-view (6.1.2):
629+
- RCT-Folly
630+
- RCTRequired
631+
- RCTTypeSafety
632+
- React-Codegen
633+
- React-Core
634+
- react-native-pager-view/common (= 6.1.2)
635+
- React-RCTFabric
636+
- ReactCommon/turbomodule/core
637+
- react-native-pager-view/common (6.1.2):
629638
- RCT-Folly
630639
- RCTRequired
631640
- RCTTypeSafety
@@ -1013,7 +1022,7 @@ SPEC CHECKSUMS:
10131022
React-jsiexecutor: 31564fa6912459921568e8b0e49024285a4d584b
10141023
React-jsinspector: badd81696361249893a80477983e697aab3c1a34
10151024
React-logger: fdda34dd285bdb0232e059b19d9606fa0ec3bb9c
1016-
react-native-pager-view: 22ef94ca5a46cb18e4573ed3e179f4f84d477490
1025+
react-native-pager-view: 991c947924d48f1232a98ba6e6d3466eaf51034d
10171026
react-native-safe-area-context: 2f75b317784a1a8e224562941e50ecbc932d2097
10181027
React-perflogger: e68d3795cf5d247a0379735cbac7309adf2fb931
10191028
React-RCTActionSheet: 05452c3b281edb27850253db13ecd4c5a65bc247

‎fabricexample/src/NestPagerView.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,12 @@ export function NestPagerView() {
2020
>
2121
<View
2222
key="1"
23-
style={{ backgroundColor: BGCOLOR[0] }}
23+
style={[styles.page, { backgroundColor: BGCOLOR[0] }]}
2424
collapsable={false}
2525
>
2626
<LikeCount />
2727
</View>
28-
<View key="2" collapsable={false}>
28+
<View style={styles.page} key="2" collapsable={false}>
2929
<Text style={styles.title}>
3030
There has two Nest PagerView with horizontal and vertical.
3131
</Text>
@@ -39,15 +39,15 @@ export function NestPagerView() {
3939
>
4040
<View
4141
key="1"
42-
style={{ backgroundColor: BGCOLOR[1] }}
42+
style={[styles.page, { backgroundColor: BGCOLOR[1] }]}
4343
collapsable={false}
4444
>
4545
<LikeCount />
4646
<Text>Horizontal</Text>
4747
</View>
4848
<View
4949
key="2"
50-
style={{ backgroundColor: BGCOLOR[2] }}
50+
style={[styles.page, { backgroundColor: BGCOLOR[2] }]}
5151
collapsable={false}
5252
>
5353
<LikeCount />
@@ -64,15 +64,15 @@ export function NestPagerView() {
6464
>
6565
<View
6666
key="1"
67-
style={{ backgroundColor: BGCOLOR[3] }}
67+
style={[styles.page, { backgroundColor: BGCOLOR[3] }]}
6868
collapsable={false}
6969
>
7070
<LikeCount />
7171
<Text>Vertical</Text>
7272
</View>
7373
<View
7474
key="2"
75-
style={{ backgroundColor: BGCOLOR[4] }}
75+
style={[styles.page, { backgroundColor: BGCOLOR[4] }]}
7676
collapsable={false}
7777
>
7878
<LikeCount />
@@ -82,7 +82,7 @@ export function NestPagerView() {
8282
</View>
8383
<View
8484
key="3"
85-
style={{ backgroundColor: BGCOLOR[3] }}
85+
style={[styles.page, { backgroundColor: BGCOLOR[3] }]}
8686
collapsable={false}
8787
>
8888
<LikeCount />
@@ -105,5 +105,8 @@ const styles = StyleSheet.create({
105105
PagerView: {
106106
flex: 1,
107107
},
108+
page: {
109+
flex: 1,
110+
},
108111
title: { fontSize: 22, paddingVertical: 10 },
109112
});

0 commit comments

Comments
 (0)