feat(react-native): let surveys cap how far their text scales, per text role

.changeset/rn-survey-max-font-size-multiplier.md

@@ -0,0 +1,5 @@
+---
+'posthog-react-native': minor
+---
+
+feat(react-native): let surveys cap how far their text scales with the OS text-size setting, per text role — `appearance.maxFontSizeMultiplier` takes one number for the whole survey or an object keyed by role (`question`, `description`, `header`, `choice`, `input`, `button`, `ratingLabel`, `ratingNumber`, `validationHint`). Unset, text scales without a ceiling exactly as before.

packages/react-native/src/surveys/PostHogSurveyProvider.tsx

@@ -7,7 +7,7 @@ import { useSurveyStorage } from './useSurveyStorage'
 import { useActivatedSurveys } from './useActivatedSurveys'
 import { SurveyModal } from './components/SurveyModal'
 import { defaultSurveyAppearance, getContrastingTextColor, SurveyAppearanceTheme } from './surveys-utils'
-import { Survey, SurveyAppearance, SurveyType, type SurveyResponses } from '@posthog/core'
+import { Survey, SurveyType, type SurveyResponses } from '@posthog/core'
 import { usePostHog } from '../hooks/usePostHog'
 import { useFeatureFlags } from '../hooks/useFeatureFlags'
 import { PostHog } from '../posthog-rn'
