Repository navigation
[HOLD for payment 2024-10-30] [$1000] Create a useResponsiveLayout hook #30528
Description
Slack context: https://expensify.slack.com/archives/C01GTK53T8Q/p1698364514493649
Problem
There are some times when we want to use the same layout on mobile devices or in the RHP on wide screens. In these cases, we can't rely on isSmallScreenWidth from useWindowDimensions to determine which layout to use, so we have hard-coded and/or different solutions we use to address the same problem.
Solution
-
In the navigation stack, add an
isInRHProute prop to all screens in the RHP. -
Write a custom hook called
useResponsiveLayoutthat does something like this:function useResponsiveLayout() { const {isSmallScreenWidth} = useWindowDimensions(); const {params} = useRoute(); return { shouldUseNarrowLayout = isSmallScreenWidth || params.isInRHP, }; }
-
Replace most layout-motivated uses of useWindowDimensions with useResponsiveLayout like so:
- const {isSmallScreenWidth} = useWindowDimensions(); + const {shouldUseNarrowLayout} = useResponsiveLayout();
-
Introduce a new lint rule that prohibits using
isSmallScreenWidthfromuseWindowDimensions, advising developers to useshouldUseNarrowLayoutinstead.
Upwork Automation - Do Not Edit
- Upwork Job URL: https://www.upwork.com/jobs/~01f36dcb081cdf74b2
- Upwork Job ID: 1717949899365408768
- Last Price Increase: 2023-12-29
Issue Owner
Current Issue Owner: @alexpensifyMetadata
Metadata
Labels
Type
Projects
- Status
Activity
melvin-bot commentedon Oct 27, 2023
Job added to Upwork: https://www.upwork.com/jobs/~01f36dcb081cdf74b2
[-]Create a useResponsiveLayout hook[/-][+][$500] Create a useResponsiveLayout hook[/+]melvin-bot commentedon Oct 27, 2023
Triggered auto assignment to @maddylewis (
NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.melvin-bot commentedon Oct 27, 2023
Triggered auto assignment to Contributor-plus team member for initial proposal review - @getusha (
External)170 remaining items
rayane-d commentedon Oct 31, 2024
@alexpensify The payment amount for this issue is $1000 - #30528 (comment)
rayane-d commentedon Oct 31, 2024
@alexpensify Offer accepted, thanks!
alexpensify commentedon Oct 31, 2024
🤦🏼 good catch - Upwork was right. I've updated the summary here and paid @rayane-djouah via Upwork. I'm waiting for @getusha to accept.
alexpensify commentedon Nov 2, 2024
Status: Waiting for @getusha to accept in Upwork
rayane-d commentedon Nov 3, 2024
@alexpensify I think that @getusha is being paid in NewDot, we can close this issue
alexpensify commentedon Nov 5, 2024
Thanks for flagging! This GH is from 2023. I think it needs to be paid via Chat, but let me double-check.
alexpensify commentedon Nov 7, 2024
I confirmed that this one is from 2023. It will need to be paid via Upwork. I will move this to weekly since I'm OOO until Tuesday. @getusha, keep me posted when you accept it in Upwork. I'll complete the process when I'm back online.
getusha commentedon Nov 7, 2024
@alexpensify accepted, thanks!
alexpensify commentedon Nov 7, 2024
All set, everyone has been paid via Upwork: #30528 (comment)