KeyboardFocusView

[henry12jack]

KeyboardFocusView does not work for me.
When I was using KeyboardFocusView from react-native-a11y it was working fine, but while trying to migrate to react-native-external-keyboard I am facing some troubles, I just changed the import path to new lib and changed canBeFocused to focusable and it does not work at all.
There is nothing specified how to migrate from a11y to this lib, but it is suggested by the author.

Not working code snippet:

import {View} from "react-native";
import {KeyboardFocusView} from "react-native-external-keyboard";

type DisableKeyboardFocusViewProps = {
    shouldBeDisabledFocus: boolean;
    children?: React.ReactNode;
};

export const DisableKeyboardFocusView = ({
    shouldBeDisabledFocus,
    children,
}: DisableKeyboardFocusViewProps) => {
    return (
        <KeyboardFocusView focusable={!shouldBeDisabledFocus}>
            <View aria-hidden={shouldBeDisabledFocus}>{children}</View>
        </KeyboardFocusView>
    );
};

[ArturKalach]

Hello @henry12jack,

Sorry for the inconvenience. I will check what the problem could be and try to provide a solution.

Unfortunately, it takes a lot of time and resources to improve and test the packages properly, and I have only a limited amount of time to keep them stable.

Thank you for understanding.

Regards,
Artur Kalach

[ArturKalach]

Hello @henry12jack,
Sorry for the wait. Unfortunately, I can only do this in my leisure time, which is really limited.

I hope I have found the problem and the main difference between react-native-external-keyboard and react-native-a11y regarding keyboard focus. But could you specify the platform and provide an example of the code you have inside the 'children'?

It seems that the problem is RN/Native-based, and previously, it worked with an additional container using the accessibility prop. It works fine with interactive components like Pressable and Button, but I found that there could be some problems with, for example, Text.

Could you try adding accessibility to KeyboardFocusView? I am going to create a patch for this, but it would be really helpful if you could let me know whether this helps.

import {View} from "react-native";
import {KeyboardFocusView} from "react-native-external-keyboard";

type DisableKeyboardFocusViewProps = {
    shouldBeDisabledFocus: boolean;
    children?: React.ReactNode;
};

export const DisableKeyboardFocusView = ({
    shouldBeDisabledFocus,
    children,
}: DisableKeyboardFocusViewProps) => {
    return (
        <KeyboardFocusView accessible focusable={!shouldBeDisabledFocus}> // add accessible here
            <View accessible aria-hidden={shouldBeDisabledFocus}>{children}</View> // or even here
        </KeyboardFocusView>
    );
};

I can also share that react-native-external-keyboard and its API are based on react-native-a11y, and we have tried to maintain compatibility between versions. So, you can use KeyboardFocusView as before, just with canBeFocused; it should work the same as in react-native-a11y.

Thank you in advance,
Artur Kalach