Skip to content

Commit d22414e

Browse files
andreialecuandreialecu
authored
fix(ios): incorrect pager height (#580)
Co-authored-by: Andrei Alecu <[email protected]>
1 parent 67eab85 commit d22414e

File tree

5 files changed

+70
-92
lines changed

5 files changed

+70
-92
lines changed

‎example/ios/Podfile.lock‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -185,9 +185,9 @@ PODS:
185185
- React-cxxreact (= 0.63.4)
186186
- React-jsi (= 0.63.4)
187187
- React-jsinspector (0.63.4)
188-
- react-native-pager-view (5.4.23):
188+
- react-native-pager-view (5.4.24):
189189
- React-Core
190-
- react-native-safe-area-context (3.2.0):
190+
- react-native-safe-area-context (3.4.1):
191191
- React-Core
192192
- React-RCTActionSheet (0.63.4):
193193
- React-Core/RCTActionSheetHeaders (= 0.63.4)
@@ -249,19 +249,18 @@ PODS:
249249
- React-Core (= 0.63.4)
250250
- React-cxxreact (= 0.63.4)
251251
- React-jsi (= 0.63.4)
252-
- RNCMaskedView (0.1.10):
252+
- RNCMaskedView (0.1.11):
253253
- React
254254
- RNGestureHandler (1.10.3):
255255
- React-Core
256-
- RNReanimated (2.3.1):
256+
- RNReanimated (2.8.0):
257257
- DoubleConversion
258258
- FBLazyVector
259259
- FBReactNativeSpec
260260
- Folly
261261
- glog
262262
- RCTRequired
263263
- RCTTypeSafety
264-
- React
265264
- React-callinvoker
266265
- React-Core
267266
- React-Core/DevSupport
@@ -281,8 +280,9 @@ PODS:
281280
- React-RCTText
282281
- ReactCommon/turbomodule/core
283282
- Yoga
284-
- RNScreens (2.18.1):
283+
- RNScreens (3.13.1):
285284
- React-Core
285+
- React-RCTImage
286286
- Yoga (1.14.0)
287287

288288
DEPENDENCIES:
@@ -408,8 +408,8 @@ SPEC CHECKSUMS:
408408
React-jsi: a0418934cf48f25b485631deb27c64dc40fb4c31
409409
React-jsiexecutor: 93bd528844ad21dc07aab1c67cb10abae6df6949
410410
React-jsinspector: 58aef7155bc9a9683f5b60b35eccea8722a4f53a
411-
react-native-pager-view: f7c878676230561d3ab6408d7fecaa410dd58264
412-
react-native-safe-area-context: f0906bf8bc9835ac9a9d3f97e8bde2a997d8da79
411+
react-native-pager-view: 95d0418c3c74279840abec6926653d32447bafb6
412+
react-native-safe-area-context: 9e40fb181dac02619414ba1294d6c2a807056ab9
413413
React-RCTActionSheet: 89a0ca9f4a06c1f93c26067af074ccdce0f40336
414414
React-RCTAnimation: 1bde3ecc0c104c55df246eda516e0deb03c4e49b
415415
React-RCTBlob: a97d378b527740cc667e03ebfa183a75231ab0f0
@@ -420,10 +420,10 @@ SPEC CHECKSUMS:
420420
React-RCTText: 5c51df3f08cb9dedc6e790161195d12bac06101c
421421
React-RCTVibration: ae4f914cfe8de7d4de95ae1ea6cc8f6315d73d9d
422422
ReactCommon: 73d79c7039f473b76db6ff7c6b159c478acbbb3b
423-
RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
423+
RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
424424
RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
425-
RNReanimated: 5b5df752f76020971549cb57aa6371dac6895b9e
426-
RNScreens: f7ad633b2e0190b77b6a7aab7f914fad6f198d8d
425+
RNReanimated: 65989f9ee4f06e8e699e94ae855faf8e4e630216
426+
RNScreens: 40a2cb40a02a609938137a1e0acfbf8fc9eebf19
427427
Yoga: 4bd86afe9883422a7c4028c00e34790f560923d6
428428

429429
PODFILE CHECKSUM: ff595481d97548cf6367f753d945ef2a7fc1f818

‎example/src/KeyboardExample.tsx‎

Lines changed: 46 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
TextInput,
1010
Button,
1111
Animated,
12+
KeyboardAvoidingView,
1213
} from 'react-native';
1314
import { Colors } from 'react-native/Libraries/NewAppScreen';
1415
import PagerView from 'react-native-pager-view';
@@ -40,49 +41,51 @@ export function KeyboardExample() {
4041
const { ref, ...navigationPanel } = useNavigationPanel(2);
4142
const { setPage } = navigationPanel;
4243
return (
43-
<SafeAreaView style={styles.flex}>
44-
<ScrollView contentContainerStyle={styles.flex} style={styles.flex}>
45-
<View style={styles.logoContainer}>
46-
<Image
47-
style={styles.logo}
48-
source={{
49-
uri: logoUrl,
50-
}}
51-
/>
52-
</View>
53-
<View style={styles.flex}>
54-
<AnimatedPagerView
55-
{...navigationPanel}
56-
ref={ref}
57-
style={styles.flex}
58-
initialPage={0}
59-
scrollEnabled={false}
60-
>
61-
<View style={styles.sectionContainer}>
62-
<Page
63-
title="First Question"
64-
description="What is your favourite lib ?"
65-
onPress={useCallback(() => setPage(1), [setPage])}
66-
buttonTitle="Go to next question"
67-
/>
68-
</View>
69-
<View style={styles.sectionContainer}>
70-
<Page
71-
title="Second Question"
72-
description="Why Pager View?"
73-
onPress={useCallback(() => setPage(0), [setPage])}
74-
buttonTitle="Go to previous question"
75-
/>
76-
</View>
77-
</AnimatedPagerView>
78-
</View>
79-
</ScrollView>
80-
<NavigationPanel
81-
{...navigationPanel}
82-
scrollEnabled={false}
83-
disablePagesAmountManagement
84-
/>
85-
</SafeAreaView>
44+
<KeyboardAvoidingView style={styles.flex} behavior="height">
45+
<SafeAreaView style={styles.flex}>
46+
<ScrollView contentContainerStyle={styles.flex} style={styles.flex}>
47+
<View style={styles.logoContainer}>
48+
<Image
49+
style={styles.logo}
50+
source={{
51+
uri: logoUrl,
52+
}}
53+
/>
54+
</View>
55+
<View style={styles.flex}>
56+
<AnimatedPagerView
57+
{...navigationPanel}
58+
ref={ref}
59+
style={styles.flex}
60+
initialPage={0}
61+
scrollEnabled={false}
62+
>
63+
<View style={styles.sectionContainer}>
64+
<Page
65+
title="First Question"
66+
description="What is your favourite lib ?"
67+
onPress={useCallback(() => setPage(1), [setPage])}
68+
buttonTitle="Go to next question"
69+
/>
70+
</View>
71+
<View style={styles.sectionContainer}>
72+
<Page
73+
title="Second Question"
74+
description="Why Pager View?"
75+
onPress={useCallback(() => setPage(0), [setPage])}
76+
buttonTitle="Go to previous question"
77+
/>
78+
</View>
79+
</AnimatedPagerView>
80+
</View>
81+
</ScrollView>
82+
<NavigationPanel
83+
{...navigationPanel}
84+
scrollEnabled={false}
85+
disablePagesAmountManagement
86+
/>
87+
</SafeAreaView>
88+
</KeyboardAvoidingView>
8689
);
8790
}
8891

