React Native Styling

Orientation: Choosing Your Integration Flow, before you begin, please review the Official Integration Flow.

Standard Flow (Full Checkout): Recommended for most merchants. Yuno handles the UI, security, and automatic updates for payment methods.
Custom Flow (This SDK): Use this only if you require full control over the UX. Note: You will be responsible for manually handling payment statuses, 3DS transitions, and fraud routing data collection.

You can customize the look and feel of the Yuno SDK components to match your app’s brand.

Configuration

Styling configuration is passed during the SDK initialization.

import { YunoSdk } from '@yuno-payments/yuno-sdk-react-native';

YunoSdk.initialize({
  apiKey: 'your-public-api-key',
  countryCode: 'US',
  yunoConfig: {
    // Global configuration
    language: 'en',
    theme: {
      // Customize colors, fonts, etc.
      // Note: Specific theme options depend on the native SDK versions
    }
  },
});

Available theme options depend on the native SDK versions bundled with the React Native SDK. See Android Customization and iOS Customization for the full list of tokens.

Platform-specific styling

Since the React Native SDK wraps native iOS and Android SDKs, some styling options might be platform-specific.

import { Platform } from 'react-native';

YunoSdk.initialize({
  apiKey: 'your-key',
  countryCode: 'US',
  ...(Platform.OS === 'ios' && {
    iosConfig: {
      // iOS-specific settings
    },
  }),
  ...(Platform.OS === 'android' && {
    androidConfig: {
      // Android-specific settings
    },
  }),
});

For a full list of available styling tokens, refer to the Android Customization and iOS Customization documentation.

Overview

Seamless SDK

Lite SDK

Headless SDK

Card Enrollment

Additional Features

Resources

Additional Platforms

External Native Modules

Configuration

Platform-specific styling

​Configuration

​Platform-specific styling

Configuration

Platform-specific styling