Merge pull request #62 from ArturKalach/release/0.5.2

Release/0.5.2

Author: ArturKalach

README.md

@@ -76,7 +76,8 @@ onPress?: | Default `onPress` or keyboard-handled `onPress` | `((event: GestureR
 onLongPress?: | Default `onLongPress` or keyboard-handled `onLongPress` (`Tab+M` for iOS). | `((event: GestureResponderEvent) => void) \| null \| undefined`
 onPressIn:? | Default `onPressIn` or keyboard-handled `onPressIn` | `((event: GestureResponderEvent) => void) \| null \| undefined`
 onPressOut:? | Default `onPressOut` or keyboard-handled `onPressOut` | `((event: GestureResponderEvent) => void) \| null \| undefined`
-style?: | Style for the inner component | `StyleProp<ViewStyle>`
+style?: | Styles the inner component | `StyleProp<ViewStyle>; for Pressable: PressableProps['style']`
+withPressedStyle?: | Enables the pressed style handler for custom components; always true for the standard Pressable. | `boolean \| undefined`, false by default
 focusStyle?: | Style applied to the inner component when focused | `FocusStyle`
 containerStyle?: | Style for the container | StyleProp<ViewStyle>;
 containerFocusStyle?: | Style applied to the container when focused | `FocusStyle`

example/ios/Podfile.lock

@@ -1242,7 +1242,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - react-native-external-keyboard (0.5.0-rc8):
+  - react-native-external-keyboard (0.5.1):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1913,7 +1913,7 @@ SPEC CHECKSUMS:
   React-logger: 697873f06b8ba436e3cddf28018ab4741e8071b6
   React-Mapbuffer: c174e11bdea12dce07df8669d6c0dc97eb0c7706
   React-microtasksnativemodule: 8a80099ad7391f4e13a48b12796d96680f120dc6
-  react-native-external-keyboard: beb38ae41622036b36c8b7317416d3891434053d
+  react-native-external-keyboard: cab5e7d0e6b274e1ba7b5f67bddc51629f8ad18c
   react-native-safe-area-context: cbadf383376f589bb611c8ae0280c1d4b7b447e9
   React-nativeconfig: f7ab6c152e780b99a8c17448f2d99cf5f69a2311
   React-NativeModulesApple: 70600f7edfc2c2a01e39ab13a20fd59f4c60df0b

example/src/components/ComponentsExample/ComponentsExample.tsx

@@ -105,7 +105,7 @@ export const ComponentsExample = forwardRef<KeyboardFocus, {}>((_, ref) => {
             </View>
           </TouchableWithoutFeedback>
           <Pressable
-            // autoFocus
+            autoFocus
             containerStyle={styles.pressableContainer}
             style={styles.pressable as object} //ToDo updat type
             onPress={() => modalButtonRef.current?.focus()}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-external-keyboard",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Toolkit for improving physical keyboard support in React Native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

src/utils/useFocusStyle.tsx

@@ -1,5 +1,10 @@
 import { useState, useMemo, useCallback } from 'react';
-import { Platform, type ColorValue } from 'react-native';
+import {
+  Platform,
+  type ColorValue,
+  type PressableProps,
+  Pressable,
+} from 'react-native';
 import type { FocusStyle } from '../types';
 import type { TintType } from '../types/WithKeyboardFocus';
 
@@ -21,6 +26,9 @@ type UseFocusStyleProps = {
   onFocusChange?: (isFocused: boolean) => void;
   tintColor?: ColorValue;
   tintType?: TintType;
+  style?: PressableProps['style'];
+  Component?: React.ComponentType;
+  withPressedStyle?: boolean;
 };
 
 export const useFocusStyle = ({
@@ -29,6 +37,9 @@ export const useFocusStyle = ({
   containerFocusStyle,
   tintColor,
   tintType = 'default',
+  style,
+  Component,
+  withPressedStyle = false,
 }: UseFocusStyleProps) => {
   const [focused, setFocusStatus] = useState(false);
 
@@ -69,7 +80,28 @@ export const useFocusStyle = ({
     return focused ? specificStyle : undefined;
   }, [containerFocusStyle, focused, tintColor, tintType]);
 
+  const dafaultComponentStyle = useMemo(
+    () => [style, componentFocusedStyle],
+    [style, componentFocusedStyle]
+  );
+  const styleHandlerPressable = useCallback(
+    ({ pressed }: { pressed: boolean }) => {
+      if (typeof style === 'function') {
+        return [style({ pressed }), componentFocusedStyle];
+      } else {
+        return [style, componentFocusedStyle];
+      }
+    },
+    [componentFocusedStyle, style]
+  );
+
+  const componentStyleViewStyle =
+    Component === Pressable || withPressedStyle
+      ? styleHandlerPressable
+      : dafaultComponentStyle;
+
   return {
+    componentStyleViewStyle,
     componentFocusedStyle,
     containerFocusedStyle,
     onFocusChangeHandler,

src/utils/withKeyboardFocus.tsx

@@ -1,5 +1,11 @@
 import React, { useCallback, useMemo } from 'react';
-import { View, type StyleProp, type ViewStyle, StyleSheet } from 'react-native';
+import {
+  View,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+  type PressableProps,
+} from 'react-native';
 import { BaseKeyboardView } from '../components';
 import type { FocusStyle, KeyboardFocusViewProps } from '../types';
 import type { KeyboardFocus, OnKeyPress } from '../types/BaseKeyboardView';
@@ -31,11 +37,13 @@ export const withKeyboardFocus = <K, T>(
         onPressIn?: K | ((e?: OnKeyPress) => void);
         onPressOut?: K | ((e?: OnKeyPress) => void);
         disabled?: boolean;
-      } & Omit<KeyboardFocusViewProps, 'onPress' | 'onLongPress'> & {
+        withPressedStyle?: boolean;
+      } & Omit<KeyboardFocusViewProps, 'onPress' | 'onLongPress' | 'style'> & {
           containerStyle?: StyleProp<ViewStyle>;
           containerFocusStyle?: FocusStyle;
           tintType?: TintType;
           FocusHoverComponent?: RenderProp;
+          style?: PressableProps['style'];
         }
     >(
       (
@@ -66,14 +74,15 @@ export const withKeyboardFocus = <K, T>(
           haloExpendX,
           haloExpendY,
           groupIdentifier,
+          withPressedStyle = false,
           ...props
         },
         ref
       ) => {
         const {
           focused,
           containerFocusedStyle,
-          componentFocusedStyle,
+          componentStyleViewStyle,
           onFocusChangeHandler,
           hoverColor,
         } = useFocusStyle({
@@ -82,6 +91,9 @@ export const withKeyboardFocus = <K, T>(
           focusStyle,
           containerFocusStyle,
           tintType,
+          style,
+          withPressedStyle,
+          Component,
         });
 
         const withHaloEffect = tintType === 'default' && haloEffect;
@@ -135,7 +147,7 @@ export const withKeyboardFocus = <K, T>(
               groupIdentifier={groupIdentifier}
             >
               <Component
-                style={[style, componentFocusedStyle]}
+                style={componentStyleViewStyle}
                 onPress={onPressHandler as T}
                 onLongPress={onLongPress as T}
                 onPressIn={onPressIn as K}