Patch to display markdown with clickable links within a modal

[lukewlms]

Recently certain TouchableOpacity components are not clickable within modals. In our experience, Android and iOS need to use different imports - one from react-native and one from react-native-gesture-handler.

I didn't want to switch away from this lib so I created a simple patch to inject a custom TouchableOpacity component. Posting here in case it's useful to anyone else.

renders.js changes:

// ...
  // Link component:
  link: (node: LinkNode, output: OutputFunction, state: RenderState, styles: RenderStyles) => {
    const onPress = state.onLinkPress
    ///// Patch starts here: switch to TouchableOpacity from react-native-gesture-handler if needed
    return <styles.TouchableOpacity.Component key={state.key} onPress={onPress ? () => onPress(node.target) : null}><Text  style={[styles.link, {bottom:-4}]} >
      {typeof node.content === 'string' ? node.content : output(node.content, state)}
    </Text></styles.TouchableOpacity.Component>
    ///// PATCH ENDS HERE
  },

Setting markdown styles in our code:

    link: { color: theme.clickableLinkColor, fontSize: HELP_FONT_SIZE },
    // Inject element that can be clicked in a modal
    TouchableOpacity: { Component: isIOS
  ? TouchableOpacityRngh // from react-native-gesture-handler
  : TouchableOpacityRN;  // from RN
 },