react-native-external-keyboard 0.1.0

package/src/components/Pressable/Pressable.ios.tsx

@@ -0,0 +1,282 @@
+import React, { useMemo, useState, useRef, useImperativeHandle } from 'react';
+import type { GestureResponderEvent, PressableProps, View } from 'react-native';
+
+// @ts-ignore: import from origin pressable
+import { normalizeRect } from 'react-native/Libraries/StyleSheet/Rect';
+// @ts-ignore: import from origin pressable
+import usePressability from 'react-native/Libraries/Pressability/usePressability';
+// @ts-ignore: import from origin pressable
+import useAndroidRippleForView from 'react-native/Libraries/Components/Pressable/useAndroidRippleForView';
+
+import { KeyboardFocusView } from '../KeyboardFocusView';
+import type { OnKeyPressFn, KeyboardFocusViewProps } from '../../types';
+
+export type SyntheticEvent<T> = {
+  bubbles?: boolean;
+  cancelable?: boolean;
+  currentTarget: number | unknown;
+  defaultPrevented?: boolean;
+  dispatchConfig: {
+    registrationName: string;
+  };
+  eventPhase?: number;
+  preventDefault: () => void;
+  isDefaultPrevented: () => boolean;
+  stopPropagation: () => void;
+  isPropagationStopped: () => boolean;
+  isTrusted?: boolean;
+  nativeEvent: T;
+  persist: () => void;
+  target?: number | unknown;
+  timeStamp: number;
+  type?: string;
+};
+
+export type ResponderSyntheticEvent<T> = SyntheticEvent<T> & {
+  touchHistory: {
+    indexOfSingleActiveTouch: number;
+    mostRecentTimeStamp: number;
+    numberActiveTouches: number;
+    touchBank: Array<{
+      touchActive: boolean;
+      startPageX: number;
+      startPageY: number;
+      startTimeStamp: number;
+      currentPageX: number;
+      currentPageY: number;
+      currentTimeStamp: number;
+      previousPageX: number;
+      previousPageY: number;
+      previousTimeStamp: number;
+    }>;
+  };
+};
+
+export type PressEvent = ResponderSyntheticEvent<{
+  force?: number;
+  identifier: number;
+  locationX: number;
+  locationY: number;
+  pageX: number;
+  pageY: number;
+  target?: number;
+  timestamp: number;
+}>;
+
+type CombinedPressEvent = GestureResponderEvent | PressEvent;
+
+type NAProps = {
+  'onPressOut': (event: CombinedPressEvent) => void;
+  'onPressIn': (event: CombinedPressEvent) => void;
+  'aria-live'?: 'polite' | 'assertive' | 'off';
+  'aria-busy'?: boolean;
+  'aria-checked'?: boolean;
+  'aria-disabled'?: boolean;
+  'aria-expanded'?: boolean;
+  'aria-label'?: string;
+  'aria-selected'?: boolean;
+  'aria-valuemax'?: number;
+  'aria-valuemin'?: number;
+  'aria-valuenow'?: number;
+  'aria-modal'?: boolean;
+  'aria-valuetext'?: string;
+};
+
+type Props = PressableProps &
+  NAProps &
+  KeyboardFocusViewProps & {
+    unstable_pressDelay?: number;
+    delayHoverIn: unknown;
+    delayHoverOut: unknown;
+    onHoverIn: unknown;
+    onHoverOut: unknown;
+  };
+
+const IOS_SPACE_KEY_CODE = 44;
+
+export const Pressable = React.memo(
+  React.forwardRef<View, Props>((props: Props, forwardedRef) => {
+    const {
+      accessibilityState,
+      'aria-live': ariaLive,
+      android_disableSound,
+      android_ripple,
+      'aria-busy': ariaBusy,
+      'aria-checked': ariaChecked,
+      'aria-disabled': ariaDisabled,
+      'aria-expanded': ariaExpanded,
+      'aria-label': ariaLabel,
+      'aria-selected': ariaSelected,
+      cancelable,
+      children,
+      delayHoverIn,
+      delayHoverOut,
+      delayLongPress,
+      disabled,
+      focusable,
+      onHoverIn,
+      onHoverOut,
+      onLongPress,
+      onPress,
+      onPressIn,
+      onPressOut,
+      pressRetentionOffset,
+      style,
+      testOnly_pressed,
+      unstable_pressDelay,
+      canBeFocused,
+      onFocusChange,
+      ...restProps
+    } = props;
+
+    const viewRef = useRef<View>(null);
+    useImperativeHandle(forwardedRef, () => viewRef.current as View);
+
+    const hitSlop = normalizeRect(restProps?.hitSlop);
+
+    const android_rippleConfig = useAndroidRippleForView(
+      android_ripple,
+      viewRef
+    );
+
+    const [pressed, setPressed] = usePressState(testOnly_pressed === true);
+
+    let _accessibilityState = {
+      busy: ariaBusy ?? accessibilityState?.busy,
+      checked: ariaChecked ?? accessibilityState?.checked,
+      disabled: ariaDisabled ?? accessibilityState?.disabled,
+      expanded: ariaExpanded ?? accessibilityState?.expanded,
+      selected: ariaSelected ?? accessibilityState?.selected,
+    };
+
+    _accessibilityState =
+      disabled != null
+        ? { ..._accessibilityState, disabled }
+        : _accessibilityState;
+
+    const accessibilityValue = {
+      max: props['aria-valuemax'] ?? props.accessibilityValue?.max,
+      min: props['aria-valuemin'] ?? props.accessibilityValue?.min,
+      now: props['aria-valuenow'] ?? props.accessibilityValue?.now,
+      text: props['aria-valuetext'] ?? props.accessibilityValue?.text,
+    };
+
+    const accessibilityLiveRegion =
+      ariaLive === 'off' ? 'none' : ariaLive ?? props.accessibilityLiveRegion;
+
+    const accessibilityLabel = ariaLabel ?? props.accessibilityLabel;
+    const restPropsWithDefaults = {
+      ...restProps,
+      ...android_rippleConfig?.viewProps,
+      accessibilityState: _accessibilityState,
+      accessibilityValue,
+      accessibilityViewIsModal:
+        restProps['aria-modal'] ?? restProps.accessibilityViewIsModal,
+      accessibilityLiveRegion,
+      accessibilityLabel,
+      focusable: focusable !== false,
+      hitSlop,
+    };
+
+    const config = useMemo(
+      () => ({
+        cancelable,
+        disabled,
+        hitSlop,
+        pressRectOffset: pressRetentionOffset,
+        android_disableSound,
+        delayHoverIn,
+        delayHoverOut,
+        delayLongPress,
+        delayPressIn: unstable_pressDelay,
+        onHoverIn,
+        onHoverOut,
+        onLongPress,
+        onPress,
+        onPressIn(event: GestureResponderEvent | PressEvent): void {
+          if (android_rippleConfig != null) {
+            android_rippleConfig.onPressIn(event);
+          }
+          setPressed(true);
+          if (onPressIn != null) {
+            onPressIn(event);
+          }
+        },
+        onPressMove: android_rippleConfig?.onPressMove,
+        onPressOut(event: GestureResponderEvent | PressEvent): void {
+          if (android_rippleConfig != null) {
+            android_rippleConfig.onPressOut(event);
+          }
+          setPressed(false);
+          if (onPressOut != null) {
+            onPressOut(event);
+          }
+        },
+      }),
+      [
+        android_disableSound,
+        android_rippleConfig,
+        cancelable,
+        delayHoverIn,
+        delayHoverOut,
+        delayLongPress,
+        disabled,
+        hitSlop,
+        onHoverIn,
+        onHoverOut,
+        onLongPress,
+        onPress,
+        onPressIn,
+        onPressOut,
+        pressRetentionOffset,
+        setPressed,
+        unstable_pressDelay,
+      ]
+    );
+    const eventHandlers = usePressability(config);
+
+    const onKeyUpPress = React.useCallback<OnKeyPressFn>(
+      (e) => {
+        if (e.nativeEvent.keyCode === IOS_SPACE_KEY_CODE) {
+          onPressOut(e as unknown as GestureResponderEvent);
+          if (e.nativeEvent.isLongPress) {
+            onLongPress?.(e);
+          } else {
+            onPress?.(e);
+          }
+        }
+      },
+      [onLongPress, onPress, onPressOut]
+    );
+
+    const onKeyDownPress = React.useCallback<OnKeyPressFn>(
+      (e) => {
+        if (e.nativeEvent.keyCode === IOS_SPACE_KEY_CODE) {
+          onPressIn(e as unknown as GestureResponderEvent);
+        }
+      },
+      [onPressIn]
+    );
+
+    return (
+      <KeyboardFocusView
+        {...restPropsWithDefaults}
+        {...eventHandlers}
+        canBeFocused={canBeFocused}
+        onFocusChange={onFocusChange}
+        onKeyUpPress={onKeyUpPress}
+        onKeyDownPress={onKeyDownPress}
+        ref={viewRef}
+        style={typeof style === 'function' ? style({ pressed }) : style}
+        collapsable={false}
+      >
+        {typeof children === 'function' ? children({ pressed }) : children}
+      </KeyboardFocusView>
+    );
+  })
+);
+
+function usePressState(forcePressed: boolean): [boolean, (v: boolean) => void] {
+  const [pressed, setPressed] = useState(false);
+  return [pressed || forcePressed, setPressed];
+}