@@ -73,8 +73,12 @@ export type PostHogSurveyProviderProps = {
 
   /**
    * The default appearance for surveys when not specified in PostHog.
+   *
+   * Accepts the React Native-only appearance fields as well (e.g.
+   * `maxFontSizeMultiplier`) — they are merged into the same theme object the
+   * survey components read, and PostHog never sends them down.
    */
-  defaultSurveyAppearance?: SurveyAppearance
+  defaultSurveyAppearance?: Partial<SurveyAppearanceTheme>
 
   /**
    * If true, PosHog appearance will be ignored and defaultSurveyAppearance is always used.

packages/react-native/src/surveys/components/BottomSection.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Linking, Text, TouchableOpacity, View } from 'react-native'
 
 import { createSafeStyleSheet } from '../safeStyleSheet'
-import { SurveyAppearanceTheme } from '../surveys-utils'
+import { getMaxFontSizeMultiplier, SurveyAppearanceTheme } from '../surveys-utils'
 
 export function BottomSection({
   text,
@@ -43,7 +43,12 @@ export function BottomSection({
           }
         }}
       >
-        <Text style={[styles.buttonText, { color: appearance.submitButtonTextColor }]}>{text}</Text>
+        <Text
+          maxFontSizeMultiplier={getMaxFontSizeMultiplier(appearance, 'button')}
+          style={[styles.buttonText, { color: appearance.submitButtonTextColor }]}
+        >
+          {text}
+        </Text>
       </TouchableOpacity>
     </View>
   )

packages/react-native/src/surveys/components/ConfirmationMessage.tsx

@@ -5,6 +5,7 @@ import { createSafeStyleSheet } from '../safeStyleSheet'
 import {
   defaultDescriptionOpacity,
   getContrastingTextColor,
+  getMaxFontSizeMultiplier,
   shouldRenderDescription,
   SurveyAppearanceTheme,
 } from '../surveys-utils'
@@ -33,9 +34,19 @@ export function ConfirmationMessage({
   return (
     <View style={styleOverrides}>
       <View style={styles.thankYouMessageContainer}>
-        <Text style={[styles.thankYouMessageHeader, { color: textColor }]}>{header}</Text>
+        <Text
+          maxFontSizeMultiplier={getMaxFontSizeMultiplier(appearance, 'header')}
+          style={[styles.thankYouMessageHeader, { color: textColor }]}
+        >
+          {header}
+        </Text>
         {shouldRenderDescription(description, contentType) && (
-          <Text style={{ color: textColor, opacity: defaultDescriptionOpacity }}>{description}</Text>
+          <Text
+            maxFontSizeMultiplier={getMaxFontSizeMultiplier(appearance, 'description')}
+            style={{ color: textColor, opacity: defaultDescriptionOpacity }}
+          >
+            {description}
+          </Text>
         )}
       </View>
       {isModal && (

packages/react-native/src/surveys/components/IntroMessage.tsx

@@ -5,6 +5,7 @@ import { createSafeStyleSheet } from '../safeStyleSheet'
 import {
   defaultDescriptionOpacity,
   getContrastingTextColor,
+  getMaxFontSizeMultiplier,
   shouldRenderDescription,
   SurveyAppearanceTheme,
 } from '../surveys-utils'
@@ -29,9 +30,21 @@ export function IntroMessage({
   return (
     <View>
       <View style={styles.introMessageContainer}>
-        {header ? <Text style={[styles.introMessageHeader, { color: textColor }]}>{header}</Text> : null}
+        {header ? (
+          <Text
+            maxFontSizeMultiplier={getMaxFontSizeMultiplier(appearance, 'header')}
+            style={[styles.introMessageHeader, { color: textColor }]}
+          >
+            {header}
+          </Text>
+        ) : null}
         {shouldRenderDescription(description, contentType) && (
-          <Text style={{ color: textColor, opacity: defaultDescriptionOpacity }}>{description}</Text>
+          <Text
+            maxFontSizeMultiplier={getMaxFontSizeMultiplier(appearance, 'description')}
+            style={{ color: textColor, opacity: defaultDescriptionOpacity }}
+          >
+            {description}
+          </Text>
         )}
       </View>
       <BottomSection

packages/react-native/src/surveys/components/QuestionHeader.tsx

@@ -6,6 +6,7 @@ import { createSafeStyleSheet } from '../safeStyleSheet'
 import {
   defaultDescriptionOpacity,
   getContrastingTextColor,
+  getMaxFontSizeMultiplier,
   shouldRenderDescription,
   SurveyAppearanceTheme,
 } from '../surveys-utils'
@@ -26,9 +27,17 @@ export function QuestionHeader({
 
   return (
     <View style={styles.container}>
-      <Text style={[styles.question, { color: textColor }]}>{question}</Text>
+      <Text
+        maxFontSizeMultiplier={getMaxFontSizeMultiplier(appearance, 'question')}
+        style={[styles.question, { color: textColor }]}
+      >
+        {question}
+      </Text>
       {shouldRenderDescription(description, descriptionContentType) && (
-        <Text style={[styles.description, { color: textColor, opacity: defaultDescriptionOpacity }]}>
+        <Text
+          maxFontSizeMultiplier={getMaxFontSizeMultiplier(appearance, 'description')}
+          style={[styles.description, { color: textColor, opacity: defaultDescriptionOpacity }]}
+        >
           {description}
         </Text>
       )}

packages/react-native/src/surveys/components/QuestionTypes.tsx

@@ -15,6 +15,7 @@ import {
 import {
   defaultRatingLabelOpacity,
   getContrastingTextColor,
+  getMaxFontSizeMultiplier,
   getDisplayOrderChoices,
   SurveyAppearanceTheme,
 } from '../surveys-utils'
@@ -121,6 +122,7 @@ export function OpenTextQuestion({
       />
       <View style={styles.textInputContainer}>
         <TextInput
+          maxFontSizeMultiplier={getMaxFontSizeMultiplier(appearance, 'input')}
           style={[
             styles.textInput,
             {
@@ -144,6 +146,7 @@ export function OpenTextQuestion({
         />
         {requirementsHint && (
           <Text
+            maxFontSizeMultiplier={getMaxFontSizeMultiplier(appearance, 'validationHint')}
             style={[
               styles.validationHint,
               { color: appearance.textColor ?? getContrastingTextColor(appearance.backgroundColor) },
@@ -266,6 +269,7 @@ export function RatingQuestion({
         </View>
         <View style={styles.ratingText}>
           <Text
+            maxFontSizeMultiplier={getMaxFontSizeMultiplier(appearance, 'ratingLabel')}
             style={{
               color: appearance.textColor ?? getContrastingTextColor(appearance.backgroundColor),
               opacity: defaultRatingLabelOpacity,
@@ -274,6 +278,7 @@ export function RatingQuestion({
             {question.lowerBoundLabel}
           </Text>
           <Text
+            maxFontSizeMultiplier={getMaxFontSizeMultiplier(appearance, 'ratingLabel')}
             style={{
               color: appearance.textColor ?? getContrastingTextColor(appearance.backgroundColor),
               opacity: defaultRatingLabelOpacity,
@@ -315,7 +320,9 @@ export function RatingButton({
       ]}
       onPress={() => setActiveNumber(num)}
     >
-      <Text style={{ color: textColor }}>{num}</Text>
+      <Text maxFontSizeMultiplier={getMaxFontSizeMultiplier(appearance, 'ratingNumber')} style={{ color: textColor }}>
+        {num}
+      </Text>
     </TouchableOpacity>
   )
 }
@@ -392,14 +399,18 @@ export function MultipleChoiceQuestion({
               }}
             >
               <View style={styles.choiceText}>
-                <Text style={{ flexGrow: 1, color: choiceTextColor }}>
+                <Text
+                  maxFontSizeMultiplier={getMaxFontSizeMultiplier(appearance, 'choice')}
+                  style={{ flexGrow: 1, color: choiceTextColor }}
+                >
                   {choice}
                   {isOpenChoice ? ':' : ''}
                 </Text>
                 <View style={styles.rightCheckArea}>{isSelected && <CheckSVG />}</View>
               </View>
               {isOpenChoice && (
                 <TextInput
+                  maxFontSizeMultiplier={getMaxFontSizeMultiplier(appearance, 'input')}
                   style={styles.openEndedInput}
                   onChangeText={(userValue) => {
                     setOpenEndedInput(userValue)

packages/react-native/src/surveys/components/Surveys.tsx

@@ -2,14 +2,7 @@ import React, { useMemo, useState } from 'react'
 import { StyleProp, ViewStyle } from 'react-native'
 
 import { getDisplayOrderQuestions, getNextSurveyStep, SurveyAppearanceTheme } from '../surveys-utils'
-import {
-  Survey,
-  SurveyAppearance,
-  SurveyQuestion,
-  type SurveyResponses,
-  maybeAdd,
-  SurveyQuestionBranchingType,
-} from '@posthog/core'
+import { Survey, SurveyQuestion, type SurveyResponses, maybeAdd, SurveyQuestionBranchingType } from '@posthog/core'
 import {
   buildSurveyResponseProperties,
   getSurveyInteractionProperty,
@@ -140,7 +133,10 @@ export function Questions({
 
 type GetQuestionComponentProps = {
   question: SurveyQuestion
-  appearance: SurveyAppearance
+  // The question components each declare `SurveyAppearanceTheme`; typing this
+  // intermediate as the shared `SurveyAppearance` dropped every React
+  // Native-only field, which the `as any` below then hid.
+  appearance: SurveyAppearanceTheme
   styleOverrides?: StyleProp<ViewStyle>
   onSubmit: (res: string | string[] | number | null) => void
 }

packages/react-native/src/surveys/surveys-utils.ts

@@ -121,12 +121,85 @@ export const defaultDescriptionOpacity = 0.8
 export const defaultRatingLabelOpacity = 0.7
 
 // textColor and inputTextColor are optional overrides (auto-calculated if not provided)
+/**
+ * The distinct kinds of text a survey renders, each at its own base size. They
+ * are separate because one ceiling cannot serve all of them: `question` is an
+ * 18pt headline that can wrap freely, while `ratingNumber` sits inside a
+ * fixed-width button and has nowhere to grow.
+ */
+export type SurveyTextRole =
+  /** The question headline. */
+  | 'question'
+  /** Body copy under a question, an intro screen, or the thank-you screen. */
+  | 'description'
+  /** The intro-screen and thank-you-screen headers. */
+  | 'header'
+  /** A choice label in a single- or multiple-choice question. */
+  | 'choice'
+  /** Text the user types - the open-text answer and the open-choice field. */
+  | 'input'
+  /** The submit / next button label. */
+  | 'button'
+  /** The lower- and upper-bound labels under a rating scale. */
+  | 'ratingLabel'
+  /** The numeral inside a rating button, which cannot grow past the button. */
+  | 'ratingNumber'
+  /** The validation hint under an open-text answer. */
+  | 'validationHint'
+
 export type SurveyAppearanceTheme = Omit<
   Required<SurveyAppearance>,
   'widgetSelector' | 'widgetType' | 'widgetColor' | 'widgetLabel' | 'shuffleQuestions' | 'textColor' | 'inputTextColor'
 > & {
   textColor?: string
   inputTextColor?: string
+  /**
+   * Caps how far survey text may grow under the OS text-size setting, as a
+   * multiple of its base size - React Native's `maxFontSizeMultiplier`, applied
+   * to every `Text` and `TextInput` the survey renders.
+   *
+   * Pass a number to cap every role at once, or an object to cap them
+   * separately: a survey headline can usually take more scaling than a numeral
+   * inside a rating button, and a host app that already caps its own text by
+   * role will want to match those ceilings here.
+   *
+   * ```ts
+   * maxFontSizeMultiplier: 1.6
+   * // or
+   * maxFontSizeMultiplier: { question: 1.5, description: 1.8, ratingNumber: 1.2 }
+   * ```
+   *
+   * Roles left out of the object are uncapped, as they are today.
+   *
+   * Leave it unset (the default) and survey text scales without a ceiling. That
+   * is what the OS asks for, but not always what a fixed-size survey card can
+   * hold - at the largest accessibility sizes an unbounded 18pt headline renders
+   * roughly one word per line.
+   *
+   * React Native only inherits this prop through nested `Text`, so a host app
+   * cannot apply it from the outside - it has to come in here.
+   *
+   * @default undefined (no ceiling)
+   */
+  maxFontSizeMultiplier?: number | Partial<Record<SurveyTextRole, number>>
+}
+
+/**
+ * The ceiling for one role, from either form of `maxFontSizeMultiplier`.
+ *
+ * Returns `undefined` when nothing is configured for that role, which is also
+ * React Native's "no ceiling" - so an unset appearance renders exactly as it
+ * did before this option existed.
+ */
+export function getMaxFontSizeMultiplier(
+  appearance: Pick<SurveyAppearanceTheme, 'maxFontSizeMultiplier'>,
+  role: SurveyTextRole
+): number | undefined {
+  const configured = appearance.maxFontSizeMultiplier
+  if (typeof configured === 'number') {
+    return configured
+  }
+  return configured?.[role]
 }
 export const defaultSurveyAppearance: SurveyAppearanceTheme = {
   backgroundColor: defaultBackgroundColor,