Preferences.md

Courier Preferences

In-app notification settings that allow your users to customize which of your notifications they receive. Allows you to build high quality, flexible preference settings very quickly.

Requirements

Requirement	Reason
Authentication	Needed to view preferences that belong to a user.

 

Default Preferences View

The default CourierPreferencesView styles.

import { CourierPreferencesView } from '@trycourier/courier-react-native';

<CourierPreferencesView 
  mode={{ type: 'topic' }}
  style={...}
/>

 

Styled Preferences View

The styles you can use to quickly customize the CourierPreferencesView.

import { CourierPreferencesView } from '@trycourier/courier-react-native';

const styles = {
  Fonts: {
    heading: Platform.OS === 'ios' ? 'Avenir Medium' : 'fonts/poppins_regular.otf',
    title: Platform.OS === 'ios' ? 'Avenir Medium' : 'fonts/poppins_regular.otf',
    subtitle: Platform.OS === 'ios' ? 'Avenir Medium' : 'fonts/poppins_regular.otf'
  },
  Colors: {
    heading: isDark ? '#9747FF' : '#9747FF',
    title: isDark ? '#FFFFFF' : '#000000',
    subtitle: isDark ? '#9A9A9A' : '#BEBEBE',
    option: isDark ? '#1F1F1F' : '#F0F0F0',
    action: isDark ? '#9747FF' : '#9747FF',
  },
  TextSizes: {
    heading: 24,
    title: 18,
    subtitle: 16,
  },
  Corners: {
    button: 100
  }
}

const theme = {
  brandId: 'ASDFASDF',
  sectionTitleFont: {
    family: styles.Fonts.heading,
    size: styles.TextSizes.heading,
    color: styles.Colors.heading
  },
  topicTitleFont: {
    family: styles.Fonts.title,
    size: styles.TextSizes.title,
    color: styles.Colors.title
  },
  topicSubtitleFont: {
    family: styles.Fonts.subtitle,
    size: styles.TextSizes.subtitle,
    color: styles.Colors.subtitle
  },
  topicButton: {
    font: {
      family: styles.Fonts.subtitle,
      size: styles.TextSizes.subtitle,
      color: styles.Colors.title
    },
    backgroundColor: styles.Colors.option,
    cornerRadius: styles.Corners.button
  },
  sheetTitleFont: {
    family: styles.Fonts.heading,
    size: styles.TextSizes.heading,
    color: styles.Colors.heading
  },
  infoViewStyle: {
    font: {
      family: styles.Fonts.title,
      size: styles.TextSizes.title,
      color: styles.Colors.title
    },
    button: {
      font: {
        family: styles.Fonts.subtitle,
        size: styles.TextSizes.subtitle,
        color: styles.Colors.action
      },
      backgroundColor: styles.Colors.title,
      cornerRadius: styles.Corners.button
    }
  },
  iOS: {
    topicCellStyles: {
      separatorStyle: 'none'
    },
    sheetSettingStyles: {
      font: {
        family: styles.Fonts.title,
        size: styles.TextSizes.title,
        color: styles.Colors.title
      },
      toggleColor: styles.Colors.action
    },
    sheetCornerRadius: 20,
    sheetCellStyles: {
      separatorStyle: 'none'
    }
  },
  android: {
    topicDividerItemDecoration: 'vertical',
    sheetDividerItemDecoration: 'vertical',
    sheetSettingStyles: {
      font: {
        family: styles.Fonts.title,
        size: styles.TextSizes.title,
        color: styles.Colors.title
      },
      toggleThumbColor: styles.Colors.action,
      toggleTrackColor: styles.Colors.option,
    }
  }
}

<CourierPreferencesView 
  mode={{ 
    type: 'channels', 
    channels: ['push', 'sms', 'email'] 
  }}
  theme={{
    light: theme,
    dark: theme,
  }}
  onScrollPreferences={(y, x) => {
    console.log(`Preferences scroll offset y: ${y}`);
  }}
  onPreferenceError={(error) => {
    console.log(error)
  }}
  style={...}
 />

Courier Studio Branding (Optional)

You can control your branding from the Courier Studio.

Supported Brand Styles	Support
Primary Color	✅
Show/Hide Courier Footer	✅

---

👋 Branding APIs can be found here

👋 Preference APIs can be found here