'RN Web, href in TouchableOpacity: onPress >navigation, onRight click > context menu with possibility to open link

I have a site with TouchableOpacity that uses react-navigation to navigate to another screen. Is it possible in some way to add href to this button so I could open the another screen in new tab using context menu "Open link in new tab"?

I know there is possibility to add accessibilityRole='link' href={''} to a component but what about a whole button of view. This is according to: https://github.com/necolas/react-native-web/issues/162

Using Text component it is possible by:

 <Text
   accessibilityRole='link'
   href={defineRightClick()}
   target='_blank'
   onPress={(e) => { 
     e.preventDefault();
     navigateFunction();
   }}>
     Click to navigate, right click to open in new tab
 </Text>

Ask if more information is needed for this question and I will edit it.
Every help is appreciated as I have tried to find solution but have not come across or found a way to handle this case.

react-native-web


Solution 1:[1]

Found an answer!

Even thought it is not documented in here: https://necolas.github.io/react-native-web/docs/accessibility/#accessibility-patterns
and using href in TouchableOpacity will show ts error No overload matches this call., it is possible to add to a TouchableOpacity props

accessibilityRole='link'  
href={'desired link'}  
target='_blank'

Then using e.preventDefault() in onPress event of TouchableOpacity will prevent link opening and do other things assigned to the function. At the same time the link is possible to be opened with right click > context menu > "Open link in new tab"

I will post this as answer so if anyone else comes across this they might find the solution

Sources

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

Source: Stack Overflow

Solution Source
Solution 1

Related Questions