TextInput hangs with Samsung keyboard's Grammarly integration
Problem
UPDATE: we have now released patch releases containing fixes for: https://github.com/facebook/react-native/releases/tag/v0.69.10 https://github.com/facebook/react-native/releases/tag/v0.70.9 https://github.com/facebook/react-native/releases/tag/v0.71.7 https://github.com/facebook/react-native/releases/tag/v0.68.7 --- Description There is an issue with React Native's `TextInput` component when using Samsung's keyboard with the Grammarly integration enabled. When typing a text that is longer than a few lines, the app often hangs and becomes unresponsive, leading to a high rate of ANRs and crashes. This issue has already been documented here and here but I'm worried that the lack of a reliable reproducer as well as the noise due to other random freeze and crashes in Android (esp. with the new Android 13 update) is preventing those issues from gaining traction and becoming a high priority. I am therefore creating this new issue focused solely on the impact of the Samsung keyboard's Grammarly integration on the `TextInput` component, with a reliable reproducer, as I believe that something can be done at the `TextInput` level to address it. Here is everything we know so far: - Any React Native app that involves writing long text in a `TextInput` seem to be impacted. - The issue happens with the default Samsung keyboard with the Grammarly integration (aka "Suggest text corrections" aka "Writing assistant") enabled. This integration is now enabled by default with Samsung's
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Patch Samsung Keyboard Grammarly Integration for TextInput Hang Issue
The issue arises from the interaction between the Samsung keyboard's Grammarly integration and the React Native TextInput component. When long text is entered, the Grammarly integration attempts to process and suggest corrections, which can lead to performance bottlenecks and unresponsiveness due to excessive rendering and state updates in the TextInput component.
Awaiting Verification
Be the first to verify this fix
- 1
Update React Native to Latest Version
Ensure your React Native project is updated to the latest stable version that includes patches for known issues. Specifically, upgrade to at least version 0.71.7 to benefit from performance improvements.
bashnpm install react-native@latest - 2
Disable Grammarly Integration
As a temporary workaround, disable the Grammarly integration in the Samsung keyboard settings to mitigate the hanging issue while typing long text. This can be done by navigating to Settings > General Management > Language and Input > On-screen keyboard > Samsung Keyboard > Smart typing > Text corrections.
- 3
Optimize TextInput Component
Implement a debouncing mechanism for the TextInput component to limit the frequency of state updates. This can help reduce the number of renders triggered by the keyboard's suggestions.
typescriptconst [text, setText] = useState(''); const debouncedSetText = useCallback(debounce((value) => setText(value), 300), []); <TextInput onChangeText={debouncedSetText} value={text} /> - 4
Monitor Performance
Use React Native's performance monitoring tools to track the rendering performance of the TextInput component. This will help identify if the changes made have improved responsiveness.
javascriptimport { LogBox } from 'react-native'; LogBox.ignoreLogs(['Warning: ...']); // Ignore specific warnings during testing. - 5
Test on Multiple Devices
Conduct thorough testing on various Samsung devices with different Android versions to ensure that the fix is effective across all impacted environments.
Validation
To confirm the fix worked, test the TextInput component by entering long text while the Samsung keyboard is active. Ensure that the app does not hang or become unresponsive. Monitor for any ANRs or crashes during this process.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep