Skip to content
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

Jump to bottom

fix(web): Fixes web implementation #2528

Merged
merged 1 commit into from
Oct 17, 2023
Merged

fix(web): Fixes web implementation #2528

merged 1 commit into from
Oct 17, 2023

Conversation

markrickert
Copy link
Member

Please verify the following:

  • yarn test jest tests pass with new tests, if relevant
  • README.md has been updated with your changes, if relevant

Describe your PR

There was a problem with the web implementation (pointed out here: #2446 (comment)) because we were directly using DrawerLayout from react-native-gesture-handler.

Moving to Drawer from react-native-drawer-layout (a react-navigation product) mitigates this issue without losing any functionality. There's even a nice useDrawerProgress() hook so that we don't have to keep track of the drawer open/closed animation progress manually anymore.

This is the recommended way of creating a drawer with react-native-0gesture-handler taken directly from the react-navigation docs

@markrickert
fix(web): Fixes web implementation
bf0d3a0 
There was a problem with the web implementation because we were directly using `DrawerLayout` from `react-native-gesture-handler`. Moving to `Drawer` from `react-native-drawer-layout` (a react-navigation product) mitigates this issue without losing any functionality.
frankcalise
frankcalise approved these changes Oct 17, 2023
View reviewed changes
Copy link
Contributor

@frankcalise frankcalise left a comment

Choose a reason for hiding this comment

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

So web is fixed and that part looks looks good.

I do see a regression on mobile - the hamburger button that animates with progress, it turns into an arrow and should remain on top of the drawer when open.

I take the trade of fixing web for that though and we can revisit

boilerplate/app/screens/DemoShowroomScreen/DemoShowroomScreen.tsx
onDrawerSlide={(drawerProgress) => {
progress.value = open ? 1 - drawerProgress : drawerProgress
}}
onDrawerStateChanged={(newState: DrawerState, drawerWillShow: boolean) => {
Copy link
Contributor

Choose a reason for hiding this comment

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

Nice that all of this went away

Copy link
Member Author

Choose a reason for hiding this comment

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

Yeah, it's all handled by the useDrawerProgress() hook. Pretty neat, but it has to be called from a component thats inside the drawer so that's why the progress animation handler moved from the screen to the hamburger icon component

boilerplate/package.json Show resolved Hide resolved
@markrickert
Copy link
Member Author

I agree that the hamburger->arrow animation is a regression, but i've fundamentally changed how the drawer is laid out and it would take some time to get this working as it previously was.

Merging this to keep moving forward since this fixes web compatibility and we can revisit when we have time to fix.

It was a pretty slick animation though.

@markrickert markrickert merged commit d1968de into feat/rn-72-expo-49 Oct 17, 2023
1 check passed
@markrickert markrickert deleted the mrickert/next/fix-web branch October 17, 2023 16:55
@markrickert markrickert mentioned this pull request Oct 17, 2023
Merged
2 tasks
frankcalise added a commit that referenced this pull request Dec 13, 2023
@frankcalise @joshuayoes
@mazenchami @jamonholmgren @markrickert @semantic-release-bot
docs: set up ir-docs (#2530 @frankcalise @markrickert @trevor-coleman)
26614c5 
* chore: RN 0.72.0-rc.3 and Expo 49 alpha.3

* chore: alpha4 expo 49 and RN rc6

* chore: package updates

* chore: remove webpack-config dep, expo uses metro now

* feat(web): metro over webpack for SDK 49

* chore: tsc fix

* Ignite Expresso (#2476 by @frankcalise)

* fix(cli): update generator for expo only

* refactor(boilerplate): App to typescript

* chore: simplify w/ expo

* chore: reanimated deps, other dep clean up

* fix(boilerplate): removed problematic @expo/metro-config to run dev client

* chore: updated native dirs as per expo dev client build

* chore: updates to latest Expo SDK

* test: update app-icon / splash section

* fix(cli): rename bridging header and entitlements

* chore(boilerplate): dep update

* docs(folder-structure): updated for rework

* chore: updates due to structure changes, tests passing 🤞

* fix(generators): add new line to end of app.json

* chore: update reactotron dev deps

* fix(boilerplate): WelcomeScreen needs this import even if demo removed

* fix(cli): remove deprecrated expo flag

* fix(boilerplate): match babel config more closely to expo default

* chore(cli): reactotron deps

* feat(cli): prompt for enabling new arch

* chore: remove unused log statements

* chore: expect TS error for now

* chore(boilerplate): RN 0.72.3

---------

Co-authored-by: Joshua Yoes <joshua.r.yoes@gmail.com>

* docs(readme): move documentation link higher, update versions

* feat(boilerplate): add in default eas.json for EAS Build

* chore(boilerplate): eas.json updates

* chore: cherry-pick 2e24ef8

* chore: remaining TS strict fixes

* feat(boilerplate): expo TS paths in favor of babel plugin

* fix(demo): podcast list data

* fix(demo): tab icons

* fix(boilerplate): podfile.lock

* overloading Array.filter for the special case of the Boolean constructor

* fix(boilerplate): update reactotron deps, type fixes

* chore: gitignore for flame cli 🔥

* refactor(cli): rework experimental flag for more flexible options

* fix(cli): kebab-case over camelCase for flags

* fix(ReactotronConfig): update to chain

* chore(boilerplate): remove native dirs

* feat(cli): workflow options go/prebuild/manual

* feat(boilerplate): add fabric bool to demo debug screen

* chore(boilerplate): dep updates

* fix(cli): workflow name value mapping

* fix(cli): fix cache issue with tests

* docs(releasing-ignite): fixed package.json snippet to be more accurate

* fix(cli): #2225 remove-demo finds all empty dirs

* fix(boilerplate): #2230

moved assets/icons that only pertain to demo into subdir for removal via remove-demo

* chore(boilerplate): update reactotron deps

* fix(cli): drop improper flag from prebuild

* feat(cli): add prebuild progress message

* fix(boilerplate): removed unnecessary expo deps

* fix(cli): new arch bools before prebuild

* chore: dir clean up, win32 compat

* feat(boilerplate): config plugin scaffolding (#2487 by @frankcalise)

* feat(boilerplate): added `withSplashScreen` config plugin

* docs: updated for local config plugin file structure

* fix(cli): new arch toggle

drop NA question for Expo Go

* docs(readme): add more badges

* docs(readme): remove expo badge

* Update README.md

Co-authored-by: Mazen Chami <mazenchami@gmail.com>

* chore(boilerplate): remove unused overrides

* fix(boilerplate): better new arch support

* chore(boilerplate) Update react-native to 0.72.5 (#2505)

* feat(cli): add bun support (#2497 by @frankcalise @jamonholmgren)

* chore(release): 8.8.7 [skip ci]

## [8.8.7](v8.8.6...v8.8.7) (2023-08-08)

### Bug Fixes

* **cli:** correct cd command when targetPath has changed ([#2488](#2488) by bradherman) ([19a161e](19a161e))

* feat(cli): add bun support

* fix: Specifies version of @expo/webpack-config to avoid dependency failure. (#2502 by @jamonholmgren)

* chore(release): 8.8.8 [skip ci]

## [8.8.8](v8.8.7...v8.8.8) (2023-09-19)

### Bug Fixes

* Specifies version of @expo/webpack-config to avoid dependency failure. ([#2502](#2502) by [@jamonholmgren](https://github.com/jamonholmgren)) ([94ddb85](94ddb85))

* docs: Update README.md -- add Getting Started video link (#2501 by @jamonholmgren)

[skip ci]

* Switch to bun for boilerplate scripts

* Use bun for CI tests

* Bump for ci

* remove demo app

* Bump bun-orb version

* bump bun-orb

* fix: removed ios remnants

merge from main probably

* fix(cli): display bun run command

---------

Co-authored-by: semantic-release-bot <semantic-release-bot@martynus.net>
Co-authored-by: Jamon Holmgren <jamonholmgren@gmail.com>
Co-authored-by: Jamon Holmgren <code@jamon.dev>

* fix(cli): Expo Go compat deps (#2508 by @frankcalise and @markrickert)

* fix(cli): Expo Go compat deps

* feat(tests) Add expo go config changes tests

I also moved around the expo go configuration and `findAndUpdateDependencyVersions()` function so that it would be easier to test.

---------

Co-authored-by: Mark Rickert <mjar81@gmail.com>

* fix(boilerplate): update type import

* fix: ios compiling issue when the user specifies the new architecture (#2517 by @markrickert)

* feat(boilerplate) `@shopify/flash-list` integration and ListView HOC (#2513)

* feat(boilerplate) @shopify/flash-list integration

This integrates @shopify/flash-list in all places where we used to have a FlatList and updates the expo to compatibility object to use the correct expected version while using the latest for expo prebuild and bare workflows.

* fix: ios compiling issue when the user specifies the new architecture

* fix: Get FlashList working in new architecture using interop layer

iOS seems to have problems with flashlist using interop, but android seems to work just fine.

* feat: adds ListView Higher Order Component

Displays a FlashList or FlatList depending on language RTL features. Needs a little more work on the `ref` passing.

* chore: formatting

* refactor(boilerplate): ListView HOC types

* chore(tests) Tests passing after adding new ListView component

* ci: bun version lock

---------

Co-authored-by: Frank Calise <fcalise@gmail.com>

* fix(boilerplate): inherit default metro from expo (#2526 by @frankcalise)

* fix(web): Fixes web implementation (#2528)

There was a problem with the web implementation because we were directly using `DrawerLayout` from `react-native-gesture-handler`. Moving to `Drawer` from `react-native-drawer-layout` (a react-navigation product) mitigates this issue without losing any functionality.

* docs: ir-docs dir structure

* chore(docs): Cleanup

* docs(upgrades): go/prebuild notes

* Align with master

* docs(readme): point to hosted site

* docs(readme): link directly to md for now

* docs: ir-doc release prep

* docs: added cli options

* docs: rework landing for getting started

* ci(ir-docs): orb setup

---------

Co-authored-by: Joshua Yoes <joshua.r.yoes@gmail.com>
Co-authored-by: Mazen Chami <mazenchami@gmail.com>
Co-authored-by: Jamon Holmgren <jamonholmgren@gmail.com>
Co-authored-by: Mark Rickert <139261+markrickert@users.noreply.github.com>
Co-authored-by: semantic-release-bot <semantic-release-bot@martynus.net>
Co-authored-by: Jamon Holmgren <code@jamon.dev>
Co-authored-by: Mark Rickert <mjar81@gmail.com>
@lindboe lindboe mentioned this pull request Aug 7, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@frankcalise frankcalise frankcalise approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@markrickert @frankcalise