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!