Changeset View
Changeset View
Standalone View
Standalone View
native/chat/inner-text-message.react.js
| Show First 20 Lines • Show All 93 Lines • ▼ Show 20 Lines | const textStyle = { | ||||
| color: darkColor | color: darkColor | ||||
| ? colors.dark.listForegroundLabel | ? colors.dark.listForegroundLabel | ||||
| : colors.light.listForegroundLabel, | : colors.light.listForegroundLabel, | ||||
| }; | }; | ||||
| return [styles.text, textStyle]; | return [styles.text, textStyle]; | ||||
| }, [darkColor]); | }, [darkColor]); | ||||
| // If we need to render a Text with an onPress prop inside, we're going to | |||||
| // have an issue: the GestureTouchableOpacity below will trigger too when the | |||||
| // the onPress is pressed. We have to use a GestureTouchableOpacity in order | |||||
| // for the message touch gesture to play nice with the message swipe gesture, | |||||
| // so we need to find a way to disable the GestureTouchableOpacity. | |||||
| // | |||||
| // Our solution is to keep using the GestureTouchableOpacity for the padding | |||||
| // around the text, and to have the Texts inside ALL implement an onPress prop | |||||
| // that will default to the message touch gesture. Luckily, Text with onPress | |||||
| // plays nice with the message swipe gesture. | |||||
| let secondMessage; | |||||
| if (textMessageMarkdown.markdownHasPressable) { | |||||
| secondMessage = ( | |||||
| <View | |||||
| style={[StyleSheet.absoluteFill, styles.message]} | |||||
| pointerEvents="box-none" | |||||
| > | |||||
| <Markdown style={markdownStyles} rules={rules}> | |||||
| {text} | |||||
| </Markdown> | |||||
| </View> | |||||
| ); | |||||
| } | |||||
| const message = ( | const message = ( | ||||
| <TextMessageMarkdownContext.Provider value={textMessageMarkdown}> | <TextMessageMarkdownContext.Provider value={textMessageMarkdown}> | ||||
| <TouchableWithoutFeedback> | <TouchableWithoutFeedback> | ||||
| <View> | <View> | ||||
| <GestureTouchableOpacity | <GestureTouchableOpacity | ||||
| onPress={props.onPress} | onPress={props.onPress} | ||||
| onLongPress={props.onPress} | onLongPress={props.onPress} | ||||
| activeOpacity={0.6} | activeOpacity={0.6} | ||||
| style={[styles.message, cornerStyle]} | style={[styles.message, cornerStyle]} | ||||
| animatedStyle={messageStyle} | animatedStyle={messageStyle} | ||||
| > | > | ||||
| <Markdown style={markdownStyles} rules={rules}> | <Markdown style={markdownStyles} rules={rules}> | ||||
| {text} | {text} | ||||
| </Markdown> | </Markdown> | ||||
| </GestureTouchableOpacity> | </GestureTouchableOpacity> | ||||
| {secondMessage} | |||||
| </View> | </View> | ||||
| </TouchableWithoutFeedback> | </TouchableWithoutFeedback> | ||||
| </TextMessageMarkdownContext.Provider> | </TextMessageMarkdownContext.Provider> | ||||
| ); | ); | ||||
| // We need to set onLayout in order to allow .measure() to be on the ref | // We need to set onLayout in order to allow .measure() to be on the ref | ||||
| const onLayout = React.useCallback(() => {}, []); | const onLayout = React.useCallback(() => {}, []); | ||||
| Show All 29 Lines | |||||