fix(surveys): react native text colors (#2774)

## Problem

survey text color is hard-coded to black on react native. this means users can't create dark-mode surveys

<!-- Who are we building for, what are their needs, why is this important? -->

## Changes

- adds `inputBackground` to core sdk types
- updates all text colors for surveys in RN to use the contrasting color function, matching browser behavior
- update contrast function to support shorthand hex e.g. `#111`

![survey-rn-demo2.png](https://app.graphite.com/user-attachments/assets/deb27ef6-5340-4f48-8ae1-aec9037139a4.png)

<!-- What is changed and what information would be useful to a reviewer? -->

## Release info Sub-libraries affected

### Libraries affected

<!-- Please mark which libraries will require a version bump. -->

- [ ] All of them
- [ ] posthog-js (web)
- [ ] posthog-js-lite (web lite)
- [ ] posthog-node
- [x] posthog-react-native
- [ ] @posthog/react
- [ ] @posthog/ai
- [ ] @posthog/nextjs-config
- [ ] @posthog/nuxt
- [ ] @posthog/rollup-plugin
- [ ] @posthog/webpack-plugin

## Checklist

- [ ] Tests for new code
- [x] Accounted for the impact of any changes across different platforms
- [x] Accounted for backwards compatibility of any changes (no breaking changes!)
- [x] Took care not to unnecessarily increase the bundle size

### If releasing new changes

- [x] Ran `pnpm changeset` to generate a changeset file
- [x] Added the "release" label to the PR to indicate we're publishing new versions for the affected packages

<!-- For more details check RELEASING.md -->

Author: adboio

.changeset/wide-dolls-chew.md

@@ -0,0 +1,6 @@
+---
+'posthog-react-native': minor
+'@posthog/core': minor
+---
+
+fix survey text color on react native

packages/core/src/types.ts

@@ -300,6 +300,7 @@ export type SurveyAppearance = {
   submitButtonTextColor?: string
   ratingButtonColor?: string
   ratingButtonActiveColor?: string
+  inputBackground?: string
   autoDisappear?: boolean
   displayThankYouMessage?: boolean
   thankYouMessageHeader?: string

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

@@ -1,7 +1,12 @@
 import React from 'react'
 import { StyleSheet, Text, View, ViewStyle } from 'react-native'
 
-import { getContrastingTextColor, shouldRenderDescription, SurveyAppearanceTheme } from '../surveys-utils'
+import {
+  defaultDescriptionOpacity,
+  getContrastingTextColor,
+  shouldRenderDescription,
+  SurveyAppearanceTheme,
+} from '../surveys-utils'
 import { SurveyQuestionDescriptionContentType } from '@posthog/core'
 import { BottomSection } from './BottomSection'
 
@@ -28,7 +33,9 @@ export function ConfirmationMessage({
     <View style={styleOverrides}>
       <View style={styles.thankYouMessageContainer}>
         <Text style={[styles.thankYouMessageHeader, { color: textColor }]}>{header}</Text>
-        {shouldRenderDescription(description, contentType) && <Text>{description}</Text>}
+        {shouldRenderDescription(description, contentType) && (
+          <Text style={{ color: textColor, opacity: defaultDescriptionOpacity }}>{description}</Text>
+        )}
       </View>
       {isModal && (
         <BottomSection

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

@@ -2,22 +2,33 @@ import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 
 import { SurveyQuestionDescriptionContentType } from '@posthog/core'
-import { shouldRenderDescription } from '../surveys-utils'
+import {
+  defaultDescriptionOpacity,
+  getContrastingTextColor,
+  shouldRenderDescription,
+  SurveyAppearanceTheme,
+} from '../surveys-utils'
 
 export function QuestionHeader({
   question,
   description,
   descriptionContentType,
+  appearance,
 }: {
   question: string
   description?: string | null
   descriptionContentType?: SurveyQuestionDescriptionContentType
+  appearance: SurveyAppearanceTheme
 }): JSX.Element {
+  const textColor = getContrastingTextColor(appearance.backgroundColor)
+
   return (
     <View style={styles.container}>
-      <Text style={styles.question}>{question}</Text>
+      <Text style={[styles.question, { color: textColor }]}>{question}</Text>
       {shouldRenderDescription(description, descriptionContentType) && (
-        <Text style={styles.description}>{description}</Text>
+        <Text style={[styles.description, { color: textColor, opacity: defaultDescriptionOpacity }]}>
+          {description}
+        </Text>
       )}
     </View>
   )

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

@@ -9,7 +9,12 @@ import {
   VeryDissatisfiedEmoji,
   VerySatisfiedEmoji,
 } from '../icons'
-import { getContrastingTextColor, getDisplayOrderChoices, SurveyAppearanceTheme } from '../surveys-utils'
+import {
+  defaultRatingLabelOpacity,
+  getContrastingTextColor,
+  getDisplayOrderChoices,
+  SurveyAppearanceTheme,
+} from '../surveys-utils'
 import {
   SurveyQuestion,
   SurveyRatingDisplay,
@@ -41,13 +46,25 @@ export function OpenTextQuestion({
         question={question.question}
         description={question.description}
         descriptionContentType={question.descriptionContentType}
+        appearance={appearance}
       />
       <View style={styles.textInputContainer}>
         <TextInput
-          style={styles.textInput}
+          style={[
+            styles.textInput,
+            {
+              backgroundColor: appearance.inputBackground,
+              color: getContrastingTextColor(appearance.inputBackground),
+            },
+          ]}
           multiline
           numberOfLines={4}
           placeholder={appearance.placeholder}
+          placeholderTextColor={
+            getContrastingTextColor(appearance.inputBackground) === 'black'
+              ? 'rgba(0, 0, 0, 0.5)'
+              : 'rgba(255, 255, 255, 0.5)'
+          }
           onChangeText={setText}
           value={text}
         />
@@ -77,6 +94,7 @@ export function LinkQuestion({
         question={question.question}
         description={question.description}
         descriptionContentType={question.descriptionContentType}
+        appearance={appearance}
       />
       <BottomSection
         text={question.buttonText ?? appearance.submitButtonText ?? 'Submit'}
@@ -106,6 +124,7 @@ export function RatingQuestion({
         question={question.question}
         description={question.description}
         descriptionContentType={question.descriptionContentType}
+        appearance={appearance}
       />
       <View style={styles.ratingSection}>
         <View style={styles.ratingOptions}>
@@ -140,8 +159,16 @@ export function RatingQuestion({
           )}
         </View>
         <View style={styles.ratingText}>
-          <Text>{question.lowerBoundLabel}</Text>
-          <Text>{question.upperBoundLabel}</Text>
+          <Text
+            style={{ color: getContrastingTextColor(appearance.backgroundColor), opacity: defaultRatingLabelOpacity }}
+          >
+            {question.lowerBoundLabel}
+          </Text>
+          <Text
+            style={{ color: getContrastingTextColor(appearance.backgroundColor), opacity: defaultRatingLabelOpacity }}
+          >
+            {question.upperBoundLabel}
+          </Text>
         </View>
       </View>
       <BottomSection
@@ -204,16 +231,23 @@ export function MultipleChoiceQuestion({
         question={question.question}
         description={question.description}
         descriptionContentType={question.descriptionContentType}
+        appearance={appearance}
       />
       <View style={styles.multipleChoiceOptions}>
         {choices.map((choice: string, idx: number) => {
           const isOpenChoice = choice === openChoice
           const isSelected = selectedChoices.includes(choice)
 
+          const inputTextColor = getContrastingTextColor(appearance.inputBackground)
+
           return (
             <Pressable
               key={idx}
-              style={[styles.choiceOption, isSelected ? { borderColor: 'black' } : {}]}
+              style={[
+                styles.choiceOption,
+                { backgroundColor: appearance.inputBackground },
+                isSelected ? { borderColor: getContrastingTextColor(appearance.backgroundColor) } : {},
+              ]}
               onPress={() => {
                 if (allowMultiple) {
                   setSelectedChoices(
@@ -225,7 +259,7 @@ export function MultipleChoiceQuestion({
               }}
             >
               <View style={styles.choiceText}>
-                <Text style={{ flexGrow: 1 }}>
+                <Text style={{ flexGrow: 1, color: inputTextColor }}>
                   {choice}
                   {isOpenChoice ? ':' : ''}
                 </Text>
@@ -294,7 +328,6 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     padding: 10,
     marginVertical: 10,
-    backgroundColor: 'white',
     fontSize: 16,
   },
   ratingSection: {
@@ -343,7 +376,6 @@ const styles = StyleSheet.create({
     borderColor: 'grey',
     borderRadius: 5,
     padding: 10,
-    backgroundColor: 'white',
   },
   choiceText: {
     flexDirection: 'row',

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

@@ -37,6 +37,8 @@ export function shouldRenderDescription(
 }
 
 export const defaultBackgroundColor = '#eeeded' as const
+export const defaultDescriptionOpacity = 0.8
+export const defaultRatingLabelOpacity = 0.7
 
 export type SurveyAppearanceTheme = Omit<
   Required<SurveyAppearance>,
@@ -48,6 +50,7 @@ export const defaultSurveyAppearance: SurveyAppearanceTheme = {
   submitButtonTextColor: 'white',
   ratingButtonColor: 'white',
   ratingButtonActiveColor: 'black',
+  inputBackground: 'white',
   borderColor: '#c9c6c6',
   placeholder: 'Start typing...',
   displayThankYouMessage: true,
@@ -290,7 +293,11 @@ export function getContrastingTextColor(color: string): 'black' | 'white' {
 
 function hex2rgb(c: string): string {
   if (c.startsWith('#')) {
-    const hexColor = c.replace(/^#/, '')
+    let hexColor = c.replace(/^#/, '')
+    // Handle 3-character shorthand (e.g., #111 -> #111111, #abc -> #aabbcc)
+    if (/^[0-9A-Fa-f]{3}$/.test(hexColor)) {
+      hexColor = hexColor[0] + hexColor[0] + hexColor[1] + hexColor[1] + hexColor[2] + hexColor[2]
+    }
     if (!/^[0-9A-Fa-f]{6}$/.test(hexColor)) {
       return 'rgb(255, 255, 255)'
     }