Official Klaviyo React Native SDK
klaviyo-react-native-sdk is an SDK, written in TypeScript, that can be integrated into your React Native App. The SDK enables you to engage with your customers using push notifications. In addition, you will be able to take advantage of Klaviyo's identification and event tracking functionality. Once integrated, your marketing team will be able to better understand your app users' needs and send them timely messages via APNs/Google FCM.
This SDK is a wrapper (native module bridge) around the native Klaviyo iOS and Android SDKs. For more information on the native SDKs, please see the iOS and Android repositories.
The Klaviyo React Native SDK is available via NPM. To add it to your project, run the following from your project's root directory:
npm install klaviyo-react-native-sdkTo get started with iOS setup, you need to run the following command in the ios directory of your React Native project:
pod installThis may require you to install Cocoapods.
Once you have installed all the dependencies using cocoapods, you should have access to the native Klaviyo iOS SDK which we will use in the following section to setup your react native iOS project.
if you are seeing issues with deployment versions when installing pods, you may need to update you minimum iOS version to 13.0 in your Podfile.
An example of overriding the minimum iOS version in your Podfile is shown below:
MIN_IOS_OVERRIDE = '13.0'
if Gem::Version.new(MIN_IOS_OVERRIDE) > Gem::Version.new(min_ios_version_supported)
min_ios_version_supported = MIN_IOS_OVERRIDE
end
# existing code
platform :ios, min_ios_version_supportedAnother option is to use IPHONEOS_DEPLOYMENT_TARGET from your Xcode project file like below,
#######
# Read min iOS version from Xcode project and set as min iOS version for Podfile
require 'xcodeproj'
project_path = './YOUR_XCODE_PROJECT.xcodeproj'
project = Xcodeproj::Project.open(project_path)
min_ios_version_supported = project.build_configurations.first.build_settings['IPHONEOS_DEPLOYMENT_TARGET']
######
platform :ios, min_ios_version_supportedFor Android, there are no additional installation requirements. The React Native SDK gradle file exposes transitive dependencies upon the Klaviyo Android SDK so you can import in your kotlin/java classes without modifying your gradle files.
Initialization should be done from the native layer:
Follow the Android guide on initializing.
Here we'll create the native iOS SDK instance and initialize it with your Klaviyo public key.
KlaviyoSDK().initialize(with: "YOUR_KLAVIYO_PUBLIC_API_KEY")The SDK provides helpers for identifying profiles and syncing via the Klaviyo client API. All profile identifiers (email, phone, external ID, anonymous ID) are persisted to local storage so that the SDK can keep track of the current profile.
The Klaviyo SDK does not validate email address or phone number inputs locally. See documentation for guidance on proper phone number formatting.
Profile attributes can be set all at once:
import { Klaviyo, Profile } from 'klaviyo-react-native-sdk';
const profile: Profile = {
email: '[email protected]',
phone: '+15555555555',
externalId: '12345',
firstName: 'Kermit',
lastName: 'The Frog',
title: 'CEO',
organization: 'Muppets, Inc.',
location: {
latitude: 42.3601,
longitude: 71.0589,
},
};
Klaviyo.setProfile(profile);or individually:
import { ProfilePropertyKey, Klaviyo } from 'klaviyo-react-native-sdk';
Klaviyo.setEmail('[email protected]');
Klaviyo.setPhone('+15555555555');
Klaviyo.setExternalId('12345');
Klaviyo.setProfileAttribute(ProfilePropertyKey.FIRST_NAME, 'Kermit');If a user is logged out or if you want to reset the profile for some reason, use the following:
import { Klaviyo } from 'klaviyo-react-native-sdk';
Klaviyo.resetProfile();The SDK also provides tools for tracking analytics events to the Klaviyo API. A list of common Klaviyo-defined event names is provided in MetricName, or you can just provide a string for a custom event name.
Below is an example using one of the Klaviyo-defined event names:
import { Event, Klaviyo, EventName } from 'klaviyo-react-native-sdk';
const event: Event = {
name: EventName.STARTED_CHECKOUT_METRIC,
value: 99,
properties: { products: ['SKU1', 'SKU2'] },
};
Klaviyo.createEvent(event);You can also create an event by providing a string for the event name as follows:
import { Klaviyo } from 'klaviyo-react-native-sdk';
Klaviyo.createEvent({
name: 'My Custom Event',
});
Klaviyo.createEvent(event);When setting up push notifications (including rich push notifications), you will need to follow directions from the iOS and Android SDKs.
To handle deep links in your app, start by familiarizing yourself with the React Native guide to deep linking. Once you've done that, you should follow directions from the iOS and Android SDKs. The sections below give additional details for each platform as it pertains to React Native.
As shown in the native SDK documentation, you can follow option 1 or 2.
With option 1, when you get the callback, you can handle it as follows:
[RCTLinkingManager application:application openURL:url options:options]Since you won't have options, you can just pass in an empty dictionary for that parameter.
With option 2, when you handle the open url (in application(_:open:options)),
you call the linking code block above similar to what you would do with option 1.
On Android, simply follow the Android SDK docs on handling intent filters.
Then on the React Native side, you can handle the deep link as follows:
import { Linking } from 'react-native';
Linking.addEventListener('url', (event) => {
console.log(event.url);
});
Linking.getInitialURL().then((url) => {
console.log('Initial Url: url', url);
});It is recommended that handling push permissions be done from the native layer. On iOS, you can follow the iOS guide on requesting permissions. On Android, you can follow the Android guide on requesting permissions.
See the contributing guide to learn how to contribute to the repository and the development workflow.
The Klaviyo React Native SDK is available under the MIT license. See LICENSE for more info.