Show Hyperlinks in React Native Alert?

Question

I want to use the Alert Api to display OS behavior alerts. I'm asking myself if you can display Hyperlinks inside the Text of an alert?

Alert.alert(
    'Alert', 
    'This is an Alert. I want to include hyperlinks here.',
    [
        {
            text: 'Cancel', 
            onPress: () => console.log("Alert cancel"),
            style: 'cancel',
        },
        {
            text: 'Accept', 
            onPress: () => console.log("Alert accept"),
            style: 'default'
        },
    ]
);

Answer 1

You could implement a dialog container, and use the React Native Linking component on the Dialog.Description onPress() to turn it into a hyperlink:

<Dialog.Description onPress={() => Linking.openURL('https://www.google.com')} 
    style={{ textDecorationLine: 'underline', color: 'blue' }}>www.google.com</Dialog.Description>

or you could add a Text component inside the Dialog.Description alongside some other text to just have a certain word be the hyperlink:

<Dialog.Description>
    Visit this website:
    <Text onPress={() => Linking.openURL('https://www.google.com')}
        style={{ textDecorationLine: 'underline', color: 'blue' }}>www.google.com</Text>
</Dialog.Description>

---

A word of caution, you're suppose to only pass a string to the Dialog.Description and doing the above will give you a console warning. So use at your own caution but it's working fine for me, and you can hide the warning using the React Native YellowBox component by adding this line outside of your class export (so near the import statements):

YellowBox.ignoreWarnings(['Failed prop type: Invalid prop `children` of type `array` supplied to `DialogDescription`, expected `string`'])

Answer 2

Much better to create a Modal (or simply a View component with position: absolute) to handle this than to dive into the native code.

https://facebook.github.io/react-native/docs/0.56/modal