Arpith Siromoney 💬

Deep links in React Native

I’m building an app to share notes (called Constellational — sign up here!), and I’m working on opening user’s pages and posts in the app instead of the website. 

This is how you do it in React Native:

var { LinkingIOS } = React;

class NavPage extends React.Component {
  constructor(props, context) {
    super(props, context);
    var url = LinkingIOS.popInitialURL();
    this.handleOpenURL = this.handleOpenURL.bind(this);
    if (url) this.handleOpenURL({url});
  }
  
  componentDidMount() {
    LinkingIOS.addEventListener('url', this.handleOpenURL);
  } 

  componentWillUnmount() {
    LinkingIOS.removeEventListener('url', this.handleOpenURL);
  }

  handleOpenURL(event) {
    var urlPath = event.url.split('constellational.com/')[1];
    var splitPath = urlPath.split('/');
    var username = urlPath.shift();
    var postID = urlPath.shift();
    this.props.navigator.push({
      id: 'posts',
      username: username,
      postID: postID
    });
  }
}

What that does is import LinkingIOS, check if there’s a url (popInitialURL()), and set up a handler (handleOpenURL()) to take care of urls. The urls look like https://constellational.com/username/postID, so the function first gets the username and postID before pushing a route to the navigator.

That’s about it! Another step closer to universal links!