Last updated Dec 17, 2024

React Native SDK best practice

Mobile application performance is critical to your business. Our technology is focused on improving your customer's experience with your app. As such, screen performance is a core component of our solutions. To boost engagement and conversion rates, we employ several approaches to minimize screen load times.

Initializing with Fonts

note

This functionality is supported from version 4.2.0 of the Rokt React Native SDK.

Instead of or in addition to supplying your desired fonts on One Platform, you may choose to utilize the fonts already bundled with your application. This carries the advantage of removing the potential for fonts to be downloaded at initialization time, reducing network utilization and the chances of download errors.

For iOS React Native applications this is done automatically by using the fonts registered in your application. For Android React Native applications, you must provide the font postscript names and filenames if you wish the utilize this functionality. The postscript names should match those being used in your layout, please check with your account manager if you are unsure.

Rokt.initialize("222", "Y.Y.Y", {"Arial-Bold": "fonts/arialbold.otf"});

note

This assumes that your fonts for your Android application are stored in the assets directory of the application. This is usually the default location that fonts are copied to when running commands such as react-native-asset.

Using App Configurations

Applications can now send configuration settings from their own application environment. This allows Rokt SDK to use application custom configurations instead of relying solely on system defaults.

ColorMode object

Value	Description
light	Application is in Light Mode
dark	Application is in Dark Mode
system	Application defaults to System Color Mode

// if application supports only Light Mode.
const roktConfig = new RoktConfigBuilder()
    .withColorMode('light')
    .build();
Rokt.execute(
    // other params,
    roktConfig,
)

CacheConfig object

Parameter	Description
cacheDurationInSeconds	Optional duration in seconds for which the Rokt SDK should cache the experience. Maximum allowed value is 90 minutes and the default (if value is not provided or invalid) is 90 minutes.
cacheAttributes	Optional attributes to be used as cache key. If null, all the attributes sent in Rokt.execute will be used as the cache key.

// to cache the experience for 1200 seconds, using email and orderNumber attributes as the cache key.
const cacheConfig = new CacheConfig(
    1200, 
    {'email': 'j.smith@example.com', 'orderNumber': '123'}
);
const roktConfig = new RoktConfigBuilder()
    .withCacheConfig(cacheConfig)
    .build();
Rokt.execute(
    // other params,
    roktConfig,
)

For more information see how-to section.