Native Bridge

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

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):

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):

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:

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:

a) Enable biometric login on register

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
        },
    );
}
// ...

b) Enable/Disable biometric login after registration

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)
        },
    );
}
// ...

c) Use biometrics to login

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
        },
    );
}
// ...

d) Update credentials after login (for the possibility when the user credentials changed)

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
}
// ...

e) Open native game

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);
}
// ...

f) Open url in default browser

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)