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('')[1];
   var splitPath = urlPath.split('/');
   var username = urlPath.shift();
   var postID = urlPath.shift();
     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, 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!