Taking a look at this line it seems like all of actions in IME_MASK_ACTION trigger the submit event. I’d like to override this behaviour to make the IME_ACTION_PREVIOUS action work as a "back" button and dismiss the keyboard.
Does anybody know if this is possible? I managed to get my desired behaviour by directly modifying the file inside node_modules, but would like any way to override it from my project. I’m considering patching the package, but not sure if this is the best way.
Working on [email protected]
2
Answers
Modifying files directly within ‘node_modules’ is generally not recommended as it can cause issues with future updates and break your code when the underlying package is updated. It’s better to find a way to override the behavior from your project.
Here are some ways you can achieve the desired behavior of making ‘IME_ACTION_PREVIOUS’ act as a "back" button and dismiss the keyboard in your React Native tvOS app using ‘[email protected]’:
You can attach an ‘onEndEditing’ prop to your TextInput component. This prop gets called when the user finishes editing the text and the keyboard is about to be dismissed. Inside the ‘onEndEditing’ function, you can check the ‘event.nativeEvent.action’ property. If it’s ‘IME_ACTION_PREVIOUS’, you can manually dismiss the keyboard and navigate back using ‘Keyboard.dismiss()’ and ‘Navigation.pop()’.
JavaScript:
You can create a custom TextInput component that wraps the native TextInput and intercepts the onKeyPress event. In the onKeyPress handler, you can check for the key code being ‘Escape’ (which corresponds to the "back" button on tvOS) and handle it similarly to the onEndEditing approach by dismissing the keyboard and navigating back.
JavaScript
Using Third-Party Libraries:
Some third-party libraries like ‘react-native-keyboard-manager’ or ‘react-native-ime-action’ provide more fine-grained control over the keyboard and IME actions. These libraries might offer dedicated hooks or props for handling specific IME actions like ‘IME_ACTION_PREVIOUS’.
Consider Patching the Package as a Last Resort:
If none of the above solutions work for your specific case, you can consider patching the react-native-tvos package to override the default behavior of IME_MASK_ACTION. However, this is a more complex approach.
Create a new file, e.g., CustomTextInput.js, within your React Native project.
Import necessary components:
JavaScript
In the handleReturnPress function, implement your desired behavior for the "return" key press. You can:
i) Dismiss the keyboard using AppleTV.dismissKeyboard().
ii) Submit a form using your app’s logic.
iii) Perform any other custom actions.
In your component where you currently use the TextInput component from react-native-tvos, replace it with your custom CustomTextInput:
JavaScript
Hope this helps!