External Linking

[jesskrich]

Is there a way to create external links? I am using react-router for navigation but need to be able to connect to social media sites.

[necolas]

<Text href={href} /> should work

[jesskrich]

<Text href={"http://google.com"}/> ?
Not working for me.

[necolas]

Sorry that should have been:

<Text accessibilityRole='link' href={href} />

See https://github.com/necolas/react-native-web/blob/master/docs/guides/accessibility.md

Example: http://codepen.io/necolas/pen/yJzVXB

You might want to create your own component like this:

const ExternalLink = (props) => <Text {...props} accessibilityRole='link' target='_blank' />

It would probably be useful to be able to do this with the Touchable components

[ovidiuch]

Is <Text accessibilityRole='link' href={href} /> supported to work in native environments as well, or just on the web?

It didn't work for me, so this is the best "universal" Url component I could come with:

Note that I just started with both RN and RNW

export class Url extends Component {
  handlePress = () => {
    Linking.openURL(this.props.url);
  };

  render() {
    const { url } = this.props;

    // The purpose of TouchableWithoutFeedback is just to stop propagating
    // press events to parents
    // The View in the middle exists because otherwise TouchableWithoutFeedback 
    // would render the inner link unclickable.
    if (Platform.OS === 'web') {
      return (
        <TouchableWithoutFeedback>
          <View>
            <Link href={url} accessibilityRole="link" target="_blank">
              {url}
            </Link>
          </View>
        </TouchableWithoutFeedback>
      );
    }

    return (
      <TouchableWithoutFeedback onPress={this.handlePress}>
        <Link>{url}</Link>
      </TouchableWithoutFeedback>
    );
  }
}

Please let me know if there's an easier way. Thanks!

[necolas]

https://github.com/necolas/react-native-web/blob/master/README.md#integrations