Skip to content

Commit

Permalink
fix: remove fuzzy isUsingPhysicalKeyboard flag
Browse files Browse the repository at this point in the history
  • Loading branch information
lordspace74 committed Mar 24, 2023
1 parent 741f205 commit 8ee0737
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 33 deletions.
4 changes: 1 addition & 3 deletions src/example-app/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { StringsProvider } from '../contexts/Strings'
import useAlert from '../hooks/useAlert'
import useConfirm from '../hooks/useConfirm'
import {
useIsKeyboardShown, useIsUsingPhysicalKeyboard, useKeyboardHeight, useWillKeyboardBeShown,
useIsKeyboardShown, useKeyboardHeight, useWillKeyboardBeShown,
} from '../hooks/useKeyboardLayout'
import {
SharedPortalAreaProvider, SharedPortalPresentationArea, useSharedPortalAreaInsets, useSharedPortalAreaSize,
Expand Down Expand Up @@ -44,7 +44,6 @@ const Body: React.FC = () => {
const confirm = useConfirm()

const isKeyboardShown = useIsKeyboardShown()
const isUsingPhysicalKeyboard = useIsUsingPhysicalKeyboard()
const keyboardHeight = useKeyboardHeight()
const willKeyboardBeShown = useWillKeyboardBeShown()

Expand All @@ -70,7 +69,6 @@ const Body: React.FC = () => {
<SafeAreaProvider>
<Column fill padding={16} spaceAround>
<Text>{`isKeyboardShown: ${isKeyboardShown.toString()}`}</Text>
<Text>{`isUsingPhysicalKeyboard: ${isUsingPhysicalKeyboard}`}</Text>
<Text>{`keyboardHeight: ${keyboardHeight}`}</Text>
<Text>{`willKeyboardBeShown: ${willKeyboardBeShown}`}</Text>

Expand Down
31 changes: 1 addition & 30 deletions src/hooks/useKeyboardLayout.tsx
Original file line number Diff line number Diff line change
@@ -1,41 +1,23 @@
import AsyncStorage from '@react-native-async-storage/async-storage'
import { Keyboard, Platform } from 'react-native'
import { Keyboard } from 'react-native'
import { create } from 'zustand'

interface KeyboardLayoutStore {
// these properties are exposes through individual hooks
readonly isKeyboardShown: boolean
readonly isUsingPhysicalKeyboard: boolean
readonly keyboardHeight: number
readonly willKeyboardBeShown: boolean

// modifiers
readonly setKeyboardVisible: () => void
readonly setKeyboardHidden: () => void
readonly setIsUsingPhysicalKeyboard: (value: boolean) => void
readonly setKeyboardHeight: (height: number) => void
readonly setWillKeyboardBeShown: () => void
readonly setWillKeyboardBeHidden: () => void
}

// Setting up a breakpoint value for how small a virtual keyboard could be
// to be able to guess if the user is using an external keyboard.
const MAX_KEYBOARD_HEIGHT_WITH_EXTERNAL_KEYBOARD = 100

const STORAGE_KEY = 'keyboardExternal'

const useKeyboardLayoutStore = create<KeyboardLayoutStore>((set) => {
const init = async () => {
const storedIsKeyboardExternal = await AsyncStorage.getItem(STORAGE_KEY)

set({ isUsingPhysicalKeyboard: storedIsKeyboardExternal ? JSON.parse(storedIsKeyboardExternal) as boolean : false })
}

void init()

Keyboard.addListener('keyboardDidShow', (event) => set({
isKeyboardShown: true,
isUsingPhysicalKeyboard: event.endCoordinates.height < MAX_KEYBOARD_HEIGHT_WITH_EXTERNAL_KEYBOARD,
keyboardHeight: event.endCoordinates.height,
}))
Keyboard.addListener('keyboardDidHide', () => set({ isKeyboardShown: false }))
Expand All @@ -44,19 +26,10 @@ const useKeyboardLayoutStore = create<KeyboardLayoutStore>((set) => {

return {
isKeyboardShown: false,
isUsingPhysicalKeyboard: Platform.OS === 'web',
keyboardHeight: 0,
willKeyboardBeShown: false,
setKeyboardVisible: () => set(() => ({ isKeyboardShown: true })),
setKeyboardHidden: () => set(() => ({ isKeyboardShown: false })),
setIsUsingPhysicalKeyboard: (value) => set((state) => {
if (value !== state.isUsingPhysicalKeyboard) {
void AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(value))
}
return {
isUsingPhysicalKeyboard: value,
}
}),
setKeyboardHeight: (height) => set(() => ({ keyboardHeight: height })),
setWillKeyboardBeShown: () => set(() => ({ willKeyboardBeShown: true })),
setWillKeyboardBeHidden: () => set(() => ({ willKeyboardBeShown: false })),
Expand All @@ -65,8 +38,6 @@ const useKeyboardLayoutStore = create<KeyboardLayoutStore>((set) => {

export const useIsKeyboardShown = () => useKeyboardLayoutStore((state) => state.isKeyboardShown)

export const useIsUsingPhysicalKeyboard = () => useKeyboardLayoutStore((state) => state.isUsingPhysicalKeyboard)

/**
* 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.
Expand Down

0 comments on commit 8ee0737

Please sign in to comment.