Native Bridge

1. Check if the app is loaded inside the wrapper and only use bridge methods if we are (inside the wrapper).

``javascript
import { isNative } from 'path-to-native-bridge-module';
// ...
const userAgent = 'user-agent value here';
this.isOnNative = isNative(userAgent);
// preferably this ^ should be done only once, when the app loads,
// and the value to be used eveywhere and anytime we need to call the native

if (this.isOnNative) {
// call/listen for native
}
// ...
`

2. Call native bridge method example (used to trigger something in native):


`javascript
import { call as callNative } from 'path-to-native-bridge-module';
// ...
const methodFound = callNative('GET_CREDENTIALS');
// ^ callNative returns a boolean specifying if the method exists in the native bridge
// we can now add a fallback in the case of non-existing methods
`

3. Add a native bridge event listener example (used to listen for something from native):

`javascript
import { registerEventListener as registerNativeEventListener } from 'path-to-native-bridge-module';
// ...
const eventFound = registerNativeEventListener(
'GET_CREDENTIALS',
(credentials) => {
// do something with credentials here
},
);
// ^ registerNativeEventListener returns a boolean specifying if the event exists in the native bridge
// we can now add a fallback in the case of non-existing event
`

3. Ask for something from native and wait for response example:

`javascript
import {
call as callNative,
registerEventListener as registerNativeEventListener,
} from 'path-to-native-bridge-module';
// ...
registerNativeEventListener(
'GET_CREDENTIALS',
(credentials) => {
// do something with credentials here
},
);
// ^ listen for an event sent from native containing the credentials
callNative('GET_CREDENTIALS')
// ^ "tell" native that we need the credentials
// native will sent the credentials on the event we registered previously
`

4. List of potential events (not all are enabled on all operators, check with the Native Team):

`
OPEN_LOGIN
OPEN_REGISTER
ENABLE_BIOMETRICS
DISABLE_BIOMETRICS
BIOMETRICS_ENABLED
GET_CREDENTIALS
UPDATE_CREDENTIALS
CLEAR_CREDENTIALS
OPEN_GAME
OPEN_URL
`

5. List of potential methods (not all are enabled on all operators, check with the Native Team):

`
ENABLE_BIOMETRICS
DISABLE_BIOMETRICS
BIOMETRICS_ENABLED
GET_CREDENTIALS
UPDATE_CREDENTIALS
CLEAR_CREDENTIALS
OPEN_GAME
OPEN_URL
SET_USER_ID
`

6. Code examples:

$3

`javascript
import {
call as callNative,
registerEventListener as registerNativeEventListener,
} from 'base-local-setup/native-bridge';
// ...
if (isOnNative) { // we can add other checks here if needed (like only enabling on specific platform - iOS/Android)
// after the registration flow finishes
// call native to enable biometrics login (by sending user/pass)
const methodFound = callNative('ENABLE_BIOMETRICS', { username, password });
// if the method is not found (native bridge not initialized or method typo or any other issue)
// consider the registration flow as being finished
// as the biometrics functionality is just a nice to have functionality and does not impact the default behavior
if (!methodFound) {
// do whatever web does after register
}

// after calling native, we need to wait for native to finish its action
// after that, we can continue with the normal behavior
// (same as if we're not on native or the method is not found - ^ see above)
registerNativeEventListener(
'BIOMETRICS_ENABLED',
() => {
// do whatever web does after register
},
);
}
// ...
`

$3

`javascript
import {
call as callNative,
registerEventListener as registerNativeEventListener,
} from 'base-local-setup/native-bridge';
// ...
// first, let's get the current status of the feature (on/off)
// we do this by asking the native using a method
// and waiting for it to respond on an event
if (isOnNative) { // we can add other checks here if needed (like only enabling on specific platform - iOS/Android)
// ask native
callNative('BIOMETRICS_ENABLED');

// wait for a response
registerNativeEventListener(
'BIOMETRICS_ENABLED',
(biometricsEnabled) => {
// we now know if the feature is enabled/disabled
},
);
}
// ...
// now, we can enable/disable the feature
if (isOnNative) { // we can add other checks here if needed (like only enabling on specific platform - iOS/Android)
// call native to enable/disable the feature (depending on its status)
callNative(
biometricsEnabled ? 'DISABLE_BIOMETRICS' : 'ENABLE_BIOMETRICS',
);

// (this is optional) wait for native to confirm the status change
registerNativeEventListener(
'BIOMETRICS_ENABLED',
(biometricsEnabled) => {
// do something on status change (if needed)
},
);
}
// ...
`

$3


`javascript
import {
call as callNative,
registerEventListener as registerNativeEventListener,
} from 'base-local-setup/native-bridge';
// ...
if (isOnNative) { // we can add other checks here if needed (like only enabling on specific platform - iOS/Android)
const methodFound = callNative('GET_CREDENTIALS');
// if the method is not found (native bridge not initialized or method typo or any other issue)
// revert back to the normal login flow
if (!methodFound) {
// start normal login flow
}

// after calling native, we need to wait for native to finish its biometrics auth
// and send back the credentials which we can then use to auth the user
registerNativeEventListener(
'GET_CREDENTIALS',
({ username, password }) => {
// trigger login using the returned user/pass
},
);
}
// ...
`


$3


`javascript
import { call as callNative } from 'base-local-setup/native-bridge';
// ...
if (isOnNative) { // we can add other checks here if needed (like only enabling on specific platform - iOS/Android)
callNative(
'UPDATE_CREDENTIALS',
{ username, password },
);
// we do this optimistically, it makes no difference if it succeeds or not
}
// ...
`

$3

`javascript
import { call as callNative } from 'base-local-setup/native-bridge';
// ...
if (isOnNative) { // we can add other checks here if needed (like only enabling on specific platform - iOS/Android)
const data = {
url: 'url returned by CE - getLaunchUrl',
id: 'gameId',
vendor: 'vendor name',
};

callNative('OPEN_GAME', data);
}
// ...
`

$3


`javascript
import { call as callNative } from 'base-local-setup/native-bridge';
// ...
if (isOnNative) { // we can add other checks here if needed (like only enabling on specific platform - iOS/Android)
callNative('OPEN_URL', { url })
}
// ...
``

* Most of these code examples can be found in the Winmasters repo (https://git.everymatrix.com/ufe-operators/winmasters)