PostHog · robbie-c · Dec 4, 2025 · Dec 4, 2025 · Dec 4, 2025 · Dec 4, 2025
diff --git a/packages/browser/package.json b/packages/browser/package.json
@@ -52,7 +52,7 @@
         "@posthog/core": "workspace:*",
         "core-js": "^3.38.1",
         "fflate": "^0.4.8",
-        "preact": "^10.19.3",
+        "preact": "^10.27.2",
         "web-vitals": "^4.2.4"
     },
     "devDependencies": {
@@ -85,7 +85,6 @@
         "@types/dotenv": "^8.2.3",
         "@types/jest": "^29.5.12",
         "@types/node": "^22.5.0",
-        "@types/react-dom": "^18.0.10",
         "@types/sinon": "^17.0.1",
         "@types/web": "^0.0.222",
         "babel-jest": "^29.7.0",

@@ -1,4 +1,5 @@
 import * as Preact from 'preact'
+import type { JSX, RefObject } from 'preact'
 import { useContext, useEffect, useMemo, useRef, useState } from 'preact/hooks'
 import { PostHog } from '../posthog-core'
 import {
@@ -185,7 +186,7 @@ const SURVEY_NEXT_TO_TRIGGER_PARAMS = {
     TRIGGER_SPACING: 12,
 } as const
 
-function getNextToTriggerPosition(target: HTMLElement, surveyWidth: number): React.CSSProperties | null {
+function getNextToTriggerPosition(target: HTMLElement, surveyWidth: number): JSX.CSSProperties | null {
     try {
         const buttonRect = target.getBoundingClientRect()
         const viewportHeight = window.innerHeight
@@ -212,7 +213,7 @@ function getNextToTriggerPosition(target: HTMLElement, surveyWidth: number): Rea
             right: 'auto',
             bottom: showAbove ? `${viewportHeight - buttonRect.top + spacing}px` : 'auto',
             zIndex: defaultSurveyAppearance.zIndex,
-        } satisfies React.CSSProperties
+        } satisfies JSX.CSSProperties
     } catch (error) {
         logger.warn('Failed to calculate trigger position:', error)
         return null
@@ -722,7 +723,7 @@ export class SurveyManager {
     }
 }
 
-const DEFAULT_PREVIEW_POSITION_STYLES: React.CSSProperties = {
+const DEFAULT_PREVIEW_POSITION_STYLES: JSX.CSSProperties = {
     position: 'relative',
     left: 'unset',
     right: 'unset',
@@ -745,7 +746,7 @@ export const renderSurveysPreview = ({
     forceDisableHtml?: boolean
     onPreviewSubmit?: (res: string | string[] | number | null) => void
     posthog?: PostHog
-    positionStyles?: React.CSSProperties
+    positionStyles?: JSX.CSSProperties
 }) => {
     const currentStyle = parentElement.querySelector('style[data-ph-survey-style]')
     if (currentStyle) {
@@ -923,7 +924,7 @@ export function usePopupVisibility(
     isPreviewMode: boolean,
     removeSurveyFromFocus: (survey: SurveyWithTypeAndAppearance) => void,
     isPopup: boolean,
-    surveyContainerRef?: React.RefObject<HTMLDivElement>
+    surveyContainerRef?: RefObject<HTMLDivElement>
 ) {
     const [isPopupVisible, setIsPopupVisible] = useState(
         isPreviewMode || millisecondDelay === 0 || survey.type === SurveyType.ExternalSurvey
@@ -1038,7 +1039,7 @@ interface SurveyPopupProps {
     survey: Survey
     forceDisableHtml?: boolean
     posthog?: PostHog
-    style?: React.CSSProperties
+    style?: JSX.CSSProperties
     previewPageIndex?: number | undefined
     removeSurveyFromFocus?: (survey: SurveyWithTypeAndAppearance) => void
     isPopup?: boolean
@@ -1082,7 +1083,7 @@ function getPopoverPosition(
     }
 }
 
-function getTabPositionStyles(position: SurveyTabPosition = SurveyTabPosition.Right): React.CSSProperties {
+function getTabPositionStyles(position: SurveyTabPosition = SurveyTabPosition.Right): JSX.CSSProperties {
     switch (position) {
         case SurveyTabPosition.Top:
             return { top: '0', left: '50%', transform: 'translateX(-50%)' }
@@ -1312,7 +1313,7 @@ export function FeedbackWidget({
 }): JSX.Element | null {
     const [isFeedbackButtonVisible, setIsFeedbackButtonVisible] = useState(true)
     const [showSurvey, setShowSurvey] = useState(false)
-    const [styleOverrides, setStyleOverrides] = useState<React.CSSProperties>({})
+    const [styleOverrides, setStyleOverrides] = useState<JSX.CSSProperties>({})
 
     const toggleSurvey = () => {
         setShowSurvey(!showSurvey)

@@ -1,4 +1,5 @@
 import { Fragment } from 'preact'
+import type { JSX } from 'preact'
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
 import {
     BasicSurveyQuestion,
@@ -368,7 +369,7 @@ export function MultipleChoiceQuestion({
         }
     }
 
-    const handleOpenEndedInputChange = (e: React.FormEvent<HTMLInputElement>) => {
+    const handleOpenEndedInputChange = (e: JSX.TargetedEvent<HTMLInputElement>) => {
         e.stopPropagation()
         const newValue = e.currentTarget.value
 
@@ -382,7 +383,7 @@ export function MultipleChoiceQuestion({
         }
     }
 
-    const handleOpenEndedKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    const handleOpenEndedKeyDown = (e: JSX.TargetedKeyboardEvent<HTMLInputElement>) => {
         e.stopPropagation()
 
         // Handle Enter key to submit form if valid

@@ -1,4 +1,5 @@
 import { VNode, cloneElement, createContext } from 'preact'
+import type { JSX } from 'preact'
 import { PostHog } from '../../posthog-core'
 import {
     MultipleSurveyQuestion,
@@ -585,7 +586,7 @@ interface RenderProps {
     component: VNode<{ className: string }>
     children: string
     renderAsHtml?: boolean
-    style?: React.CSSProperties
+    style?: JSX.CSSProperties
 }
 
 export const renderChildrenAsTextOrHtml = ({ component, children, renderAsHtml, style }: RenderProps) => {

diff --git a/packages/browser/tsconfig.json b/packages/browser/tsconfig.json
@@ -20,9 +20,8 @@
         "resolveJsonModule": true,
         "downlevelIteration": true,
         "declaration": true,
-        "jsx": "preserve",
-        "jsxFactory": "h",
-        "jsxFragmentFactory": "Fragment"
+        "jsx": "react-jsx",
+        "jsxImportSource": "preact"
     },
     "include": ["./src/**/*.ts*"],
     "exclude": ["./src/__tests__/**/*.ts*"]

@@ -0,0 +1,3 @@
+{
+  "plugins": ["expo-localization"]
+}
@@ -44,34 +44,34 @@
   "devDependencies": {
     "@babel/cli": "^7.19.3",
     "@babel/plugin-transform-private-property-in-object": "^7.27.1",
+    "@expo/metro-config": "~0.20.0",
     "@posthog-tooling/rollup-utils": "workspace:*",
     "@posthog-tooling/tsconfig-base": "workspace:*",
-    "@react-native-async-storage/async-storage": "^1.17.10",
+    "@react-native-async-storage/async-storage": "^2.1.2",
     "@react-native/babel-preset": "^0.80.1",
     "@react-navigation/native": "^5.0.10",
-    "@types/react": "^17.0.87",
-    "@types/react-native": "^0.69.1",
     "@types/jest": "catalog:",
-    "expo": "^45.0.6",
-    "expo-application": "^4.0.0",
-    "expo-device": "^4.0.0",
-    "expo-file-system": "^13.0.0",
-    "expo-localization": "^11.0.0",
+    "@types/react": "^19.0.14",
+    "expo": "^53.0.24",
+    "expo-application": "^6.1.5",
+    "expo-device": "^7.1.4",
+    "expo-file-system": "^18.1.11",
+    "expo-localization": "^16.1.6",
     "jest": "catalog:",
     "jest-environment-node": "catalog:",
-    "jest-expo": "catalog:",
-    "metro": "0.83.1",
-    "@expo/metro-config": "~0.20.0",
+    "jest-expo": "~53.0.10",
+    "metro": "0.82.5",
     "posthog-react-native-session-replay": "^1.2.0",
-    "react": "18.2.0",
-    "react-native": "^0.69.1",
+    "react": "19.0.0",
+    "react-native": "^0.79.6",
     "react-native-device-info": "^10.3.0",
     "react-native-localize": "^3.0.0",
     "react-native-navigation": "^6.0.0",
-    "react-native-safe-area-context": "^4.10.1",
-    "react-native-svg": "^15.0.0",
+    "react-native-safe-area-context": "^5.4.0",
+    "react-native-svg": "^15.11.2",
     "ts-jest": "catalog:",
-    "typescript": "catalog:"
+    "typescript": "^5.8.3",
+    "react-server-dom-webpack": "19.0.1"
   },
   "peerDependencies": {
     "@react-native-async-storage/async-storage": ">=1.0.0",

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from 'react'
+import React, { type JSX, useCallback, useEffect, useMemo } from 'react'
 import { GestureResponderEvent, StyleProp, View, ViewStyle } from 'react-native'
 import { PostHog, PostHogOptions } from './posthog-rn'
 import { autocaptureFromTouchEvent } from './autocapture'

@@ -63,8 +63,25 @@ export const getAppProperties = (): PostHogCustomAppProperties => {
   }
 
   if (OptionalExpoLocalization) {
-    properties.$locale = OptionalExpoLocalization.locale
-    properties.$timezone = OptionalExpoLocalization.timezone
+    let locale: string | undefined | null
+    if ('locale' in OptionalExpoLocalization) {
+      locale = (OptionalExpoLocalization as any).locale
+    } else if ('getLocales' in OptionalExpoLocalization) {
+      locale = OptionalExpoLocalization.getLocales()[0]?.languageTag
+    }
+    if (locale) {
+      properties.$locale = locale
+    }
+
+    let timezone: string | undefined | null
+    if ('timezone' in OptionalExpoLocalization) {
+      timezone = (OptionalExpoLocalization as any).timezone
+    } else if ('getCalendars' in OptionalExpoLocalization) {
+      timezone = OptionalExpoLocalization.getCalendars()[0]?.timeZone
+    }
+    if (timezone) {
+      properties.$timezone = timezone
+    }
   } else if (OptionalReactNativeLocalize) {
     const localesFn = OptionalReactNativeLocalize.getLocales
     if (localesFn) {

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { type JSX, useEffect, useMemo, useState } from 'react'
 
 import { dismissedSurveyEvent, sendSurveyShownEvent } from './components/Surveys'
 

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 import { Linking, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 
 import { SurveyAppearanceTheme } from '../surveys-utils'

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 import { StyleSheet, TouchableOpacity } from 'react-native'
 import { CancelSVG } from '../icons'
 

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 import { StyleSheet, Text, View, ViewStyle } from 'react-native'
 
 import { getContrastingTextColor, shouldRenderDescription, SurveyAppearanceTheme } from '../surveys-utils'

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 
 import { SurveyQuestionDescriptionContentType } from '@posthog/core'

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react'
+import React, { type JSX, useMemo, useState } from 'react'
 import { Pressable, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native'
 
 import {

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { type JSX, useCallback, useEffect, useState } from 'react'
 import { Keyboard, KeyboardAvoidingView, Modal, Platform, Pressable, StyleSheet, View } from 'react-native'
 
 import { Cancel } from './Cancel'

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react'
+import React, { type JSX, useMemo, useState } from 'react'
 import { ScrollView, StyleProp, ViewStyle } from 'react-native'
 
 import { getDisplayOrderQuestions, getNextSurveyStep, SurveyAppearanceTheme } from '../surveys-utils'

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 import { Path, Svg, SvgProps } from 'react-native-svg'
 
 export const SatisfiedEmoji = (props: SvgProps): JSX.Element => (