Download the React Native Integration files from https://github.com/Crowdhandler/ch-react-native-integration/releases/download/1.0.0/ch-react-native-integration.zip and add the ch-react-native-integration folder to your project
In this example we’re going to use CrowdHandler to protect certain products in an ecommerce app. The waiting room will engage for selected products when the user invokes the navigation.
1. Configure the CrowdHandler Provider
Import the CrowdHandlerProvider in the top level of your App.
App.js
import { CrowdHandlerProvider } from './ch-react-native-integration';Create an object within your app to manage the events.
These events are called by CrowdHandler to enable you to respond to the state.
There are 2 required event listeners.
onWait() - Called when CrowdHandler detects that a user should be sent to the Waiting Room Screen
onRedirect() - Called when CrowdHandler detects that a user should be sent to the screen that you are protecting.
Optionally there are 2 other event listeners that you can use, onRequestStart() and onRequestEnd().
These are called before and after the CrowdHandler request has been made and are useful to show the user that activity is happening.
App.js
export default function App() {
const CHEvents = {
navigation: null, // holds the navigation stack so CrowdHandler can redirect the correct screens
onWait: function (ch_response) { // required
launchWaitingRoomScreen(ch_response);
},
onRedirect: function (ch_response) { // required
redirectToScreen(ch_response);
},
onRequestStart: function () {}, //optional
onRequestEnd: function () {} // optional
};
...and create functions to handle the events.
Here we are setting the name of the Waiting Room Screen to "CHWaitingRoom".
Make sure that this name is the same as the name of the screen in your navigation stack.
The ch_response returned by the onWait function contains a property named referer. We use this to determine whether the navigation stack should replace the history. If the redirect is coming from the waiting room then we don't want the user to go back to the waiting room when they click the back button.
App.js
const launchWaitingRoomScreen = (ch_response) => {
ch_response.navigation.navigate('CHWaitingRoom', { ...ch_response.screen_config });
}
const redirectToScreen = (ch_response) => {
if(ch_response.referer === 'waiting_room') {
ch_response.navigation.replace(ch_response.screen_config.redirect, ch_response.screen_config);
} else {
ch_response.navigation.navigate(ch_response.screen_config.redirect, ch_response.screen_config);
}
}Wrap your app with CrowdHandlerProvider component passing in the event object created earlier, CHEvents, and your public api key as props. Optionally you can add a value for `timeout` in milliseconds. This tells CrowdHandler to redirect to the protected screen in the event of an api timeout or a slow request. If not set it defaults 3000ms (or 3 seconds)
App.js
<CrowdHandlerProvider
timeout={3000}
chEvents={CHEvents}
apiKey={"04b39378b6abc3d4ee870824371646a9d1e157b1a7720821add4c260108ebd48"}>
<NavigationStack/>
</CrowdHandlerProvider>2. Add the CrowdHandler WebView to your navigation stack.
Import the CHWebView component wherever you are creating your navigation stack
import {CHWebView} from './ch-react-native-integration';CHWebView is a component which returns a WebView component and requires react-native-webview as a dependency.
To install react-native-webview run
yarn add react-native-webview
or
npm install --save react-native-webview
More information on react-native-webview can be found here
https://github.com/react-native-webview/react-native-webview/blob/master/docs/Getting-Started.md
On your navigation stack you will need a screen for the Waiting Room. Set the name property to the same value that you set in the `launchWaitingRoomScreen` function above, we set it to CHWaitingRoom.
Import the CHWebView component and set the component prop of the screen to the CHWebView component.
This is the screen that the user will see if they are required to wait so its important that the name of the screen matches the name you specified in the method called by the onWait event in App.js.
i.e. <Stack.Screen name="CHWaitingRoom" component={CHWebView} />
...
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen}/>
<Stack.Screen name="Details" component={ProductsScreen}/>
<Stack.Screen name="ProductScreen" component={ProductScreen} />
<Stack.Screen name="CHWaitingRoom" component={CHWebView} />
</Stack.Navigator>
...3. Intercept navigation clicks
For pages that you wish to protect you need to intercept the user’s navigation interaction and check with CrowdHandler before showing them the desired screen. To do this, import the `useCrowdHandler` context from the CrowdHandlerGatekeeper file into the screen component that is handling the navigation input.
ProductsScreen.js
import { useCrowdHandler } from "./ch-react-native-integration";then bring the CrowdHandler context into the screen component.
ProductsScreen.js
export const ProductsScreen = ({ navigation }) => {
const crowdhandler_gatekeeper = useCrowdHandler();
// pass a reference of navigation to the gatekeeper
// this allows CrowdHandler to redirect the user to the correct screen
crowdhandler_gatekeeper.setNavigation(navigation);
...Add a function to handle when a user clicks a navigation element that takes them to a screen you want to protect.
It's a good idea to check whether a screen you are navigating to has a slug property or url property.
If it doesn't then there is no need to check with CrowdHandler.
ProductsScreen.js
export const ProductsScreen = ({ navigation }) => {
const crowdhandler_gatekeeper = useCrowdHandler();
// pass a reference of navigation to the gatekeeper
// this allows CrowdHandler to redirect the user to the correct screen
crowdhandler_gatekeeper.setNavigation(navigation);
const handleCheckWithCrowdHandler = async (product) => {
if (product.slug || product.url) {
await crowdhandler_gatekeeper.redirectOrWait(product);
} else {
navigation.navigate(product.redirect, product)
}
}
...and add this handler to the onPress event of the Button.
Crowdhandler can protect screens based on the Waiting Room slug or based on the url that you want to protect.
ProductsScreen.js
// A collection of products
// Minimum requirements are that they have the waiting room slug or URL to protect
// and a screen to redirect to
// Analogous to params that are sent to react-navigator and any
// params that are set here are sent to the navigator on redirect
const products = [
{
slug: '0MAID6M2iMjNW1WZs', // waiting room slug from crowdhander admin
redirect: 'ProductScreen', // the screen to redirect to
title: 'Hiking Boots',
productID: 'pct_000112312'
}, {
url: 'https://example.com/products/protected/page', // URL to protect - set in crowdhander admin
redirect: 'ProductScreen',
// the screen to redirect to
title: 'Head Torch',
productID: 'pct_030112552'
}
]
{products.map((product) => {
return (
<Button
key={product.productID}
onPress = { () => {
handleCheckWithCrowdHandler(product)} // send the data to check
}
>
{product.title}
</Button>
)
})}
...4. Putting it all together.
In this implementation, when a user presses the button, handleCheckWithCrowdHandler() is called, passing the product object as the argument i.e.
{
slug: '0MAID6M2iMjNW1WZs', // waiting room slug from crowdhander admin
redirect: 'ProductScreen', // the screen to redirect to
title: 'Hiking Boots',
productID: 'pct_000112312'
}
CrowdHandler then performs a check based on the slug property or url property of the object
If the user is required to wait the onWait() event is called which was defined in App.js. This is handled by the launchWaitingRoom() handler, also defined in App.js. The CHWaitingRoom screen is shown, and loads the Waiting Room.
If the users is able to access the protected screen onRedirect() is called and the user is directed to the screen specified in the product object, in this case ProductScreen