This section contains information about React Native package integration. To view environment setup for specific platforms, see Android or iOS documentations.
To use the library in your app, follow these steps:
If you don’t have an existing React Native app, follow official React Native guide to create one.
Install the package:
yarn add @teavaroltd/funnelconnect-reactnative-sdk
or
npm i @teavaroltd/funnelconnect-reactnative-sdk
Import the package:
import { funnelConnectSdk } from '@teavaroltd/funnelconnect-reactnative-sdk';
You can check the available versions here.
We will also need to add the iOS dependency manually to the iOS module for the application to work on iOS, and to do this, simply open the iOS folder and launch the application with Xcode and follow this section to add the library using Swift Package Manager (SPM), and not any other method.
Please run the application from Xcode to make sure that it is working as expected, then you can safely launch it from React Native.
If you are using Mac with an Apple silicon processor such as M1, you will need to add the following piece of code at the end of the pod file inside the iOS folder and run pod install.
post_install do |installer|
installer.pods_project.targets.each do |target|
target.build_configurations.each do |config|
config.build_settings["ONLY_ACTIVE_ARCH"] = 'NO'
config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = 'arm64'
config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '12.0'
end
end
installer.pods_project.build_configurations.each do |config|
config.build_settings["ONLY_ACTIVE_ARCH"] = 'NO'
config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = 'arm64'
config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '12.0'
end
react_native_post_install(
installer,
# Set `mac_catalyst_enabled` to `true` in order to apply patches
# necessary for Mac Catalyst builds
:mac_catalyst_enabled => false
)
flipper_post_install(installer)
__apply_Xcode_12_5_M1_post_install_workaround(installer)
end
Most of the funcionalities are an asynchronous functions that sometimes return data. Generally, for those functions you can await the result or use then on resolving function.
Using await:
try {
const result = await funnelConnectSdk.callAsyncFunction(parameter);
/* Do something with the result */
} catch (error) {
/* Do something with the error */
}
Using then:
funnelConnectSdk
.callAsyncFunction(parameter)
.then(result => /* Do something with the result */)
.catch(error => /* Do something with the error */);
For more information on Promises and asynchronous calls you can check mdn web docs.
To react to SDK initialization as it happens, you need to define the initialization logic before actually initializing the SDK. You also want to make sure that the SDK is initialized before accessing any other functions. However, if you will use the SDK services in a class that will require going through multiple steps, such as the cart page in an e-commerce app, most probably you won’t need to use these function because the SDK will be already initialized by the time of reaching to that page or class, so it is your call to decide when to use the listener and when not to. The listener is called following the initializeSDK call, which is described later in this section.
funnelConnectSdk
.onInitializeAsync()
.then(() => {
/* Do something when the SDK is initialized */
})
.catch(error => {
/* Do something with the error */
});
An actual initialization occurs when the following initializeSDK is called. It has two variants: a basic and custom one. The basic one is covered below:
funnelConnectSdk.initializeSDK('test123');
You can provide an optional initialization parameter by passing a custom options object to the initializer. Currently, enable debugging is the only available option, but there will be more in the future. It is set to false by default.
funnelConnectSdk.initializeSDK('test123', { enableLogging: true });
Custom options are typed, so if you are using typing, you can use FCOptions type to make sure you are providing a correct object.
const options: FCOptions = { enableLogging: true };
At some point, you will want to check if the SDK is initialized before doing anything else. isInitializedAsync function returns a promise with the boolean value.
funnelConnectSdk
.isInitializedAsync()
.then(isInitialized => {
/* Do something with the result */
})
.catch(error => {
/* Do something with the error */
});
You can clear cached data via synchronous or asynchronous actions.
Synchronous:
funnelConnectSdk.clearData();
Asynchronous:
funnelConnectSdk
.clearDataAsync()
.then(() => {
/* Do something after clear */
})
.catch(error => {
/* Do something with the error */
});
You can also clean cookies via synchronous or asynchronous actions.
Synchronous:
funnelConnectSdk.clearCookies();
Asynchronous:
funnelConnectSdk
.clearCookiesAsync()
.then(() => {
/* Do something after clear */
})
.catch(error => {
/* Do something with the error */
});
Once the SDK is initialized, all the services functions can be called by calling funnelConnectSdk. to access the SDK functions including CDP and TrustPid services.
Using console.error or console.warn in development build will automatically trigger LogBoxes. To avoid that, you can omit them by adding LogBox.ignoreAllLogs(); line, by calling console.info only or by using custom logger.
By default, LogBoxes are disabled in any other builds than development. More information available at the official documentation in LogBoxes hyperlink above.
If you have any suggestions or you want to report a bug or ask a question, please create a new issue in this GitHub repository.
You can also check if there is a similar issue to yours that has been solved before.