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'
        },
    ]
);

score 2 · Answer 1 · answered Sep 20 '18 at 15:47

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

answered Sep 20 '18 at 15:47

Ronnie

56
4

Yes this was the solution in the production app. It behaves really well and it is looking good with rounded borders. – Arbnor Sep 27 '18 at 10:37
updated modal link: [https://reactnative.dev/docs/modal#example](https://reactnative.dev/docs/modal#example). By the way, this should be marked as the solution. – Daniel Cettour Oct 20 '22 at 02:47

score 2 · Accepted Answer · answered Aug 20 '20 at 08:46

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`'])

score 0 · Answer 3 · answered Sep 20 '18 at 18:39

You need to install "react-native-dialogs"( an android only module for material design dialogs) as follows:

1] Installation:

npm install react-native-dialogs --save

2] Linking:

react-native link react-native-dialogs

3] Import it in your page:

import DialogAndroid from 'react-native-dialogs';

also need to add below code inside your render:

<Button title="show custom alert" onPress={this.showCustomAlert} />

and at last add below function in your screen:

showCustomAlert() {
   DialogAndroid.alert('Alert', `This is a link <a 
     href="https://www.google.com/">Google</a>`, {
    contentIsHtml: true
   });
}

You can find more details here https://github.com/aakashns/react-native-dialogs

ShaneG · Answer 4 · 2017-12-01T15:58:50.840

-1

This is possible using the Linking module that comes with React-Native. Please check out the following:

Display hyperlink in React Native App

If this doesn't work maybe try this npm package:

https://www.npmjs.com/package/react-native-hyperlink

edited Dec 01 '17 at 15:58

answered Nov 30 '17 at 16:01

ShaneG

1,498
7
16

@realarb If this answers your question please mark it as the correct answer! Thanks! – ShaneG Nov 30 '17 at 16:34
Unfortunately not because the params for Alert.alert accepts only strings for the descriptions. I think there is no solution to display a native Alert IOS with hyperlinks inside. – Arbnor Dec 01 '17 at 15:39
@realarb i edited my answer there. Maybe that npm package might help – ShaneG Dec 01 '17 at 15:59
No the Method from Alert accepts only pure strings. You can't nest React Components. I want the user to accept the privacy policy using the Alert and link the privacy policy inside the Alert. – Arbnor Dec 01 '17 at 16:50
This could be solved if I would write the Alert Box native in Objective-C combining it with React Native. But for that I have to get more knowledge. – Arbnor Dec 04 '17 at 15:47

Show Hyperlinks in React Native Alert?

4 Answers4