Upgrade react-native-pager-view to 6.5.0 #52166
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
@hungvu193 Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
|
@AndrewGable @thienlnam could we have a adhoc build for that one so we could test if its working as expected? |
|
@MrRefactor Can you fill the QA, Tests, and Offline test section on your author checklist? |
|
With |
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, Desktop, and Web. Happy testing! 🧪🧪 |
|
@MrRefactor Can you update the screenshots/videos please? Screen.Recording.2024-11-08.at.11.27.52.movScreen.Recording.2024-11-08.at.11.26.21.mov |
|
Hey @hungvu193 version Right now we have two scenarios: Scenario 1 -> Current implementation in Expensify Screen.Recording.2024-11-08.at.09.27.38.movWe start with 3 pages, after we modify page 3 whole pager-view rerenders which causes switching page to page nr 2. Minimum reproducible codeimport React from 'react';
import { useState } from 'react';
import { Button, SafeAreaView, Text, View, StyleSheet } from 'react-native';
import PagerView from 'react-native-pager-view';
const ids = ['1', '2', '3'];
function getNewArray() {
const newArray = [...ids];
newArray[2] = Math.random().toString(36).substring(7); // Generate a random string
return newArray;
}
export const BasicPagerViewExample = () => {
const [pagesContent, setPagesContent] = useState<string[]>(getNewArray());
const [page, setPage] = useState<number>(2);
console.log(pagesContent);
return (
<SafeAreaView style={{ flex: 1 }}>
<Text style={{ textAlign: 'center' }}>{pagesContent.length}</Text>
<PagerView orientation="horizontal" style={{ flex: 1, backgroundColor: 'yellow' }} initialPage={page}
onPageSelected={(e) => {
console.log('onPageSelected ~ e.nativeEvent.position:', e.nativeEvent.position);
}}
>
{pagesContent.map((content) => (
<View key={content} style={{ flex: 1,backgroundColor: 'green' }}>
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' , backgroundColor:'red'}}>
<Text style={{ fontSize: 30 }}>{content}</Text>
</View>
</View>
))}
</PagerView>
<Button
title={'Replace third page content'}
onPress={() => {
setPagesContent(getNewArray());
setPage(2);
}}
/>
</SafeAreaView>
);
};
export default BasicPagerViewExampleScenario 2 -> Screen.Recording.2024-11-08.at.10.25.41.movWe modify mounted page without rerender of pager-view by applying key value to each page so last page stays in the same place. This part it on project's side to refactor a bit behaviour of how we process attachments and provide them to pager-view. Minimum reproducible codeimport React from 'react';
import { useState } from 'react';
import { Button, SafeAreaView, Text, View, StyleSheet } from 'react-native';
import PagerView from 'react-native-pager-view';
const pages = [{key: '1', content: '1'}, {key: '2', content:'2'}, {key:'3', content:'3333'}]
function getNewArray() {
const newArray = [...pages];
newArray[2].content = Math.random().toString(36).substring(7); // Generate a random string
return newArray;
}
type Pages = {
key: string,
content:string
}
export const BasicPagerViewExample = () => {
const [pagesContent, setPagesContent] = useState<Pages[]>(pages);
const [page, setPage] = useState<number>(2);
console.log(pagesContent);
return (
<SafeAreaView style={{ flex: 1 }}>
<Text style={{ textAlign: 'center' }}>{pagesContent.length}</Text>
<PagerView orientation="horizontal" style={{ flex: 1, backgroundColor: 'red'}} initialPage={page}
onPageSelected={(e) => {
console.log('onPageSelected ~ e.nativeEvent.position:', e.nativeEvent.position);
}}
>
{pagesContent.map((item) => (
<View key={item.key} style={{ flex: 1,backgroundColor: 'green' }}>
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' , backgroundColor:'red'}}>
<Text style={{ fontSize: 30 }}>{item.content}</Text>
</View>
</View>
))}
</PagerView>
<Button
title={'Replace third page content'}
onPress={() => {
setPagesContent(getNewArray());
setPage(2);
}}
/>
</SafeAreaView>
);
};
export default BasicPagerViewExample
Apart of the bump there should be a followup to the issue I posted above directly on the project's side. Videos with the bug you provided are connected to associated issue that will be resolved separately. -> #50296 |
|
Got it! Thanks for your explanation 🙏 |
Reviewer Checklist
Screenshots/VideosAndroid: NativeAndroid.movAndroid: mWeb ChromemChrome.moviOS: Nativeios.moviOS: mWeb SafarimSafari.movMacOS: Chrome / SafariChrome.movMacOS: DesktopDesktop.mov |
hungvu193
approved these changes
Nov 10, 2024
thienlnam
approved these changes
Nov 12, 2024
|
Looks like we need to update it there as well - https://github.com/Expensify/Mobile-Expensify/tree/main/patches/new-dot @AndrewGable What's the recommended way to handle these? Should they be merged at the same time or does one need to go out before the other? |
|
@war-in @mateuuszzzzz - Correct me if I am wrong, but we only need to apply patches in HybridApp if they are exclusive to HybridApp, otherwise no additional changes are required. |
|
Andrew's right, the |
|
Okay great, thanks for the confirmation |
47 tasks
|
🚀 Deployed to staging by https://github.com/thienlnam in version: 9.0.62-0 🚀
|
|
🚀 Deployed to production by https://github.com/mountiny in version: 9.0.62-4 🚀
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Explanation of Change
Bumping
react-native-pager-viewto a6.5.0version containing changes incorrect page change.Fixed Issues
$ #50349
PROPOSAL:
Tests
Offline tests
N/A
QA Steps
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari
MacOS: Desktop