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.
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
initialPage does not work on Android with Hermes #312
Comments
same issue |
1 similar comment
same issue |
This works for me: @@ -61,7 +61,9 @@ export class ViewPager extends React.Component<ViewPagerProps> {
// On iOS we do it directly on the native side
if (Platform.OS === 'android') {
if (this.props.initialPage != null) {
- this.setPageWithoutAnimation(this.props.initialPage);
+ requestAnimationFrame(() => {
+ this.setPageWithoutAnimation(this.props.initialPage);
+ })
}
}
} |
I was encountering the same behavior, the fix suggested by @KusStar seems to work |
The proposed fix leads to another issue. Now the first page is visible before it skips to the |
I don't think this change comes from using Hermes. I can reproduce it with JSC too. It seems like when upgrading to 0.64 (from 0.63.4) the order of calling |
Since I cant upgrade to rn-pager-view v5 at the moment (facebook/react-native#31245 happens with rn64 & pager-view v5, but not v4), I have patched v4 to fix the problem without a flash of the first page. Maybe someone wants to port this to v5: diff --git a/node_modules/react-native-pager-view/android/src/main/java/com/reactnativecommunity/viewpager/ReactViewPager.java b/node_modules/react-native-pager-view/android/src/main/java/com/reactnativecommunity/viewpager/ReactViewPager.java
index d2ca9b0..d4f5bd1 100644
--- a/node_modules/react-native-pager-view/android/src/main/java/com/reactnativecommunity/viewpager/ReactViewPager.java
+++ b/node_modules/react-native-pager-view/android/src/main/java/com/reactnativecommunity/viewpager/ReactViewPager.java
@@ -144,6 +144,8 @@ public class ReactViewPager extends VerticalViewPager {
private final EventDispatcher mEventDispatcher;
private boolean mIsCurrentItemFromJs;
private boolean mScrollEnabled = true;
+ private int mInitialPage = 0;
+ private boolean mInitialPageWasSet = false;
public ReactViewPager(ReactContext reactContext) {
super(reactContext);
@@ -212,6 +214,12 @@ public class ReactViewPager extends VerticalViewPager {
@Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
+
+ if (!mInitialPageWasSet) {
+ setCurrentItemFromJs(mInitialPage, false);
+ mInitialPageWasSet = true;
+ }
+
// The viewpager reset an internal flag on this method so we need to run another layout pass
// after attaching to window.
this.requestLayout();
@@ -228,6 +236,10 @@ public class ReactViewPager extends VerticalViewPager {
}
};
+ /*package*/ void setInitialPage(int initialPage) {
+ mInitialPage = initialPage;
+ }
+
/*package*/ void addViewToAdapter(View child, int index) {
getAdapter().addView(child, index);
}
diff --git a/node_modules/react-native-pager-view/android/src/main/java/com/reactnativecommunity/viewpager/ReactViewPagerManager.java b/node_modules/react-native-pager-view/android/src/main/java/com/reactnativecommunity/viewpager/ReactViewPagerManager.java
index f8a4cb7..7a98e14 100644
--- a/node_modules/react-native-pager-view/android/src/main/java/com/reactnativecommunity/viewpager/ReactViewPagerManager.java
+++ b/node_modules/react-native-pager-view/android/src/main/java/com/reactnativecommunity/viewpager/ReactViewPagerManager.java
@@ -146,4 +146,9 @@ public class ReactViewPagerManager extends ViewGroupManager<ReactViewPager> {
pager.setOffscreenPageLimit(offscreenPageLimit);
}
+ @ReactProp(name = "initialPage")
+ public void setInitialPage(ReactViewPager pager, int initialPage) {
+ pager.setInitialPage(initialPage);
+ }
+
}
diff --git a/node_modules/react-native-pager-view/src/ViewPager.tsx b/node_modules/react-native-pager-view/src/ViewPager.tsx
index 5a413b3..a118a66 100644
--- a/node_modules/react-native-pager-view/src/ViewPager.tsx
+++ b/node_modules/react-native-pager-view/src/ViewPager.tsx
@@ -57,15 +57,6 @@ export class ViewPager extends React.Component<ViewPagerProps> {
private isScrolling = false;
private viewPager = React.createRef<typeof ViewpagerViewManager>();
- componentDidMount() {
- // On iOS we do it directly on the native side
- if (Platform.OS === 'android') {
- if (this.props.initialPage != null) {
- this.setPageWithoutAnimation(this.props.initialPage);
- }
- }
- }
-
public getInnerViewNode = (): ReactElement => {
return this.viewPager.current!.getInnerViewNode();
}; |
Thank you @danilobuerger - I patch-packaged your change and it fixed this issue for me. - initial page was not appearing on launch after upgrading to react-native 0.64. |
Thank you! |
Original post: react-navigation/react-navigation#9435 (comment)
The text was updated successfully, but these errors were encountered: