'React native clickable substring inside TextInput

I want a TextInput to be generated where some part of the text is clickable. In particular for iOS.

Conceptually something like the following:

<TextInput>
  <Text>
    I want to be able to click 
  </Text>
  <Text onPress={() => console.log("test")}>
    here
  </Text>
</TextInput>

Where the console.log is triggered only when pressing 'here'.

  • I am aware of workarounds where we subscribe to the onFocus and the onSelectionChange event. This however will not suite the more general problem I am working on.
  • I have tried using TouchableOpacity around a Text tag, however that will not even render the text 'here'. That is, when the TouchableOpacity is inside the TextInput.


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source