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.

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

add currentOrientation(), a new example using hooks & upgrade all examples to expo v38 #83

Open
wants to merge 14 commits into
base: master
Choose a base branch
from

Conversation

gregfenton
Copy link

In trying to get a hooks example going, I ended up doing a fair amount of work I hope others might benefit from:

  • adjusted index.js to support both this and a useState() set function
  • added a new exported function: currentOrientation()
  • added a new example (a clone of example Remove src folder and move index.js in project root level #2) that uses a functional component and React hooks useState & useEffect
  • updated example # 2 & its hook twin (now called example # 3) to display the "current orientation" in the UI
  • all examples upgraded to be expo v38 projects
  • made adjustments to example # 3 (now known as example # 4) to resolve warnings from stylized-components - as of v5 it requires units to be specified on many styles
  • updated all README files to reflect the above

@gregfenton
Copy link
Author

gregfenton commented Aug 13, 2020

One note: in each of the examples' package.json, the dependency for react-native-responsive-screen points to a version using yalc because the examples requires a version that isn't published yet (it is part of this PR...circular dependency).

To engage with this version, you can follow these steps:

  1. Clone the pull request to your machine
    • git clone https://github.com/marudy/react-native-responsive-screen.git
    • cd react-native-responsive-screen
    • git fetch origin pull/83/head
    • git checkout -b pullrequest FETCH_HEAD
  2. Install yalc: npm install yalc (or yarn add yalc)
  3. "Publish" the project locally: yalc publish

Now you are ready to run any of the examples. Let's try the new Hook-based one:

  1. cd examples/responsive-screen-orientation-change-with-hooks
  2. npm install
  3. yalc add react-native-responsive-screen
  4. yalc update react-native-responsive-screen << not sure why this was necessary, but running failed to find the NPM without it
  5. npm run ios
  6. Dance a little dance! 🕺

@gregfenton
Copy link
Author

If not obvious (it is quite a large PR), the likely controversial parts of this are:

  1. Move to use of Expo. The thinking here is that if it works with Expo, then it works with React Native. The converse is not necessarily true. And with Expo there are far less "moving parts" for simply getting up and running.

  2. The method signature of listenOrientationChange has changed, forcing the developer to identify whether they are passing in a class component's "this", or a functional component's "set" method from a call to useState() -- though the code does not enforce that function be a useState() function, so you could pass in any type of function.

@herenickname
Copy link

Can I use your fork in a production?

@gregfenton
Copy link
Author

It is warranted for its full price 🙂

I am using it in production.

Copy link

@Stevemoretz Stevemoretz left a comment

Choose a reason for hiding this comment

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

Would you mind accepting this?

@Yhozen
Copy link

Yhozen commented Jul 6, 2021

@gregfenton you could as well add hook support to currentOrientation, I can help if you'd like

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants