Fix alt text selection in lightbox on Android (and iOS) (#10698)
Co-authored-by: Eric Bailey <git@esb.lol>
This commit is contained in:
@@ -1,11 +1,5 @@
|
|||||||
import {useRef} from 'react'
|
import {useRef} from 'react'
|
||||||
import {
|
import {LayoutAnimation, ScrollView, StyleSheet, View} from 'react-native'
|
||||||
LayoutAnimation,
|
|
||||||
Pressable,
|
|
||||||
ScrollView,
|
|
||||||
StyleSheet,
|
|
||||||
View,
|
|
||||||
} from 'react-native'
|
|
||||||
import {useSafeAreaInsets} from 'react-native-safe-area-context'
|
import {useSafeAreaInsets} from 'react-native-safe-area-context'
|
||||||
import {BlurView} from 'expo-blur'
|
import {BlurView} from 'expo-blur'
|
||||||
import {useLingui} from '@lingui/react/macro'
|
import {useLingui} from '@lingui/react/macro'
|
||||||
@@ -60,26 +54,41 @@ export function Footer({altText, isAltExpanded, onToggleAltExpanded}: Props) {
|
|||||||
isMomentumScrolling.current = false
|
isMomentumScrolling.current = false
|
||||||
}}
|
}}
|
||||||
contentContainerStyle={[a.px_md, a.py_sm]}>
|
contentContainerStyle={[a.px_md, a.py_sm]}>
|
||||||
<Pressable
|
<View
|
||||||
accessibilityRole="button"
|
accessibilityRole="button"
|
||||||
accessibilityLabel={l`Expand alt text`}
|
accessibilityLabel={l`Expand alt text`}
|
||||||
accessibilityHint=""
|
accessibilityHint="">
|
||||||
onPress={() => {
|
{/*
|
||||||
if (isMomentumScrolling.current) return
|
* The press handlers must live on the Text itself, not on a
|
||||||
LayoutAnimation.configureNext({
|
* wrapping Pressable. Text selection is driven by the platform's
|
||||||
duration: 450,
|
* native text view long-press (RN Text on Android, UITextView on
|
||||||
update: {type: 'spring', springDamping: 1},
|
* iOS). A parent touchable consumes that long-press before the
|
||||||
})
|
* selectable Text can begin a selection - on Android this prevents
|
||||||
onToggleAltExpanded()
|
* selection entirely. Keeping onPress/onLongPress on the Text lets
|
||||||
}}>
|
* the same native node own both the tap-to-expand and the
|
||||||
|
* long-press-to-select. The empty onLongPress is intentional: it
|
||||||
|
* reserves the long-press for the OS selection gesture instead of
|
||||||
|
* firing the expand toggle. RN exposes no API to arbitrate tap vs
|
||||||
|
* native selection on a single node, so this is the supported
|
||||||
|
* workaround, and it behaves consistently on both platforms.
|
||||||
|
*/}
|
||||||
<Text
|
<Text
|
||||||
emoji
|
emoji
|
||||||
selectable
|
selectable
|
||||||
style={[a.text_sm, {color: t.palette.white}]}
|
style={[a.text_sm, {color: t.palette.white}]}
|
||||||
numberOfLines={isAltExpanded ? undefined : 3}>
|
numberOfLines={isAltExpanded ? undefined : 3}
|
||||||
|
onPress={() => {
|
||||||
|
if (isMomentumScrolling.current) return
|
||||||
|
LayoutAnimation.configureNext({
|
||||||
|
duration: 450,
|
||||||
|
update: {type: 'spring', springDamping: 1},
|
||||||
|
})
|
||||||
|
onToggleAltExpanded()
|
||||||
|
}}
|
||||||
|
onLongPress={() => {}}>
|
||||||
{altText}
|
{altText}
|
||||||
</Text>
|
</Text>
|
||||||
</Pressable>
|
</View>
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
</BlurView>
|
</BlurView>
|
||||||
</View>
|
</View>
|
||||||
|
|||||||
Reference in New Issue
Block a user