package/src/components/Pressable/index.ts

@@ -0,0 +1 @@
+export { Pressable } from './Pressable';

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export { KeyboardFocusView } from './KeyboardFocusView';
+export { Pressable } from './Pressable';

package/src/index.tsx

@@ -0,0 +1,5 @@
+export { A11yKeyboardModule } from './NativeModules';
+export { ExternalKeyboardView, KeyPress } from './nativeSpec';
+
+export { KeyboardFocusView, Pressable } from './components';
+export { A11yModule } from './services';

package/src/nativeSpec/ExternalKeyboardViewNativeComponent.ts

@@ -0,0 +1,37 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps } from 'react-native';
+import type {
+  BubblingEventHandler,
+  Int32,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+export type FocusChange = Readonly<{
+  isFocused: boolean;
+}>;
+
+export type EnterPress = Readonly<{
+  isShiftPressed: boolean;
+  isAltPressed: boolean;
+  isEnterPress: boolean;
+}>;
+
+export type KeyPress = Readonly<{
+  keyCode: Int32;
+  isLongPress: boolean;
+  isAltPressed: boolean;
+  isShiftPressed: boolean;
+  isCtrlPressed: boolean;
+  isCapsLockOn: boolean;
+  hasNoModifiers: boolean;
+}>;
+
+export interface ExternalKeyboardNativeProps extends ViewProps {
+  onFocusChange?: BubblingEventHandler<FocusChange>;
+  onKeyUpPress?: BubblingEventHandler<KeyPress>;
+  onKeyDownPress?: BubblingEventHandler<KeyPress>;
+  canBeFocused?: boolean;
+}
+
+export default codegenNativeComponent<ExternalKeyboardNativeProps>(
+  'ExternalKeyboardView'
+);

package/src/nativeSpec/NativeKeyboardModule.ts

@@ -0,0 +1,9 @@
+import type { TurboModule } from 'react-native';
+import { TurboModuleRegistry } from 'react-native';
+
+export interface Spec extends TurboModule {
+  setKeyboardFocus: (nativeTag: number, nextTag: number) => void;
+  setPreferredKeyboardFocus: (nativeTag: number, nextTag: number) => void;
+}
+
+export default TurboModuleRegistry.get<Spec>('A11yKeyboardModule');

package/src/nativeSpec/index.ts

@@ -0,0 +1,6 @@
+import ExternalKeyboardView from './ExternalKeyboardViewNativeComponent';
+import NativeKeyboardModule from './NativeKeyboardModule';
+
+import type { KeyPress } from './ExternalKeyboardViewNativeComponent';
+
+export { ExternalKeyboardView, NativeKeyboardModule, KeyPress };

package/src/services/A11yModule/A11yModule.android.ts

@@ -0,0 +1,20 @@
+import type React from 'react';
+import { findNodeHandle, InteractionManager } from 'react-native';
+import type { IA11yModule } from './A11yModule.types';
+
+import { A11yKeyboardModule } from '../../NativeModules';
+
+class A11yAndroidImpl implements IA11yModule {
+  setKeyboardFocus(ref: React.RefObject<React.Component>) {
+    const tag = findNodeHandle(ref.current);
+    if (tag) {
+      InteractionManager.runAfterInteractions(() => {
+        A11yKeyboardModule.setKeyboardFocus(tag);
+      });
+    }
+  }
+
+  setPreferredKeyboardFocus = () => {};
+}
+
+export const A11yModule = new A11yAndroidImpl();

package/src/services/A11yModule/A11yModule.d.ts

@@ -0,0 +1,3 @@
+import { IA11yModule } from './A11yModule.types';
+
+declare const A11yModule: IA11yModule;

package/src/services/A11yModule/A11yModule.ios.ts

@@ -0,0 +1,33 @@
+import { findNodeHandle } from 'react-native';
+
+import type { IA11yModule, RefObjType } from './A11yModule.types';
+import { A11yKeyboardModule } from '../../NativeModules';
+
+class A11yModuleIOSImpl implements IA11yModule {
+  private _currentFocusedTag: number | null = null;
+
+  set currentFocusedTag(value: number) {
+    this._currentFocusedTag = value;
+  }
+
+  setPreferredKeyboardFocus = (tag: number, targetTag: number) => {
+    if (Number.isInteger(tag) && Number.isInteger(targetTag)) {
+      A11yKeyboardModule.setPreferredKeyboardFocus(tag, targetTag);
+    }
+  };
+
+  setKeyboardFocus = (ref: RefObjType) => {
+    const tag = findNodeHandle(ref.current);
+
+    if (
+      this._currentFocusedTag &&
+      tag &&
+      Number.isInteger(this._currentFocusedTag) &&
+      Number.isInteger(tag)
+    ) {
+      A11yKeyboardModule.setKeyboardFocus(this._currentFocusedTag, tag);
+    }
+  };
+}
+
+export const A11yModule = new A11yModuleIOSImpl();

package/src/services/A11yModule/A11yModule.types.ts

@@ -0,0 +1,15 @@
+import type { RefObject } from 'react';
+
+export type A11yNativeModule = {
+  setKeyboardFocus: (nativeTag: number, nextTag?: number) => void;
+  setPreferredKeyboardFocus: (nativeTag: number, nextTag: number) => void;
+};
+
+export type RefObjType = RefObject<React.Component<{}, {}, unknown>>;
+
+export interface IA11yModule {
+  currentFocusedTag?: number;
+
+  setPreferredKeyboardFocus: (nativeTag: number, nextTag: number) => void;
+  setKeyboardFocus: (ref: RefObjType) => void;
+}

package/src/services/A11yModule/index.ts

@@ -0,0 +1 @@
+export { A11yModule } from './A11yModule';

package/src/services/index.ts

@@ -0,0 +1 @@
+export { A11yModule } from './A11yModule';

package/src/types/FocusStyle.ts

@@ -0,0 +1,10 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export type FocusStateCallbackType = {
+  readonly focused: boolean;
+};
+
+export type FocusStyle =
+  | StyleProp<ViewStyle>
+  | ((state: FocusStateCallbackType) => StyleProp<ViewStyle>)
+  | undefined;

package/src/types/KeyboardFocusView.types.ts

@@ -0,0 +1,43 @@
+import type { GestureResponderEvent } from 'react-native';
+
+import type { NativeSyntheticEvent, ViewProps } from 'react-native';
+import type { FocusStyle } from './FocusStyle';
+
+export type KeyboardFocusEvent = NativeSyntheticEvent<{
+  isFocused: boolean;
+}>;
+
+export type OnKeyPress = NativeSyntheticEvent<{
+  keyCode: number;
+  isLongPress: boolean;
+  isAltPressed: boolean;
+  isShiftPressed: boolean;
+  isCtrlPressed: boolean;
+  isCapsLockOn: boolean;
+  hasNoModifiers: boolean;
+}>;
+
+export type OnKeyPressFn = (e: OnKeyPress) => void;
+export type OnFocusChangeFn = (e: KeyboardFocusEvent) => void;
+
+export type FocusWrapperProps = ViewProps & {
+  onFocusChange?: OnFocusChangeFn;
+  onKeyUpPress?: OnKeyPressFn;
+  onKeyDownPress?: OnKeyPressFn;
+  canBeFocused?: boolean;
+};
+
+export type FocusStateCallbackType = {
+  readonly focused: boolean;
+};
+
+export type KeyboardFocusViewProps = FocusWrapperProps & {
+  focusStyle?: FocusStyle;
+  onPress?: (e: GestureResponderEvent | OnKeyPress) => void;
+  onLongPress?: (e: GestureResponderEvent | OnKeyPress) => void;
+
+  /**
+   * @platform android
+   */
+  withView?: boolean;
+};

package/src/types/index.ts

@@ -0,0 +1,6 @@
+export {
+  KeyboardFocusViewProps,
+  OnFocusChangeFn,
+  OnKeyPressFn,
+} from './KeyboardFocusView.types';
+export { FocusStateCallbackType, FocusStyle } from './FocusStyle';