‎ios/ReactNativePageView.h‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ NS_ASSUME_NONNULL_BEGIN
2323
@property(nonatomic, copy) RCTDirectEventBlock onPageScrollStateChanged;
2424
@property(nonatomic) BOOL overdrag;
2525
@property(nonatomic) NSString* layoutDirection;
26-
@property(nonatomic) CGRect previousBounds;
2726
@property(nonatomic, assign) BOOL animating;
2827

2928
- (void)goTo:(NSInteger)index animated:(BOOL)animated;

‎ios/ReactNativePageView.m‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,6 @@ - (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher {
4747
_cachedControllers = [NSHashTable hashTableWithOptions:NSHashTableStrongMemory];
4848
_overdrag = NO;
4949
_layoutDirection = @"ltr";
50-
_previousBounds = CGRectMake(0, 0, 0, 0);
5150
}
5251
return self;
5352
}
@@ -56,13 +55,6 @@ - (void)layoutSubviews {
5655
[super layoutSubviews];
5756
if (self.reactPageViewController) {
5857
[self shouldScroll:self.scrollEnabled];
59-
60-
if (!CGRectEqualToRect(self.previousBounds, CGRectMake(0, 0, 0, 0)) && !CGRectEqualToRect(self.bounds, self.previousBounds)) {
61-
// Below line fix bug, where the view does not update after orientation changed.
62-
[self updateDataSource];
63-
}
64-
65-
self.previousBounds = CGRectMake(self.bounds.origin.x, self.bounds.origin.y, self.bounds.size.width, self.bounds.size.height);
6658
}
6759
}
6860

@@ -185,13 +177,6 @@ - (void)setReactViewControllers:(NSInteger)index
185177

186178
NSArray *currentVCs = self.reactPageViewController.viewControllers;
187179
if (currentVCs.count == 1 && [currentVCs.firstObject isEqual:controller]) {
188-
// see:
189-
// 1) https://github.com/callstack/react-native-pager-view/pull/462
190-
// 2) https://github.com/callstack/react-native-pager-view/issues/566
191-
[self.reactPageViewController setViewControllers:@[controller]
192-
direction:direction
193-
animated:YES
194-
completion:nil];
195180
return;
196181
}
197182

‎src/utils.tsx‎

Lines changed: 13 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -8,30 +8,21 @@
88
* @flow strict-local
99
*/
1010

11-
import React, { Children, ReactNode, ReactElement } from 'react';
11+
import React, { Children, ReactNode } from 'react';
12+
import { StyleSheet, View } from 'react-native';
1213

1314
export const childrenWithOverriddenStyle = (children?: ReactNode) => {
14-
// Override styles so that each page will fill the parent. Native component
15-
// will handle positioning of elements, so it's not important to offset
16-
// them correctly.
1715
return Children.map(children, (child) => {
18-
const { props } = child as ReactElement;
19-
const newProps = {
20-
...props,
21-
style: [
22-
props.style,
23-
{
24-
position: 'absolute',
25-
left: 0,
26-
top: 0,
27-
right: 0,
28-
bottom: 0,
29-
width: undefined,
30-
height: undefined,
31-
},
32-
],
33-
collapsable: false,
34-
};
35-
return React.cloneElement(child as ReactElement, newProps);
16+
const element = child as React.ReactElement;
17+
return (
18+
// Add a wrapper to ensure layout is calculated correctly
19+
<View style={StyleSheet.absoluteFill} collapsable={false}>
20+
{React.cloneElement(element, {
21+
...element.props,
22+
// Override styles so that each page will fill the parent.
23+
style: [element.props.style, StyleSheet.absoluteFill],
24+
})}
25+
</View>
26+
);
3627
});
3728
};

0 commit comments

Comments
 (0)