Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Jan 17, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
c90e6e1
feat(iOS): change Fabric implementation to UIScrollView
krozniata Dec 19, 2022
9e84e5f
fix: fix offset values in vertical orientation
krozniata Dec 20, 2022
6113f38
feat: add initialPage props support
krozniata Dec 20, 2022
ff0afab
feat: add RTL language support
krozniata Dec 21, 2022
5053860
feat: add pageMargin prop support
krozniata Dec 21, 2022
f458b5d
fix: fix typescript error
krozniata Dec 21, 2022
b20447f
feat: remove React.cloneElement
krozniata Jan 4, 2023
d725159
feat(ios): add getPageOffset method
krozniata Jan 10, 2023
86020ee
fix: fix styles in old example
krozniata Jan 10, 2023
5b2238f
fix: behavior on page remove
krozniata Jan 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerComponentDescriptor.h
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
#pragma once

#include "RNCViewPagerShadowNode.h"
#include <react/renderer/core/ConcreteComponentDescriptor.h>

namespace facebook {
namespace react {

using RNCViewPagerComponentDescriptor = ConcreteComponentDescriptor<RNCViewPagerShadowNode>;

}
}
35 changes: 35 additions & 0 deletions common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerShadowNode.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
#include "RNCViewPagerShadowNode.h"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
#include "RNCViewPagerShadowNode.h"
// https://github.com/facebook/react-native/blob/main/ReactCommon/react/renderer/components/scrollview/ScrollViewShadowNode.cpp
#include "RNCViewPagerShadowNode.h"

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

any way to generate that with codegen or suggest the feature request?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right now, the codegen generates those files inside a build folder. We can suggest a feature request and request a comment from other developers, on what they think about it.


#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();
}

}
}
31 changes: 31 additions & 0 deletions common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerShadowNode.h
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
#pragma once
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://github.com/facebook/react-native/blob/main/ReactCommon/react/renderer/components/scrollview/ScrollViewShadowNode.h


#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();
};

}
}
11 changes: 11 additions & 0 deletions common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerState.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
#include "RNCViewPagerState.h"

namespace facebook {
namespace react {

Size RNCViewPagerState::getContentSize() const {
return contentBoundingRect.size;
}

}
}
18 changes: 18 additions & 0 deletions common/cpp/react/renderer/components/RNCViewPager/RNCViewPagerState.h
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;

};

}
}
17 changes: 10 additions & 7 deletions example/src/NestPagerView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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 />
Expand All @@ -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 />
Expand All @@ -82,7 +82,7 @@ export function NestPagerView() {
</View>
<View
key="3"
style={{ backgroundColor: BGCOLOR[3] }}
style={[styles.page, { backgroundColor: BGCOLOR[3] }]}
collapsable={false}
>
<LikeCount />
Expand All @@ -105,5 +105,8 @@ const styles = StyleSheet.create({
PagerView: {
flex: 1,
},
page: {
flex: 1,
},
title: { fontSize: 22, paddingVertical: 10 },
});
1 change: 1 addition & 0 deletions example/src/PaginationDotsExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,7 @@ const styles = StyleSheet.create({
},
progressContainer: { flex: 0.1, backgroundColor: '#63a4ff' },
center: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
alignContent: 'center',
Expand Down
1 change: 1 addition & 0 deletions example/src/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
13 changes: 11 additions & 2 deletions fabricexample/ios/Podfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
17 changes: 10 additions & 7 deletions fabricexample/src/NestPagerView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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 />
Expand All @@ -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 />
Expand All @@ -82,7 +82,7 @@ export function NestPagerView() {
</View>
<View
key="3"
style={{ backgroundColor: BGCOLOR[3] }}
style={[styles.page, { backgroundColor: BGCOLOR[3] }]}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have to highlight it as a breaking change

collapsable={false}
>
<LikeCount />
Expand All @@ -105,5 +105,8 @@ const styles = StyleSheet.create({
PagerView: {
flex: 1,
},
page: {
flex: 1,
},
title: { fontSize: 22, paddingVertical: 10 },
});
1 change: 1 addition & 0 deletions fabricexample/src/PaginationDotsExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,7 @@ const styles = StyleSheet.create({
},
progressContainer: { flex: 0.1, backgroundColor: '#63a4ff' },
center: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
alignContent: 'center',
Expand Down
1 change: 1 addition & 0 deletions fabricexample/src/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
10 changes: 2 additions & 8 deletions ios/Fabric/RNCPagerViewComponentView.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading