useScreenOrientation - React Native Snippet

• react-native-orientation-locker

  1 731 5.6 JavaScript

  A react-native module that can listen on orientation changing of device, get current orientation, lock to preferred orientation.

Below I set up a useEffect that only fires once because it has no dependencies and then set up two listeners, one for iOS that uses react-native-orientation-locker and another for Android that uses the dimensions event listener from React Native itself (Don't forget to remove the listeners when the hook is destroyed). Basically, then on a screen orientation change we set the state to the correct OrientationType(PORTRAIT, PORTRAIT-UPSIDEDOWN, LANDSCAPE-LEFT, LANDSCAPE-RIGHT). For Android we just check the height against the width to discern whether it's in portrait or landscape. Of course, if when you read this, that react-native-orientation-locker is working consistently for Android then you won't need any of this specific Android code.

• react-singleton-hook

  3 231 0.0 JavaScript

  Create singleton hook from regular react hook

Step 1 Let's set up a basic hook with react-singleton-hook that we can expand on in the next step. The reason we only want a single hook at any one time, is so we don't have multiple listeners listening to changes. For example, if again you are using React Navigation and you push onto the stack three screens, each of those screens could have set up listeners and be setting state, even when they aren't visible.

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

Suggest a related project