Created
October 30, 2018 09:00
-
-
Save m-tymchyk/8c5b53b5ba98184bc7c53885225f1484 to your computer and use it in GitHub Desktop.
React Native / How to open external link by tap
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// external-link.js | |
import React from 'react'; | |
import { TouchableOpacity, StyleSheet, Text, Linking } from 'react-native'; | |
const ExternalLink = (props) => { | |
const { url, children, style = {} } = props; | |
const onPress = () => Linking.canOpenURL(url).then(() => { | |
Linking.openURL(url); | |
}); | |
return ( | |
<TouchableOpacity onPress={onPress}> | |
<Text style={[styles.text, style]}>{children}</Text> | |
</TouchableOpacity> | |
); | |
}; | |
const styles = StyleSheet.create({ | |
text: { | |
fontSize: 16, | |
textDecoration: 'underline' | |
}, | |
}); | |
export default ExternalLink; | |
// example.js | |
import React from 'react'; | |
import { View, Text } from 'react-native'; | |
import ExternalLink from './external-link'; | |
const MyApp = () => ( | |
<View> | |
<ExternalLink urk="https://google.com"> | |
Open Google to find something more interested | |
</ExternalLink> | |
</View> | |
); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi! I notice you've made a mistake in the code: on line number 37, the prop 'urk' should in fact be 'url', according to the code you've written above in the 'ExternalLink' component.