Deep Linking React Native

Overview

deep-linking-react-native is a React-Native component which is added to the first rendered component to enable the application to be accessed through deep links.

Installation

npm install deep-linking-react-native --save

Usage

Setting DeepLinks on native code

You can follow following link that guides through adding deep linking to your native code. It's straight forward. Deep Linking native configuration - We need only "Configuring iOS" and "Configuring Android".

Add component

Add "DeepLinking" component to your first rendered component

import {Component} from "React";
import {View} from "react-native"
import DeepLinking from "deep-linking-react-native";

import deepLinkingScheme from "./DeepLinkingScheme" //you can find this example file in the project directory

class Home extends Component{
	render(){
		return (
				<View>
					<DeepLinking scheme={{ scheme: deepLinkingScheme }} />
					<View>
					{
						//other components and stuff...
					}
					</View>
				</View>
			)
	}
}
	

Setting up your scheme:

It's a Scheme object from 'Scheme.js' which have two params : name, routes.

• name: the name of the deepLinking route which must be identical to the one configured in the native code.
• routes: array of JSON objects with the following two properties:
  • expression: route as string example: '/users/signup/'
  • callback: funcation that receives two oprional JSON objects (props and callbacks) that will be used for example to navigate to a screen

example:

import Scheme from './Scheme';
import { Actions } from 'react-native-router-flux';

export default deepLinkingScheme=new Scheme("deepLinkingScheme",
	[
		{
	        expression: '/signup/:first_name/:last_name/:email/:mobile_phone',
	        callback: ({first_name,last_name,email,mobile_phone},{updateData})=>{
	                Actions.signUpWindow();

	                updateData({
		                	name:first_name+" "+last_name,
		                	email:email,
		                	phone:mobile_phone
	                	})

	            }
	    }
	    {
	    	expression: '/my-profile/',
	    	callback: ()=> Actions.profile()
	    }
    ]
)

Provide the props and actions:

You will have to edit DeepLinking component by importing the actions (Redux actions) that will be passed to the callbacks, and add the needed props to mapStateToProps function that will also be passed to the callbacks.

example:

import { signupAction } from '../../../actions/';

class DeepLinking extends Component{
	//....
}

const mapStateToProps = (state) => {
    return { 
    	signUpState: state.signup
     };
};

export default connect(mapStateToProps,{
	signupAction
})(DeepLinking)

This will make signupAction and signUpState to be passed to the callbacks in the Scheme.

Feel free to submit issues.

By Ammar Rajab