Skip to content

Instantly share code, notes, and snippets.

@m-tymchyk

m-tymchyk/react-native-open-external-link.js

Created October 30, 2018 09:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save m-tymchyk/8c5b53b5ba98184bc7c53885225f1484 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save m-tymchyk/8c5b53b5ba98184bc7c53885225f1484 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. m-tymchyk created this gist Oct 30, 2018.
    42 changes: 42 additions & 0 deletions react-native-open-external-link.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,42 @@
    // 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>
    );