Fix non selectable Text in FlatList (#28952)

Summary:
This issue fixes https://github.com/facebook/react-native/issues/26264 fixes https://github.com/facebook/react-native/issues/27107
Text is not selectable inside a FlatList on Android. The solution is to invalidate the ReactTextView after a change of the selectable prop. If the view is visible, onDraw(android.graphics.Canvas) will be called at some point in the future and make the Text selectable.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[Android] [Fixed] - Fix non selectable Text in FlatList

Pull Request resolved: https://github.com/facebook/react-native/pull/28952

Test Plan:
**<details><summary>CLICK TO OPEN TESTS RESULTS</summary>**
<p>

The issue was demonstrated in the following [snack](https://snack.expo.io/fabrizio.bertoglio/selectable-bug-in-flatlist) (more info in issue https://github.com/facebook/react-native/issues/26264).

The solution is:

1) Calling `invalidate()` from [setSelectableText][1] after changing the `selectable` prop and `mSelectableText` value. [`invalidate()`](https://developer.android.com/reference/android/view/View#invalidate()) triggers the `onDraw` callback.

[1]: https://github.com/fabriziobertoglio1987/react-native/blob/8027524947cafd5cbdc492e4ef9c92b346fe23fc/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextView.java#L427-L430

2) calling `setTextIsSelectable(mSelectableText);` from the [`onDraw`][2] callback

[2]: https://github.com/fabriziobertoglio1987/react-native/blob/8027524947cafd5cbdc492e4ef9c92b346fe23fc/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextView.java#L456-L460

The example below is availabe in RNTester FlatList example. Two options (`onPressDisabled` and `textSelectable`) have been added to test the functionality inside a FlatList.

<p align="center">
<img src="https://user-images.githubusercontent.com/24992535/82672536-c2e74d80-9c40-11ea-8fd8-156bfacfac8a.gif" width="200" height="" />
</p>

</p>
</details>

Reviewed By: ShikaSD

Differential Revision: D30000870

Pulled By: lunaleaps

fbshipit-source-id: 4851a294960df0af057d006793aa9ba97c51e3f9
This commit is contained in:
fabriziobertoglio1987
2021-09-01 15:28:30 -07:00
committed by Facebook GitHub Bot
parent e2e39808d3
commit c360b1d92b
3 changed files with 33 additions and 2 deletions
@@ -56,6 +56,7 @@ public class ReactTextView extends AppCompatTextView implements ReactCompoundVie
private boolean mAdjustsFontSizeToFit = false;
private int mLinkifyMaskType = 0;
private boolean mNotifyOnInlineViewLayout;
private boolean mTextIsSelectable = false;
private ReactViewBackgroundManager mReactBackgroundManager;
private Spannable mSpanned;
@@ -433,9 +434,16 @@ public class ReactTextView extends AppCompatTextView implements ReactCompoundVie
}
}
@Override
public void setTextIsSelectable(boolean selectable) {
mTextIsSelectable = selectable;
super.setTextIsSelectable(selectable);
}
@Override
public void onAttachedToWindow() {
super.onAttachedToWindow();
setTextIsSelectable(mTextIsSelectable);
if (mContainsImages && getText() instanceof Spanned) {
Spanned text = (Spanned) getText();
TextInlineImageSpan[] spans = text.getSpans(0, text.length(), TextInlineImageSpan.class);