refactor: use the official useWindowDimensions hook

[LuisRodriguezLD]

📜 Description

React Native has an official useWindowDimensions hook, this PR updates the hooks to use it instead.
https://reactnative.dev/docs/usewindowdimensions

💡 Motivation and Context

The problem with the current custom solution is that it may contain stale window dimensions creating unwanted side effects when rotating devices on complex layouts

📢 Changelog

• Remove custom useWindowDimensions hook
• Replace custom hook with the official hook which has an identical signature

🤔 How Has This Been Tested?

The jest tests already use the official hook

📝 Checklist

• CI successfully passed
• I added new mocks and corresponding unit-tests if library API was changed

[kirillzyusko]

Hey @LuisRodriguezLD

There was a motivation behind building a custom hook in particular:

• feat: own useWindowDimensions hook #468
• fix: wrong useWindowDimensions on iPad #957

Even though these issues could be fixed in react-native, at the moment I support multiple RN versions and such update may introduce new issues for existing library users.

What is the problem with rotation do you experience? I'm pretty sure I can fix it in the lib itself 🤞

[LuisRodriguezLD]

@kirillzyusko, thanks for responding.
In my case not the full screen is scrollable and I'm using a SectionList:

<FixedComponent/>
<SectionList scrollComponent=(props => <KeyboardAwareScrollView {...props] />
<FixedComponent/>

The first time works fine (either portrait or landscape) but if I rotate the device then the hook reuses the same dimensions which causes either incorrect scroll (if going from landscape to portrait) or no scroll at all (if going from portrait to landscape)

I created a patchfile which uses the official hook and it worked as expected instantly.

diff --git a/node_modules/react-native-keyboard-controller/src/hooks/index.ts b/node_modules/react-native-keyboard-controller/src/hooks/index.ts
index 1234567..abcdefg 100644
--- a/node_modules/react-native-keyboard-controller/src/hooks/index.ts
+++ b/node_modules/react-native-keyboard-controller/src/hooks/index.ts
@@ -292,5 +292,5 @@
   }, deps);
 }

-export * from "./useWindowDimensions";
+export { useWindowDimensions } from "react-native";
 export * from "./useKeyboardState";

[Let me know if you prefer a ticket instead]