fix: remove keyboard context

README.md

@@ -23,7 +23,6 @@ We believe this is a better approach than the alternatives:
 
 **Note!** At the moment there exist some parallel solutions, a legacy one which uses react context and a newer one, which we recommend, using hooks (utilizes [zustand](https:/pmndrs/zustand) under the hood). They are:
 
-- `useKeyboardLayout`
 - `useSharedPortalArea`
 - `useSnackbar`
 

src/contexts/index.ts

@@ -1,5 +1,4 @@
 export * from './Auth'
-export * from './Keyboard'
 export * from './SharedPortalArea'
 export * from './Snackbar'
 export * from './Strings'

src/example-app/App.tsx

@@ -11,11 +11,9 @@ import { SafeAreaProvider } from 'react-native-safe-area-context'
 import NativePortal from '../components/NativePortal'
 import DefaultSnackbarComponent from '../components/SnackbarComponent'
 import { StringsProvider } from '../contexts/Strings'
+import { useIsKeyboardShown, useKeyboardHeight, useWillKeyboardBeShown } from '../hooks'
 import useAlert from '../hooks/useAlert'
 import useConfirm from '../hooks/useConfirm'
-import {
- useIsKeyboardShown, useKeyboardHeight, useWillKeyboardBeShown,
-} from '../hooks/useKeyboardLayout'
 import {
  SharedPortalAreaProvider, SharedPortalPresentationArea, useSharedPortalAreaInsets, useSharedPortalAreaSize,
 } from '../hooks/useSharedPortalArea'

src/hooks/index.ts

@@ -8,12 +8,15 @@ export * from './useDebounce'
 export * from './useDecodedToken'
 export * from './useEvent'
 export * from './useInterval'
+export * from './useIsKeyboardShown'
 export * from './useIsLoggedIn'
 export * from './useIsOnline'
 export * from './useIsStandalonePWA'
+export * from './useKeyboardHeight'
 export * from './useNullableState'
 export * from './usePrevious'
 export * from './useRunIfMounted'
 export * from './useTheme'
 export * from './useToggle'
 export * from './useToggleWithHaptics'
+export * from './useWillKeyboardBeShown'

src/hooks/useIsKeyboardShown.ts

@@ -0,0 +1,7 @@
+import useKeyboardLayoutStore from './useKeyboardLayoutStore'
+
+export function useIsKeyboardShown() {
+ return useKeyboardLayoutStore((state) => state.isKeyboardShown)
+}
+
+export default useIsKeyboardShown

src/hooks/useKeyboardHeight.ts

@@ -0,0 +1,9 @@
+import useKeyboardLayoutStore from './useKeyboardLayoutStore'
+
+/**
+ * The height of the keyboard will not be reset to 0 when the keyboard is hidden,
+ * use {@link useIsKeyboardShown} to check if the keyboard is currently shown.
+ */
+export function useKeyboardHeight() {
+ return useKeyboardLayoutStore((state) => state.keyboardHeight)
+}

src/hooks/useKeyboardLayout.tsx → src/hooks/useKeyboardLayoutStore.ts

@@ -16,7 +16,14 @@ interface KeyboardLayoutStore {
  readonly setWillKeyboardBeHidden: () => void
 }
 
-const useKeyboardLayoutStore = create<KeyboardLayoutStore>()(
+/**
+ * This zustand store is used to keep track of the keyboard layout.
+ *
+ * Prefer using the individual hooks
+ * {@link useIsKeyboardShown}, {@link useKeyboardHeight}, {@link useWillKeyboardBeShown}
+ * over this directly.
+ */
+export const useKeyboardLayoutStore = create<KeyboardLayoutStore>()(
  devtools(
  (set) => {
  Keyboard.addListener('keyboardDidShow', (event) => set({
@@ -41,12 +48,4 @@ const useKeyboardLayoutStore = create<KeyboardLayoutStore>()(
  ),
 )
 
-export const useIsKeyboardShown = () => useKeyboardLayoutStore((state) => state.isKeyboardShown)
-
-/**
- * The height of the keyboard will not be reset to 0 when the keyboard is hidden,
- * use {@link useIsKeyboardShown} to check if the keyboard is currently shown.
- */
-export const useKeyboardHeight = () => useKeyboardLayoutStore((state) => state.keyboardHeight)
-
-export const useWillKeyboardBeShown = () => useKeyboardLayoutStore((state) => state.willKeyboardBeShown)
+export default useKeyboardLayoutStore

src/hooks/useWillKeyboardBeShown.ts

@@ -0,0 +1,7 @@
+import useKeyboardLayoutStore from './useKeyboardLayoutStore'
+
+export function useWillKeyboardBeShown() {
+ return useKeyboardLayoutStore((state) => state.willKeyboardBeShown)
+}
+
+export default useWillKeyboardBeShown