React Native Integration

The b.well composite also supports integration into React Native via a react native scoped export. Before integrating, installation requires adding some peer dependencies of the @icanbwell/composite module.

Installation

Install module plus peer dependencies (only required they are not already installed).

npm install \
  react \
  react-native \
  react-native-webview \
  @react-native-async-storage/async-storage

Optional Native Dependencies

The following native dependencies are optional and may be required depending on the features that are enabled for your specific client.

npm install \
  react-native-biometrics \
  react-native-permissions \
  @react-native-camera-roll/camera-roll \
  @react-native-camera-roll/camera-roll \
  react-native-document-picker \
  @react-native-community/geolocation \
  react-native-print

Install Pods

npx pod-install

Usage

See Properties table below for all Required and Optional properties.

Make sure to install peer dependencies if they’re not already installed. Our recommended minimum dependences are pinned in the package.json

// Native Module(s) to inject
import storage from '@react-native-async-storage/async-storage';
import { SafeAreaView } from 'react-native';
import { Composite } from '@icanbwell/composite/native';
export default function App() {
  return (
	<SafeAreaView style={{ flex: 1 }}>
  	<Composite
    	clientKey='<CLIENT_KEY>'
    	userToken='<USER_TOKEN>'
    	nativeModules={{
      	storage,
    	}}
  	/>
	</SafeAreaView>
  );
}

The composite should now expose an onEvent prop that will emit an object of the form:

{
  "key": "onauthsuccess",
  "data": { "user": { "id": "<USER_ID>" } }
}

Example:

<Composite
  onEvent={({ key, data }) => {
	if (key === 'onauthsuccess') {
  	console.log('USER ID', data.user.id)
	}
  }}
  clientKey="<CLIENT_KEY>"
  userToken="<USER_TOKEN>"
/>

Properties

Property	Required?	Type	Description
`clientKey`	Required	`string`	Client key
`userToken`	Required	`string`	User token for SSO
`path`	Optional	`type Path = { value: string; onResetValue: () => void; };`	Optional property that tells the composite what page to initially render. Use this to have the Composite render a specific screen. Pass the intended path in via the value property (for example value: '/intended/path'). Use the onResetValue callback to clear the value that is passed to path (set it to an empty string/undefined). onResetValue is called immediately after the passed in path value is rendered within the Composite component. This is required in order to accommodate passing in the same path value sequentially and having the underlying component recognize there’s been a change. It is possible the user navigates elsewhere in between sequential path value updates. NOTE: Make sure to omit the hash segment of a path if it exists. For example: #/intended/path would be /intended/path.
`onEvent`	Optional	`type OnAuthSuccessEventData = { user: { id: string; }; };` `type ErrorEventData = { name: string; message: string; errorCode: string; };` `type EventData = \| { key: 'onauthsuccess'; data: OnAuthSuccessEventData; } \| { key: 'error'; data: ErrorEventData; };` `type OnEventCallback = (event: EventData) => void;`	Callback property that allows for listening to internal events of the embeddable.
`nativeModules`	Required	import type storage from '@react-native-async-storage/async-storage'; import type * as cameraRoll from '@react-native-camera-roll/camera-roll'; import type geolocation from '@react-native-community/geolocation'; import type biometrics from 'react-native-biometrics'; import type documentPicker from 'react-native-document-picker'; import type * as fileSystem from 'react-native-fs'; import type permissions from 'react-native-permissions'; import type print from 'react-native-print'; `type NativeModuleMap = { biometrics?: typeof biometrics; permissions?: typeof permissions; cameraRoll?: typeof cameraRoll; fileSystem?: typeof fileSystem; documentPicker?: typeof documentPicker; geolocation?: typeof geolocation; print?: typeof print; storage?: typeof storage; };`	Property used to inject native dependencies into the composite. At minimum `storage` is required.