From a19b9fca2bfd97514cd2185dca7604a896176169 Mon Sep 17 00:00:00 2001
From: Ian Craig <ian.craig@slyp.com.au>
Date: Sat, 4 Jan 2025 14:38:01 +1100
Subject: [PATCH 1/8] Copy in react native surveys port

---
 posthog-core/src/types.ts                     |   2 +
 posthog-react-native/index.ts                 |   1 +
 posthog-react-native/package.json             |   2 +
 posthog-react-native/src/posthog-rn.ts        |  26 ++
 .../src/surveys/PostHogSurveyProvider.tsx     | 170 +++++++++
 posthog-react-native/src/surveys/Readme.md    | 122 ++++++
 .../src/surveys/components/BottomSection.tsx  |  49 +++
 .../src/surveys/components/Cancel.tsx         |  31 ++
 .../components/ConfirmationMessage.tsx        |  53 +++
 .../src/surveys/components/QuestionHeader.tsx |  35 ++
 .../src/surveys/components/QuestionTypes.tsx  | 349 ++++++++++++++++++
 .../src/surveys/components/SurveyModal.tsx    | 103 ++++++
 .../src/surveys/components/Surveys.tsx        | 132 +++++++
 .../src/surveys/getActiveMatchingSurveys.ts   |  63 ++++
 posthog-react-native/src/surveys/icons.tsx    |  49 +++
 posthog-react-native/src/surveys/index.ts     |   6 +
 .../src/surveys/posthog-surveys-types.ts      | 199 ++++++++++
 .../src/surveys/surveys-utils.ts              | 276 ++++++++++++++
 .../src/surveys/useActivatedSurveys.ts        |  44 +++
 .../src/surveys/useSurveyStorage.ts           |  59 +++
 yarn.lock                                     | 121 ++++--
 21 files changed, 1864 insertions(+), 28 deletions(-)
 create mode 100644 posthog-react-native/src/surveys/PostHogSurveyProvider.tsx
 create mode 100644 posthog-react-native/src/surveys/Readme.md
 create mode 100644 posthog-react-native/src/surveys/components/BottomSection.tsx
 create mode 100644 posthog-react-native/src/surveys/components/Cancel.tsx
 create mode 100644 posthog-react-native/src/surveys/components/ConfirmationMessage.tsx
 create mode 100644 posthog-react-native/src/surveys/components/QuestionHeader.tsx
 create mode 100644 posthog-react-native/src/surveys/components/QuestionTypes.tsx
 create mode 100644 posthog-react-native/src/surveys/components/SurveyModal.tsx
 create mode 100644 posthog-react-native/src/surveys/components/Surveys.tsx
 create mode 100644 posthog-react-native/src/surveys/getActiveMatchingSurveys.ts
 create mode 100644 posthog-react-native/src/surveys/icons.tsx
 create mode 100644 posthog-react-native/src/surveys/index.ts
 create mode 100644 posthog-react-native/src/surveys/posthog-surveys-types.ts
 create mode 100644 posthog-react-native/src/surveys/surveys-utils.ts
 create mode 100644 posthog-react-native/src/surveys/useActivatedSurveys.ts
 create mode 100644 posthog-react-native/src/surveys/useSurveyStorage.ts

diff --git a/posthog-core/src/types.ts b/posthog-core/src/types.ts
index 53681162..ab73a1a8 100644
--- a/posthog-core/src/types.ts
+++ b/posthog-core/src/types.ts
@@ -62,6 +62,8 @@ export enum PostHogPersistedProperty {
   InstalledAppVersion = 'installed_app_version', // only used by posthog-react-native
   SessionReplay = 'session_replay', // only used by posthog-react-native
   DecideEndpointWasHit = 'decide_endpoint_was_hit', // only used by posthog-react-native
+  SurveyLastSeenDate = 'survey_last_seen_date', // only used by posthog-react-native
+  SurveysSeen = 'surveys_seen', // only used by posthog-react-native
 }
 
 export type PostHogFetchOptions = {
diff --git a/posthog-react-native/index.ts b/posthog-react-native/index.ts
index f47c71a8..bb2fe203 100644
--- a/posthog-react-native/index.ts
+++ b/posthog-react-native/index.ts
@@ -9,3 +9,4 @@ export * from './src/hooks/useFeatureFlag'
 export * from './src/hooks/usePostHog'
 export * from './src/PostHogProvider'
 export * from './src/types'
+export * from './src/surveys'
diff --git a/posthog-react-native/package.json b/posthog-react-native/package.json
index 27ead4de..c0149c92 100644
--- a/posthog-react-native/package.json
+++ b/posthog-react-native/package.json
@@ -33,6 +33,7 @@
     "react-native": "^0.69.1",
     "react-native-device-info": "^10.3.0",
     "react-native-navigation": "^6.0.0",
+    "react-native-svg": "^15.2.0",
     "posthog-react-native-session-replay": "^0.1"
   },
   "peerDependencies": {
@@ -44,6 +45,7 @@
     "expo-localization": ">= 11.0.0",
     "react-native-device-info": ">= 10.0.0",
     "react-native-navigation": ">=6.0.0",
+    "react-native-svg": ">= 15.2.0",
     "posthog-react-native-session-replay": "^0.1"
   },
   "peerDependenciesMeta": {
diff --git a/posthog-react-native/src/posthog-rn.ts b/posthog-react-native/src/posthog-rn.ts
index 93a0f686..7d42678b 100644
--- a/posthog-react-native/src/posthog-rn.ts
+++ b/posthog-react-native/src/posthog-rn.ts
@@ -22,6 +22,7 @@ import {
 } from './types'
 import { withReactNativeNavigation } from './frameworks/wix-navigation'
 import { OptionalReactNativeSessionReplay } from './optional/OptionalSessionReplay'
+import { Survey, SurveyResponse } from './surveys/posthog-surveys-types'
 
 export type PostHogOptions = PostHogCoreOptions & {
   /** Allows you to provide the storage type. By default 'file'.
@@ -451,4 +452,29 @@ export class PostHog extends PostHogCore {
     this.setPersistedProperty(PostHogPersistedProperty.InstalledAppBuild, appBuild)
     this.setPersistedProperty(PostHogPersistedProperty.InstalledAppVersion, appVersion)
   }
+
+  /**
+   * @todo Where should this go, and should the result be cached?
+   * I can't find a public method in PostHog which does an authenticated fetch,
+   * so for now I've included the fetch here so it can access the api key.
+   */
+  public async fetchSurveys(): Promise<Survey[]> {
+    const response = await this.fetch(
+      // PostHog Dashboard complains I'm using an old SDK version, I think because the ver query param isn't provided.
+      // TODO I've pulled a recent version from posthog-js, but this should be updated.
+      `${this.host}/api/surveys/?token=${this.apiKey}&ver=1.200.0`,
+      {
+        method: 'GET',
+        headers: this.getCustomHeaders(),
+      }
+    )
+
+    if (response.status > 300) {
+      // TODO Best practice for handling this?
+      throw new Error('Failed to fetch PostHog surveys')
+    }
+
+    const json = (await response.json()) as SurveyResponse
+    return json.surveys
+  }
 }
diff --git a/posthog-react-native/src/surveys/PostHogSurveyProvider.tsx b/posthog-react-native/src/surveys/PostHogSurveyProvider.tsx
new file mode 100644
index 00000000..ba7ba9a4
--- /dev/null
+++ b/posthog-react-native/src/surveys/PostHogSurveyProvider.tsx
@@ -0,0 +1,170 @@
+import React, { useEffect, useMemo, useState } from 'react'
+
+import { dismissedSurveyEvent, sendSurveyShownEvent } from './components/Surveys'
+
+import { getActiveMatchingSurveys } from './getActiveMatchingSurveys'
+import { useSurveyStorage } from './useSurveyStorage'
+import { useActivatedSurveys } from './useActivatedSurveys'
+import { SurveyModal } from './components/SurveyModal'
+import { defaultSurveyAppearance, getContrastingTextColor, SurveyAppearanceTheme } from './surveys-utils'
+import { Survey, SurveyAppearance } from './posthog-surveys-types'
+import { usePostHog } from '../hooks/usePostHog'
+import { useFeatureFlags } from '../hooks/useFeatureFlags'
+
+type ActiveSurveyContextType = { survey: Survey; onShow: () => void; onClose: (submitted: boolean) => void } | undefined
+const ActiveSurveyContext = React.createContext<ActiveSurveyContextType>(undefined)
+export const useActiveSurvey = (): ActiveSurveyContextType => React.useContext(ActiveSurveyContext)
+
+type FeedbackSurveyHook = {
+  survey: Survey
+  showSurveyModal: () => void
+  hideSurveyModal: () => void
+}
+const FeedbackSurveyContext = React.createContext<
+  | {
+      surveys: Survey[]
+      activeSurvey: Survey | undefined
+      setActiveSurvey: React.Dispatch<React.SetStateAction<Survey | undefined>>
+    }
+  | undefined
+>(undefined)
+export const useFeedbackSurvey = (selector: string): FeedbackSurveyHook | undefined => {
+  const context = React.useContext(FeedbackSurveyContext)
+  const survey = context?.surveys.find(
+    (survey) => survey.type === 'widget' && survey.appearance?.widgetSelector === selector
+  )
+  if (!context || !survey) {
+    return undefined
+  }
+
+  return {
+    survey,
+    showSurveyModal: () => context.setActiveSurvey(survey),
+    hideSurveyModal: () => {
+      if (context.activeSurvey === survey) {
+        context.setActiveSurvey(undefined)
+      }
+    },
+  }
+}
+
+export type PostHogSurveyProviderProps = {
+  /**
+   * Whether to show the default survey modal when there is an active survey. (Default true)
+   * If false, you can call useActiveSurvey and render survey content yourself.
+   **/
+  automaticSurveyModal?: boolean
+
+  /**
+   * The default appearance for surveys when not specified in PostHog.
+   */
+  defaultSurveyAppearance?: SurveyAppearance
+
+  /**
+   * If true, PosHog appearance will be ignored and defaultSurveyAppearance is always used.
+   */
+  overrideAppearanceWithDefault?: boolean
+
+  children: React.ReactNode
+}
+
+export function PostHogSurveyProvider(props: PostHogSurveyProviderProps): JSX.Element {
+  const posthog = usePostHog()
+  const { seenSurveys, setSeenSurvey, lastSeenSurveyDate, setLastSeenSurveyDate } = useSurveyStorage()
+  const [surveys, setSurveys] = useState<Survey[]>([])
+  const [activeSurvey, setActiveSurvey] = useState<Survey | undefined>(undefined)
+  const activatedSurveys = useActivatedSurveys(posthog, surveys)
+
+  //TODO Why is this untyped?
+   
+  const flags: Record<string, string | boolean> | undefined = useFeatureFlags(posthog)
+
+  // Load surveys once
+  useEffect(() => {
+    posthog
+      .fetchSurveys()
+      .then(setSurveys)
+      .catch((error: unknown) => {
+        posthog.capture('PostHogSurveyProvider failed to fetch surveys', { error })
+      })
+  }, [posthog])
+
+  // Whenever state changes and there's no active survey, check if there is a new survey to show
+  useEffect(() => {
+    if (activeSurvey || !props.automaticSurveyModal) {
+      return
+    }
+
+    const activeSurveys = getActiveMatchingSurveys(
+      surveys,
+      flags ?? {},
+      seenSurveys,
+      activatedSurveys,
+      lastSeenSurveyDate
+    )
+    const popoverSurveys = activeSurveys.filter((survey) => survey.type === 'popover')
+    const popoverSurveyQueue = sortSurveysByAppearanceDelay(popoverSurveys)
+
+    if (popoverSurveyQueue.length > 0) {
+      setActiveSurvey(popoverSurveyQueue[0])
+    }
+  }, [activeSurvey, flags, surveys, seenSurveys, activatedSurveys, lastSeenSurveyDate, props.automaticSurveyModal])
+
+  // Merge survey appearance so that components and hooks can use a consistent model
+  const surveyAppearance = useMemo<SurveyAppearanceTheme>(() => {
+    if (props.overrideAppearanceWithDefault || !activeSurvey) {
+      return {
+        ...defaultSurveyAppearance,
+        ...(props.defaultSurveyAppearance ?? {}),
+      }
+    }
+    return {
+      ...defaultSurveyAppearance,
+      ...(props.defaultSurveyAppearance ?? {}),
+      ...(activeSurvey.appearance ?? {}),
+      // If submitButtonColor is set by PostHog, ensure submitButtonTextColor is also set to contrast
+      ...(activeSurvey.appearance?.submitButtonColor
+        ? {
+            submitButtonTextColor:
+              activeSurvey.appearance.submitButtonTextColor ??
+              getContrastingTextColor(activeSurvey.appearance.submitButtonColor),
+          }
+        : {}),
+    }
+  }, [activeSurvey, props.defaultSurveyAppearance, props.overrideAppearanceWithDefault])
+
+  const activeContext = useMemo(() => {
+    if (!activeSurvey) {
+      return undefined
+    }
+    return {
+      survey: activeSurvey,
+      onShow: () => {
+        sendSurveyShownEvent(activeSurvey, posthog)
+        setLastSeenSurveyDate(new Date())
+      },
+      onClose: (submitted: boolean) => {
+        setSeenSurvey(activeSurvey.id)
+        setActiveSurvey(undefined)
+        if (!submitted) {
+          dismissedSurveyEvent(activeSurvey, posthog)
+        }
+      },
+    }
+  }, [activeSurvey, posthog, setLastSeenSurveyDate, setSeenSurvey])
+
+  return (
+    <ActiveSurveyContext.Provider value={activeContext}>
+      <FeedbackSurveyContext.Provider value={{ surveys, activeSurvey, setActiveSurvey }}>
+        {props.children}
+        {activeContext && <SurveyModal appearance={surveyAppearance} {...activeContext} />}
+      </FeedbackSurveyContext.Provider>
+    </ActiveSurveyContext.Provider>
+  )
+}
+
+function sortSurveysByAppearanceDelay(surveys: Survey[]): Survey[] {
+  return surveys.sort(
+    (a, b) => (a.appearance?.surveyPopupDelaySeconds ?? 0) - (b.appearance?.surveyPopupDelaySeconds ?? 0)
+  )
+}
diff --git a/posthog-react-native/src/surveys/Readme.md b/posthog-react-native/src/surveys/Readme.md
new file mode 100644
index 00000000..87d69f7f
--- /dev/null
+++ b/posthog-react-native/src/surveys/Readme.md
@@ -0,0 +1,122 @@
+# PostHog React Native Surveys
+
+A port of survey UI and hooks from [poshog-js](https://github.com/PostHog/posthog-js) to React Native.
+
+Adds support for popover and manually triggered surveys when using posthog-react-native.
+
+## Usage
+
+Add `PostHogSurveyProvider` to your app anywhere inside `PostHogProvider`. This component fetches surveys and provides hooks described below. It also acts as the root for where popover surveys are rendered.
+
+```tsx
+<PostHogProvider /*... your config ...*/>
+  <PostHogSurveyProvider>{children}</PostHogSurveyProvider>
+</PostHogProvider>
+```
+
+Survey appearance respects settings in the Customization section of the survey setup.
+If you want to override this so that all surveys use your app theme, you can set
+
+```tsx
+<PostHogProvider /*... your config ...*/>
+  <PostHogSurveyProvider
+        overrideAppearanceWithDefault={true}
+        defaultSurveyAppearance={{ ... }}>
+    {children}
+</PostHogSurveyProvider>
+</PostHogProvider>
+```
+
+### Feedback Button Surveys
+
+While this library doesn't provide the beta Feedback Widget UI, you can manually trigger a survey using your own button by using the `useFeedbackSurvey` hook.
+
+When creating your survey in PostHog set:
+
+- Presentation = Feedback button
+- Customization -> Feedback button type = Custom
+- Customization -> Class or ID selector = The value you pass to `useFeedbackSurvey`
+
+```ts
+export function FeedbackButton() {
+  const feedbackSurvey = useFeedbackSurvey('MySurveySelector')
+
+  const onPress = () => {
+    if (feedbackSurvey) {
+      feedbackSurvey.showSurveyModal()
+    } else {
+      // Your fallback in case this survey doesn't exist
+    }
+  }
+
+  return <Button onPress={onPress} title="Send Feedback" />
+}
+```
+
+### Custom Components
+
+By default, popover surveys are shown automatically. You can disable this by setting `automaticSurveyModal={false}`.
+
+The hook `useActiveSurvey` will return the survey that should currently be displayed.
+You can also import the `<Questions>` component directly and pass your own survey appearance if you'd like to reuse the survey content in your own modal or screen.
+
+```ts
+import { useActiveSurvey, type SurveyAppearance } from 'posthog-react-native-surveys'
+
+const appearance: SurveyAppearance = {
+  // ... Your theme here
+}
+
+export function SurveyScreen() {
+  const activeSurvey = useActiveSurvey()
+  if (!activeSurvey) return null
+
+  const { survey, onShow, onClose } = activeSurvey
+
+  const onSubmit = () => {
+    // e.g. you might show your own thank you message here
+    onClose()
+  }
+
+  useEffect(() => {
+    // Call this once when the survey is show
+    onShow()
+  }, [onShow])
+
+  return (
+    <View style={styles.surveyScreen}>
+      <Questions
+        survey={survey}
+        onSubmit={onSubmit}
+        appearance={appearance}
+        styleOverride={styles.surveyScrollViewStyle}
+      />
+    </View>
+  )
+}
+```
+
+## Supported Features
+
+| Feature                           | Support                            |
+| --------------------------------- | ---------------------------------- |
+| **Questions**                     |                                    |
+| All question types                | ✅                                 |
+| Multi-question surveys            | ✅                                 |
+| Confirmation message              | ✅ When using default modal UI     |
+| **Feedback Button Presentation**  |                                    |
+| Custom feedback button            | ✅ Via `useFeedbackSurvey` hook    |
+| Pre-built feedback tab            | ❌                                 |
+| **Customization / Appearance**    | _When using default modal UI_      |
+| Set colors in PostHog Dashboard   | ✅ Or override with your app theme |
+| Shuffle Questions                 | ✅                                 |
+| PostHog branding                  | ❌ Always off                      |
+| Delay popup after page load       | ✅                                 |
+| Position config                   | ❌ Always bottom center            |
+| **Display conditions**            |                                    |
+| Feature flag & property targeting | ✅                                 |
+| URL Targeting                     | ❌                                 |
+| CSS Selector Matches              | ❌                                 |
+| Survey Wait period                | ✅                                 |
+| Event Triggers                    | ✅                                 |
+| Action Triggers                   | ❌                                 |
diff --git a/posthog-react-native/src/surveys/components/BottomSection.tsx b/posthog-react-native/src/surveys/components/BottomSection.tsx
new file mode 100644
index 00000000..46257a1d
--- /dev/null
+++ b/posthog-react-native/src/surveys/components/BottomSection.tsx
@@ -0,0 +1,49 @@
+import React from 'react'
+import { Linking, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+
+import { SurveyAppearanceTheme } from '../surveys-utils'
+
+export function BottomSection({
+  text,
+  submitDisabled,
+  appearance,
+  onSubmit,
+  link,
+}: {
+  text: string
+  submitDisabled: boolean
+  appearance: SurveyAppearanceTheme
+  onSubmit: () => void
+  link?: string | null
+}): JSX.Element {
+  return (
+    <View style={styles.bottomSection}>
+      <TouchableOpacity
+        style={[styles.button, { backgroundColor: appearance.submitButtonColor }]}
+        disabled={submitDisabled}
+        onPress={() => {
+          if (link) {
+            Linking.openURL(link)
+          }
+          onSubmit()
+        }}
+      >
+        <Text style={[styles.buttonText, { color: appearance.submitButtonTextColor }]}>{text}</Text>
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  bottomSection: {
+    padding: 10,
+  },
+  button: {
+    padding: 10,
+    borderRadius: 5,
+    alignItems: 'center',
+  },
+  buttonText: {
+    fontSize: 16,
+  },
+})
diff --git a/posthog-react-native/src/surveys/components/Cancel.tsx b/posthog-react-native/src/surveys/components/Cancel.tsx
new file mode 100644
index 00000000..a8ff189a
--- /dev/null
+++ b/posthog-react-native/src/surveys/components/Cancel.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { StyleSheet, TouchableOpacity } from 'react-native'
+import { CancelSVG } from '../icons'
+
+import { SurveyAppearanceTheme } from '../surveys-utils'
+
+export function Cancel({
+  onPress,
+  appearance,
+}: {
+  onPress: () => void
+  appearance: SurveyAppearanceTheme
+}): JSX.Element {
+  return (
+    <TouchableOpacity style={[styles.cancelBtnWrapper, { borderColor: appearance.borderColor }]} onPress={onPress}>
+      <CancelSVG />
+    </TouchableOpacity>
+  )
+}
+
+const styles = StyleSheet.create({
+  cancelBtnWrapper: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    borderWidth: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'white',
+  },
+})
diff --git a/posthog-react-native/src/surveys/components/ConfirmationMessage.tsx b/posthog-react-native/src/surveys/components/ConfirmationMessage.tsx
new file mode 100644
index 00000000..346e69ae
--- /dev/null
+++ b/posthog-react-native/src/surveys/components/ConfirmationMessage.tsx
@@ -0,0 +1,53 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+import { getContrastingTextColor, SurveyAppearanceTheme } from '../surveys-utils'
+import { SurveyQuestionDescriptionContentType } from '../posthog-surveys-types'
+import { BottomSection } from './BottomSection'
+
+export function ConfirmationMessage({
+  appearance,
+  header,
+  description,
+  contentType,
+  onClose,
+  styleOverrides,
+  isModal,
+}: {
+  appearance: SurveyAppearanceTheme
+  header: string
+  description: string
+  contentType?: SurveyQuestionDescriptionContentType
+  onClose: () => void
+  styleOverrides?: object
+  isModal: boolean
+}): JSX.Element {
+  const textColor = getContrastingTextColor(appearance.backgroundColor)
+
+  return (
+    <View style={styleOverrides}>
+      <View style={styles.thankYouMessageContainer}>
+        <Text style={[styles.thankYouMessageHeader, { color: textColor }]}>{header}</Text>
+        {description && contentType === 'text' && <Text>{description} </Text>}
+      </View>
+      {isModal && (
+        <BottomSection
+          text={appearance.thankYouMessageCloseButtonText}
+          submitDisabled={false}
+          appearance={appearance}
+          onSubmit={onClose}
+        />
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  thankYouMessageContainer: {
+    padding: 10,
+  },
+  thankYouMessageHeader: {
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+})
diff --git a/posthog-react-native/src/surveys/components/QuestionHeader.tsx b/posthog-react-native/src/surveys/components/QuestionHeader.tsx
new file mode 100644
index 00000000..db4799aa
--- /dev/null
+++ b/posthog-react-native/src/surveys/components/QuestionHeader.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+import { SurveyQuestionDescriptionContentType } from '../posthog-surveys-types'
+
+export function QuestionHeader({
+  question,
+  description,
+  descriptionContentType,
+}: {
+  question: string
+  description?: string | null
+  descriptionContentType?: SurveyQuestionDescriptionContentType
+}): JSX.Element {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.question}>{question}</Text>
+      {description && descriptionContentType === 'text' && <Text style={styles.description}>{description} </Text>}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 10,
+  },
+  question: {
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  description: {
+    fontSize: 14,
+    marginTop: 5,
+  },
+})
diff --git a/posthog-react-native/src/surveys/components/QuestionTypes.tsx b/posthog-react-native/src/surveys/components/QuestionTypes.tsx
new file mode 100644
index 00000000..535535a9
--- /dev/null
+++ b/posthog-react-native/src/surveys/components/QuestionTypes.tsx
@@ -0,0 +1,349 @@
+import React, { useMemo, useState } from 'react'
+import { Pressable, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native'
+
+import {
+  CheckSVG,
+  DissatisfiedEmoji,
+  NeutralEmoji,
+  SatisfiedEmoji,
+  VeryDissatisfiedEmoji,
+  VerySatisfiedEmoji,
+} from '../icons'
+import { getContrastingTextColor, getDisplayOrderChoices, SurveyAppearanceTheme } from '../surveys-utils'
+import {
+  BasicSurveyQuestion,
+  LinkSurveyQuestion,
+  MultipleSurveyQuestion,
+  RatingSurveyQuestion,
+} from '../posthog-surveys-types'
+import { BottomSection } from './BottomSection'
+import { QuestionHeader } from './QuestionHeader'
+
+export function OpenTextQuestion({
+  question,
+  appearance,
+  onSubmit,
+}: {
+  question: BasicSurveyQuestion
+  appearance: SurveyAppearanceTheme
+  onSubmit: (text: string) => void
+}): JSX.Element {
+  const [text, setText] = useState('')
+
+  return (
+    <View>
+      <QuestionHeader
+        question={question.question}
+        description={question.description}
+        descriptionContentType={question.descriptionContentType}
+      />
+      <View style={styles.textInputContainer}>
+        <TextInput
+          style={styles.textInput}
+          multiline
+          numberOfLines={4}
+          placeholder={appearance.placeholder}
+          onChangeText={setText}
+          value={text}
+        />
+      </View>
+      <BottomSection
+        text={question.buttonText ?? appearance.submitButtonText}
+        submitDisabled={!text && !question.optional}
+        appearance={appearance}
+        onSubmit={() => onSubmit(text)}
+      />
+    </View>
+  )
+}
+
+export function LinkQuestion({
+  question,
+  appearance,
+  onSubmit,
+}: {
+  question: LinkSurveyQuestion
+  forceDisableHtml: boolean
+  appearance: SurveyAppearanceTheme
+  onSubmit: (clicked: string) => void
+}): JSX.Element {
+  return (
+    <>
+      <QuestionHeader
+        question={question.question}
+        description={question.description}
+        descriptionContentType={question.descriptionContentType}
+      />
+      <BottomSection
+        text={question.buttonText ?? appearance.submitButtonText}
+        submitDisabled={false}
+        link={question.link}
+        appearance={appearance}
+        onSubmit={() => onSubmit('link clicked')}
+      />
+    </>
+  )
+}
+
+export function RatingQuestion({
+  question,
+  appearance,
+  onSubmit,
+}: {
+  question: RatingSurveyQuestion
+  appearance: SurveyAppearanceTheme
+  onSubmit: (rating: number | null) => void
+}): JSX.Element {
+  //const starting = question.scale === 10 ? 0 : 1;
+  const [rating, setRating] = useState<number | null>(null)
+
+  return (
+    <>
+      <QuestionHeader
+        question={question.question}
+        description={question.description}
+        descriptionContentType={question.descriptionContentType}
+      />
+      <View style={styles.ratingSection}>
+        <View style={styles.ratingOptions}>
+          {question.display === 'emoji' && (
+            <View style={styles.ratingOptionsEmoji}>
+              {(question.scale === 3 ? threeScaleEmojis : fiveScaleEmojis).map((Emoji, idx) => {
+                const active = idx + 1 === rating
+                return (
+                  <TouchableOpacity key={idx} style={styles.ratingsEmoji} onPress={() => setRating(idx + 1)}>
+                    <Emoji fill={active ? appearance.ratingButtonActiveColor : appearance.ratingButtonColor} />
+                  </TouchableOpacity>
+                )
+              })}
+            </View>
+          )}
+          {question.display === 'number' && (
+            <View style={[styles.ratingOptionsNumber, { borderColor: appearance.borderColor }]}>
+              {getScaleNumbers(question.scale).map((number, idx) => {
+                const active = rating === number
+                return (
+                  <RatingButton
+                    key={idx}
+                    index={idx}
+                    active={active}
+                    appearance={appearance}
+                    num={number}
+                    setActiveNumber={setRating}
+                  />
+                )
+              })}
+            </View>
+          )}
+        </View>
+        <View style={styles.ratingText}>
+          <Text>{question.lowerBoundLabel}</Text>
+          <Text>{question.upperBoundLabel}</Text>
+        </View>
+      </View>
+      <BottomSection
+        text={question.buttonText ?? appearance.submitButtonText}
+        submitDisabled={rating === null && !question.optional}
+        appearance={appearance}
+        onSubmit={() => onSubmit(rating)}
+      />
+    </>
+  )
+}
+
+export function RatingButton({
+  index,
+  num,
+  active,
+  appearance,
+  setActiveNumber,
+}: {
+  index: number
+  num: number
+  active: boolean
+  appearance: SurveyAppearanceTheme
+  setActiveNumber: (num: number) => void
+}): JSX.Element {
+  const backgroundColor = active ? appearance.ratingButtonActiveColor : appearance.ratingButtonColor
+  const textColor = getContrastingTextColor(backgroundColor)
+  return (
+    <TouchableOpacity
+      style={[
+        styles.ratingsNumber,
+        index === 0 && { borderLeftWidth: 0 },
+        { backgroundColor, borderColor: appearance.borderColor },
+      ]}
+      onPress={() => setActiveNumber(num)}
+    >
+      <Text style={{ color: textColor }}>{num}</Text>
+    </TouchableOpacity>
+  )
+}
+
+export function MultipleChoiceQuestion({
+  question,
+  appearance,
+  onSubmit,
+}: {
+  question: MultipleSurveyQuestion
+  appearance: SurveyAppearanceTheme
+  onSubmit: (choices: string | string[] | null) => void
+}): JSX.Element {
+  const allowMultiple = question.type === 'multiple_choice'
+  const openChoice = question.hasOpenChoice ? question.choices[question.choices.length - 1] : null
+  const choices = useMemo(() => getDisplayOrderChoices(question), [question])
+  const [selectedChoices, setSelectedChoices] = useState<string[]>([])
+  const [openEndedInput, setOpenEndedInput] = useState('')
+
+  return (
+    <View>
+      <QuestionHeader
+        question={question.question}
+        description={question.description}
+        descriptionContentType={question.descriptionContentType}
+      />
+      <View style={styles.multipleChoiceOptions}>
+        {choices.map((choice: string, idx: number) => {
+          const isOpenChoice = choice === openChoice
+          const isSelected = selectedChoices.includes(choice)
+
+          return (
+            <Pressable
+              key={idx}
+              style={[styles.choiceOption, isSelected ? { borderColor: 'black' } : {}]}
+              onPress={() => {
+                if (allowMultiple) {
+                  setSelectedChoices(
+                    isSelected ? selectedChoices.filter((c) => c !== choice) : [...selectedChoices, choice]
+                  )
+                } else {
+                  setSelectedChoices([choice])
+                }
+              }}
+            >
+              <View style={styles.choiceText}>
+                <Text style={{ flexGrow: 1 }}>
+                  {choice}
+                  {isOpenChoice ? ':' : ''}
+                </Text>
+                <View style={styles.rightCheckArea}>{isSelected && <CheckSVG />}</View>
+              </View>
+              {isOpenChoice && (
+                <TextInput
+                  style={styles.openEndedInput}
+                  onChangeText={(userValue) => {
+                    setOpenEndedInput(userValue)
+                    if (!isSelected) {
+                      setSelectedChoices(allowMultiple ? [...selectedChoices, choice] : [choice])
+                    }
+                  }}
+                />
+              )}
+            </Pressable>
+          )
+        })}
+      </View>
+      <BottomSection
+        text={question.buttonText ?? appearance.submitButtonText}
+        submitDisabled={
+          !question.optional &&
+          (selectedChoices.length === 0 ||
+            (openChoice !== null && selectedChoices.includes(openChoice) && openEndedInput.length === 0))
+        }
+        appearance={appearance}
+        onSubmit={() => {
+          // If open choice is selected, replace the choice name with the actual value entered
+          onSubmit(selectedChoices.map((c) => (c === openChoice ? openEndedInput : c)))
+        }}
+      />
+    </View>
+  )
+}
+
+const threeScaleEmojis = [DissatisfiedEmoji, NeutralEmoji, SatisfiedEmoji]
+const fiveScaleEmojis = [VeryDissatisfiedEmoji, DissatisfiedEmoji, NeutralEmoji, SatisfiedEmoji, VerySatisfiedEmoji]
+const fiveScaleNumbers = [1, 2, 3, 4, 5]
+const sevenScaleNumbers = [1, 2, 3, 4, 5, 6, 7]
+const tenScaleNumbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+
+function getScaleNumbers(scale: number): number[] {
+  switch (scale) {
+    case 5:
+      return fiveScaleNumbers
+    case 7:
+      return sevenScaleNumbers
+    case 10:
+      return tenScaleNumbers
+    default:
+      return fiveScaleNumbers
+  }
+}
+
+const styles = StyleSheet.create({
+  textInputContainer: {
+    padding: 10,
+  },
+  textInput: {
+    borderColor: '#ccc',
+    borderWidth: 1,
+    padding: 10,
+    marginVertical: 10,
+    backgroundColor: 'white',
+    fontSize: 16,
+  },
+  ratingSection: {
+    marginVertical: 10,
+  },
+  ratingOptions: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  ratingOptionsEmoji: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  ratingsEmoji: {
+    padding: 10,
+  },
+  ratingOptionsNumber: {
+    margin: 10,
+    flexGrow: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    borderRadius: 5,
+    borderWidth: 1,
+    overflow: 'hidden',
+  },
+  ratingsNumber: {
+    flex: 1,
+    paddingVertical: 10,
+    alignItems: 'center',
+    borderLeftWidth: 1,
+  },
+  ratingText: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: 10,
+  },
+  multipleChoiceOptions: {
+    padding: 10,
+  },
+  choiceOption: {
+    flexDirection: 'column',
+    marginVertical: 5,
+    borderWidth: 1,
+    borderColor: 'grey',
+    borderRadius: 5,
+    padding: 10,
+    backgroundColor: 'white',
+  },
+  choiceText: {
+    flexDirection: 'row',
+  },
+  rightCheckArea: {
+    flexGrow: 0,
+  },
+  openEndedInput: {
+    padding: 5,
+  },
+})
diff --git a/posthog-react-native/src/surveys/components/SurveyModal.tsx b/posthog-react-native/src/surveys/components/SurveyModal.tsx
new file mode 100644
index 00000000..bb199050
--- /dev/null
+++ b/posthog-react-native/src/surveys/components/SurveyModal.tsx
@@ -0,0 +1,103 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import { Modal, Pressable, StyleSheet, TouchableWithoutFeedback, View } from 'react-native'
+
+import { Cancel } from './Cancel'
+import { ConfirmationMessage } from './ConfirmationMessage'
+import { Questions } from './Surveys'
+
+import { SurveyAppearanceTheme } from '../surveys-utils'
+import { Survey } from '../posthog-surveys-types'
+
+export type SlypModalProps = {
+  survey: Survey
+  appearance: SurveyAppearanceTheme
+  onShow: () => void
+  onClose: (submitted: boolean) => void
+}
+
+export function SurveyModal(props: SlypModalProps): JSX.Element | null {
+  const { survey, appearance, onShow } = props
+  const [isSurveySent, setIsSurveySent] = useState(false)
+  const onClose = useCallback(() => props.onClose(isSurveySent), [isSurveySent, props])
+
+  const surveyPopupDelayMilliseconds = appearance.surveyPopupDelaySeconds * 1000
+  const [isVisible, setIsVisible] = useState(surveyPopupDelayMilliseconds === 0)
+  if (surveyPopupDelayMilliseconds > 0) {
+    setTimeout(() => {
+      setIsVisible(true)
+    }, surveyPopupDelayMilliseconds)
+  }
+
+  const shouldShowConfirmation = isSurveySent && appearance.thankYouMessageHeader
+
+  useEffect(() => {
+    if (isVisible) {
+      onShow()
+    }
+  }, [isVisible, onShow])
+
+  useEffect(() => {
+    let timeout: NodeJS.Timeout | undefined
+    if (isVisible && shouldShowConfirmation && appearance.autoDisappear) {
+      timeout = setTimeout(() => {
+        onClose()
+      }, 5000)
+    }
+    return () => timeout && clearTimeout(timeout)
+  }, [isVisible, onClose, shouldShowConfirmation, appearance])
+
+  if (!isVisible) {
+    return null
+  }
+
+  return (
+    <Modal animationType="fade" transparent onRequestClose={onClose} statusBarTranslucent={true}>
+      <Pressable style={styles.modalContainer} onPress={onClose} accessible={false}>
+        <TouchableWithoutFeedback accessible={false}>
+          <View
+            style={[
+              styles.modalContent,
+              { borderColor: appearance.borderColor, backgroundColor: appearance.backgroundColor },
+            ]}
+          >
+            {!shouldShowConfirmation ? (
+              <Questions survey={survey} appearance={appearance} onSubmit={() => setIsSurveySent(true)} />
+            ) : (
+              <ConfirmationMessage
+                appearance={appearance}
+                header={appearance.thankYouMessageHeader}
+                description={appearance.thankYouMessageDescription}
+                contentType={appearance.thankYouMessageDescriptionContentType ?? 'text'}
+                onClose={onClose}
+                isModal={true}
+              />
+            )}
+            <View style={styles.topIconContainer}>
+              <Cancel onPress={onClose} appearance={appearance} />
+            </View>
+          </View>
+        </TouchableWithoutFeedback>
+      </Pressable>
+    </Modal>
+  )
+}
+
+const styles = StyleSheet.create({
+  modalContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    marginVertical: 40, // TODO Plus safe area?
+    marginHorizontal: 20,
+  },
+  modalContent: {
+    borderRadius: 10,
+    borderWidth: 1,
+    padding: 20,
+  },
+  topIconContainer: {
+    position: 'absolute',
+    right: -20,
+    top: -20,
+  },
+})
diff --git a/posthog-react-native/src/surveys/components/Surveys.tsx b/posthog-react-native/src/surveys/components/Surveys.tsx
new file mode 100644
index 00000000..6bd80e70
--- /dev/null
+++ b/posthog-react-native/src/surveys/components/Surveys.tsx
@@ -0,0 +1,132 @@
+import React, { useMemo, useState } from 'react'
+import { ScrollView, StyleProp, ViewStyle } from 'react-native'
+
+import { getDisplayOrderQuestions, SurveyAppearanceTheme } from '../surveys-utils'
+import { Survey, SurveyAppearance, SurveyQuestion } from '../posthog-surveys-types'
+import { LinkQuestion, MultipleChoiceQuestion, OpenTextQuestion, RatingQuestion } from './QuestionTypes'
+import { PostHog } from '../../posthog-rn'
+import { usePostHog } from '../../hooks/usePostHog'
+
+const getSurveyInteractionProperty = (survey: Survey, action: string): string => {
+  let surveyProperty = `$survey_${action}/${survey.id}`
+  if (survey.current_iteration && survey.current_iteration > 0) {
+    surveyProperty = `$survey_${action}/${survey.id}/${survey.current_iteration}`
+  }
+
+  return surveyProperty
+}
+
+export const sendSurveyShownEvent = (survey: Survey, posthog: PostHog): void => {
+  posthog.capture('survey shown', {
+    $survey_name: survey.name,
+    $survey_id: survey.id,
+    $survey_iteration: survey.current_iteration,
+    $survey_iteration_start_date: survey.current_iteration_start_date,
+  })
+}
+
+export const sendSurveyEvent = (
+  responses: Record<string, string | number | string[] | null> = {},
+  survey: Survey,
+  posthog: PostHog
+): void => {
+  posthog.capture('survey sent', {
+    $survey_name: survey.name,
+    $survey_id: survey.id,
+    $survey_iteration: survey.current_iteration,
+    $survey_iteration_start_date: survey.current_iteration_start_date,
+    $survey_questions: survey.questions.map((question) => question.question),
+    ...responses,
+    $set: {
+      [getSurveyInteractionProperty(survey, 'responded')]: true,
+    },
+  })
+}
+
+export const dismissedSurveyEvent = (survey: Survey, posthog: PostHog): void => {
+  posthog.capture('survey dismissed', {
+    $survey_name: survey.name,
+    $survey_id: survey.id,
+    $survey_iteration: survey.current_iteration,
+    $survey_iteration_start_date: survey.current_iteration_start_date,
+    $set: {
+      [getSurveyInteractionProperty(survey, 'dismissed')]: true,
+    },
+  })
+}
+
+export function Questions({
+  survey,
+  appearance,
+  styleOverrides,
+  onSubmit,
+}: {
+  survey: Survey
+  appearance: SurveyAppearanceTheme
+  styleOverrides?: StyleProp<ViewStyle>
+  onSubmit: () => void
+}): JSX.Element {
+  const [questionsResponses, setQuestionsResponses] = useState({})
+  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0)
+  const surveyQuestions = useMemo(() => getDisplayOrderQuestions(survey), [survey])
+  const posthog = usePostHog()
+
+  const onNextButtonClick = ({
+    res,
+    originalQuestionIndex,
+    displayQuestionIndex,
+  }: {
+    res: string | string[] | number | null
+    originalQuestionIndex: number
+    displayQuestionIndex: number
+  }): void => {
+    const responseKey = originalQuestionIndex === 0 ? `$survey_response` : `$survey_response_${originalQuestionIndex}`
+
+    setQuestionsResponses({ ...questionsResponses, [responseKey]: res })
+
+    const isLastDisplayedQuestion = displayQuestionIndex === survey.questions.length - 1
+    if (isLastDisplayedQuestion) {
+      sendSurveyEvent({ ...questionsResponses, [responseKey]: res }, survey, posthog)
+      onSubmit()
+    } else {
+      setCurrentQuestionIndex(displayQuestionIndex + 1)
+    }
+  }
+
+  const question = surveyQuestions[currentQuestionIndex]
+
+  return (
+    <ScrollView style={[styleOverrides, { flexGrow: 0 }]}>
+      {getQuestionComponent({
+        question,
+        appearance,
+        onSubmit: (res) =>
+          onNextButtonClick({
+            res,
+            originalQuestionIndex: question.originalQuestionIndex,
+            displayQuestionIndex: currentQuestionIndex,
+          }),
+      })}
+    </ScrollView>
+  )
+}
+
+type GetQuestionComponentProps = {
+  question: SurveyQuestion
+  appearance: SurveyAppearance
+  onSubmit: (res: string | string[] | number | null) => void
+}
+
+const getQuestionComponent = (props: GetQuestionComponentProps): JSX.Element => {
+  const questionComponents = {
+    open: OpenTextQuestion,
+    link: LinkQuestion,
+    rating: RatingQuestion,
+    multiple_choice: MultipleChoiceQuestion,
+    single_choice: MultipleChoiceQuestion,
+  }
+
+  const Component = questionComponents[props.question.type]
+
+  return <Component key={props.question.originalQuestionIndex} {...(props as any)} />
+}
diff --git a/posthog-react-native/src/surveys/getActiveMatchingSurveys.ts b/posthog-react-native/src/surveys/getActiveMatchingSurveys.ts
new file mode 100644
index 00000000..be2a27b0
--- /dev/null
+++ b/posthog-react-native/src/surveys/getActiveMatchingSurveys.ts
@@ -0,0 +1,63 @@
+import { canActivateRepeatedly, hasActions, hasEvents } from './surveys-utils'
+import { Survey } from './posthog-surveys-types'
+
+export function getActiveMatchingSurveys(
+  surveys: Survey[],
+  flags: Record<string, string | boolean>,
+  seenSurveys: string[],
+  activatedSurveys: ReadonlySet<string>,
+  lastSeenSurveyDate: Date | undefined
+): Survey[] {
+  return surveys.filter((survey) => {
+    // Is Active
+    if (!survey.start_date || survey.end_date) {
+      return false
+    }
+
+    if (seenSurveys.includes(survey.id) && !canActivateRepeatedly(survey)) {
+      return false
+    }
+
+    const surveyWaitPeriodInDays = survey.conditions?.seenSurveyWaitPeriodInDays
+    if (surveyWaitPeriodInDays && lastSeenSurveyDate) {
+      const today = new Date()
+      const diff = Math.abs(today.getTime() - lastSeenSurveyDate.getTime())
+      const diffDaysFromToday = Math.ceil(diff / (1000 * 3600 * 24))
+      if (diffDaysFromToday < surveyWaitPeriodInDays) {
+        return false
+      }
+    }
+
+    // URL and CSS selector conditions are currently ignored
+
+    if (
+      !survey.linked_flag_key &&
+      !survey.targeting_flag_key &&
+      !survey.internal_targeting_flag_key &&
+      !survey.feature_flag_keys?.length
+    ) {
+      // Survey is targeting All Users with no conditions
+      return true
+    }
+
+    const linkedFlagCheck = survey.linked_flag_key ? flags[survey.linked_flag_key] === true : true
+    const targetingFlagCheck = survey.targeting_flag_key ? flags[survey.targeting_flag_key] === true : true
+
+    const eventBasedTargetingFlagCheck =
+      hasEvents(survey) || hasActions(survey) ? activatedSurveys.has(survey.id) : true
+
+    const internalTargetingFlagCheck =
+      survey.internal_targeting_flag_key && !canActivateRepeatedly(survey)
+        ? flags[survey.internal_targeting_flag_key] === true
+        : true
+    const flagsCheck = survey.feature_flag_keys?.length
+      ? survey.feature_flag_keys.every(({ key, value }) => {
+          return !key || !value || flags[value] === true
+        })
+      : true
+
+    return (
+      linkedFlagCheck && targetingFlagCheck && internalTargetingFlagCheck && eventBasedTargetingFlagCheck && flagsCheck
+    )
+  })
+}
diff --git a/posthog-react-native/src/surveys/icons.tsx b/posthog-react-native/src/surveys/icons.tsx
new file mode 100644
index 00000000..1fcd4540
--- /dev/null
+++ b/posthog-react-native/src/surveys/icons.tsx
@@ -0,0 +1,49 @@
+import React from 'react'
+import { Path, Svg, SvgProps } from 'react-native-svg'
+
+export const SatisfiedEmoji = (props: SvgProps): JSX.Element => (
+  <Svg height="48" viewBox="0 -960 960 960" width="48" {...props}>
+    <Path d="M626-533q22.5 0 38.25-15.75T680-587q0-22.5-15.75-38.25T626-641q-22.5 0-38.25 15.75T572-587q0 22.5 15.75 38.25T626-533Zm-292 0q22.5 0 38.25-15.75T388-587q0-22.5-15.75-38.25T334-641q-22.5 0-38.25 15.75T280-587q0 22.5 15.75 38.25T334-533Zm146 272q66 0 121.5-35.5T682-393h-52q-23 40-63 61.5T480.5-310q-46.5 0-87-21T331-393h-53q26 61 81 96.5T480-261Zm0 181q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 340q142.375 0 241.188-98.812Q820-337.625 820-480t-98.812-241.188Q622.375-820 480-820t-241.188 98.812Q140-622.375 140-480t98.812 241.188Q337.625-140 480-140Z" />
+  </Svg>
+)
+
+export const NeutralEmoji = (props: SvgProps): JSX.Element => (
+  <Svg height="48" viewBox="0 -960 960 960" width="48" {...props}>
+    <Path d="M626-533q22.5 0 38.25-15.75T680-587q0-22.5-15.75-38.25T626-641q-22.5 0-38.25 15.75T572-587q0 22.5 15.75 38.25T626-533Zm-292 0q22.5 0 38.25-15.75T388-587q0-22.5-15.75-38.25T334-641q-22.5 0-38.25 15.75T280-587q0 22.5 15.75 38.25T334-533Zm20 194h253v-49H354v49ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 340q142.375 0 241.188-98.812Q820-337.625 820-480t-98.812-241.188Q622.375-820 480-820t-241.188 98.812Q140-622.375 140-480t98.812 241.188Q337.625-140 480-140Z" />
+  </Svg>
+)
+
+export const DissatisfiedEmoji = (props: SvgProps): JSX.Element => (
+  <Svg height="48" viewBox="0 -960 960 960" width="48" {...props}>
+    <Path d="M626-533q22.5 0 38.25-15.75T680-587q0-22.5-15.75-38.25T626-641q-22.5 0-38.25 15.75T572-587q0 22.5 15.75 38.25T626-533Zm-292 0q22.5 0 38.25-15.75T388-587q0-22.5-15.75-38.25T334-641q-22.5 0-38.25 15.75T280-587q0 22.5 15.75 38.25T334-533Zm146.174 116Q413-417 358.5-379.5T278-280h53q22-42 62.173-65t87.5-23Q528-368 567.5-344.5T630-280h52q-25-63-79.826-100-54.826-37-122-37ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 340q142.375 0 241.188-98.812Q820-337.625 820-480t-98.812-241.188Q622.375-820 480-820t-241.188 98.812Q140-622.375 140-480t98.812 241.188Q337.625-140 480-140Z" />
+  </Svg>
+)
+
+export const VeryDissatisfiedEmoji = (props: SvgProps): JSX.Element => (
+  <Svg height="48" viewBox="0 -960 960 960" width="48" {...props}>
+    <Path d="M480-417q-67 0-121.5 37.5T278-280h404q-25-63-80-100t-122-37Zm-183-72 50-45 45 45 31-36-45-45 45-45-31-36-45 45-50-45-31 36 45 45-45 45 31 36Zm272 0 44-45 51 45 31-36-45-45 45-45-31-36-51 45-44-45-31 36 44 45-44 45 31 36ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 340q142 0 241-99t99-241q0-142-99-241t-241-99q-142 0-241 99t-99 241q0 142 99 241t241 99Z" />
+  </Svg>
+)
+
+export const VerySatisfiedEmoji = (props: SvgProps): JSX.Element => (
+  <Svg height="48" viewBox="0 -960 960 960" width="48" {...props}>
+    <Path d="M479.504-261Q537-261 585.5-287q48.5-26 78.5-72.4 6-11.6-.75-22.6-6.75-11-20.25-11H316.918Q303-393 296.5-382t-.5 22.6q30 46.4 78.5 72.4 48.5 26 105.004 26ZM347-578l27 27q7.636 8 17.818 8Q402-543 410-551q8-8 8-18t-8-18l-42-42q-8.8-9-20.9-9-12.1 0-21.1 9l-42 42q-8 7.636-8 17.818Q276-559 284-551q8 8 18 8t18-8l27-27Zm267 0 27 27q7.714 8 18 8t18-8q8-7.636 8-17.818Q685-579 677-587l-42-42q-8.8-9-20.9-9-12.1 0-21.1 9l-42 42q-8 7.714-8 18t8 18q7.636 8 17.818 8Q579-543 587-551l27-27ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 340q142.375 0 241.188-98.812Q820-337.625 820-480t-98.812-241.188Q622.375-820 480-820t-241.188 98.812Q140-622.375 140-480t98.812 241.188Q337.625-140 480-140Z" />
+  </Svg>
+)
+
+export const CheckSVG = (props: SvgProps): JSX.Element => (
+  <Svg width="16" height="16" viewBox="0 0 16 12" {...props}>
+    <Path d="M5.30769 10.6923L4.77736 11.2226C4.91801 11.3633 5.10878 11.4423 5.30769 11.4423C5.5066 11.4423 5.69737 11.3633 5.83802 11.2226L5.30769 10.6923ZM15.5303 1.53033C15.8232 1.23744 15.8232 0.762563 15.5303 0.46967C15.2374 0.176777 14.7626 0.176777 14.4697 0.46967L15.5303 1.53033ZM1.53033 5.85429C1.23744 5.56139 0.762563 5.56139 0.46967 5.85429C0.176777 6.14718 0.176777 6.62205 0.46967 6.91495L1.53033 5.85429ZM5.83802 11.2226L15.5303 1.53033L14.4697 0.46967L4.77736 10.162L5.83802 11.2226ZM0.46967 6.91495L4.77736 11.2226L5.83802 10.162L1.53033 5.85429L0.46967 6.91495Z" />
+  </Svg>
+)
+
+export const CancelSVG = (props: SvgProps): JSX.Element => (
+  <Svg width="12" height="12" viewBox="0 0 12 12" fill="none" {...props}>
+    <Path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M0.164752 0.164752C0.384422 -0.0549175 0.740578 -0.0549175 0.960248 0.164752L6 5.20451L11.0398 0.164752C11.2594 -0.0549175 11.6156 -0.0549175 11.8352 0.164752C12.0549 0.384422 12.0549 0.740578 11.8352 0.960248L6.79549 6L11.8352 11.0398C12.0549 11.2594 12.0549 11.6156 11.8352 11.8352C11.6156 12.0549 11.2594 12.0549 11.0398 11.8352L6 6.79549L0.960248 11.8352C0.740578 12.0549 0.384422 12.0549 0.164752 11.8352C-0.0549175 11.6156 -0.0549175 11.2594 0.164752 11.0398L5.20451 6L0.164752 0.960248C-0.0549175 0.740578 -0.0549175 0.384422 0.164752 0.164752Z"
+      fill="black"
+    />
+  </Svg>
+)
diff --git a/posthog-react-native/src/surveys/index.ts b/posthog-react-native/src/surveys/index.ts
new file mode 100644
index 00000000..139f7a16
--- /dev/null
+++ b/posthog-react-native/src/surveys/index.ts
@@ -0,0 +1,6 @@
+export { PostHogSurveyProvider, useActiveSurvey, useFeedbackSurvey } from './PostHogSurveyProvider'
+export type { PostHogSurveyProviderProps } from './PostHogSurveyProvider'
+export { SurveyModal } from './components/SurveyModal'
+export type { SlypModalProps } from './components/SurveyModal'
+export type { Survey, SurveyAppearance } from './posthog-surveys-types'
+export { Questions } from './components/Surveys'
diff --git a/posthog-react-native/src/surveys/posthog-surveys-types.ts b/posthog-react-native/src/surveys/posthog-surveys-types.ts
new file mode 100644
index 00000000..df286455
--- /dev/null
+++ b/posthog-react-native/src/surveys/posthog-surveys-types.ts
@@ -0,0 +1,199 @@
+/**
+ * Having Survey types in types.ts was confusing tsc
+ * and generating an invalid module.d.ts
+ * See https://github.com/PostHog/posthog-js/issues/698
+ */
+
+export interface SurveyAppearance {
+  // keep in sync with frontend/src/types.ts -> SurveyAppearance
+  backgroundColor?: string
+  submitButtonColor?: string
+  // deprecate submit button text eventually
+  submitButtonText?: string
+  submitButtonTextColor?: string
+  ratingButtonColor?: string
+  ratingButtonActiveColor?: string
+  autoDisappear?: boolean
+  displayThankYouMessage?: boolean
+  thankYouMessageHeader?: string
+  thankYouMessageDescription?: string
+  thankYouMessageDescriptionContentType?: SurveyQuestionDescriptionContentType
+  thankYouMessageCloseButtonText?: string
+  borderColor?: string
+  position?: 'left' | 'right' | 'center'
+  placeholder?: string
+  shuffleQuestions?: boolean
+  surveyPopupDelaySeconds?: number
+  // widget options
+  widgetType?: 'button' | 'tab' | 'selector'
+  widgetSelector?: string
+  widgetLabel?: string
+  widgetColor?: string
+}
+
+export enum SurveyType {
+  Popover = 'popover',
+  API = 'api',
+  Widget = 'widget',
+}
+
+export type SurveyQuestion = BasicSurveyQuestion | LinkSurveyQuestion | RatingSurveyQuestion | MultipleSurveyQuestion
+
+export type SurveyQuestionDescriptionContentType = 'html' | 'text'
+
+interface SurveyQuestionBase {
+  question: string
+  description?: string | null
+  descriptionContentType?: SurveyQuestionDescriptionContentType
+  optional?: boolean
+  buttonText?: string
+  originalQuestionIndex: number
+  branching?: NextQuestionBranching | EndBranching | ResponseBasedBranching | SpecificQuestionBranching
+}
+
+export interface BasicSurveyQuestion extends SurveyQuestionBase {
+  type: SurveyQuestionType.Open
+}
+
+export interface LinkSurveyQuestion extends SurveyQuestionBase {
+  type: SurveyQuestionType.Link
+  link?: string | null
+}
+
+export interface RatingSurveyQuestion extends SurveyQuestionBase {
+  type: SurveyQuestionType.Rating
+  display: 'number' | 'emoji'
+  scale: 3 | 5 | 7 | 10
+  lowerBoundLabel: string
+  upperBoundLabel: string
+}
+
+export interface MultipleSurveyQuestion extends SurveyQuestionBase {
+  type: SurveyQuestionType.SingleChoice | SurveyQuestionType.MultipleChoice
+  choices: string[]
+  hasOpenChoice?: boolean
+  shuffleOptions?: boolean
+}
+
+export enum SurveyQuestionType {
+  Open = 'open',
+  MultipleChoice = 'multiple_choice',
+  SingleChoice = 'single_choice',
+  Rating = 'rating',
+  Link = 'link',
+}
+
+export enum SurveyQuestionBranchingType {
+  NextQuestion = 'next_question',
+  End = 'end',
+  ResponseBased = 'response_based',
+  SpecificQuestion = 'specific_question',
+}
+
+interface NextQuestionBranching {
+  type: SurveyQuestionBranchingType.NextQuestion
+}
+
+interface EndBranching {
+  type: SurveyQuestionBranchingType.End
+}
+
+interface ResponseBasedBranching {
+  type: SurveyQuestionBranchingType.ResponseBased
+  responseValues: Record<string, any>
+}
+
+interface SpecificQuestionBranching {
+  type: SurveyQuestionBranchingType.SpecificQuestion
+  index: number
+}
+
+export interface SurveyResponse {
+  surveys: Survey[]
+}
+
+export type SurveyCallback = (surveys: Survey[]) => void
+
+export type SurveyUrlMatchType = 'regex' | 'not_regex' | 'exact' | 'is_not' | 'icontains' | 'not_icontains'
+
+export interface SurveyElement {
+  text?: string
+  $el_text?: string
+  tag_name?: string
+  href?: string
+  attr_id?: string
+  attr_class?: string[]
+  nth_child?: number
+  nth_of_type?: number
+  attributes?: Record<string, any>
+  event_id?: number
+  order?: number
+  group_id?: number
+}
+export interface SurveyRenderReason {
+  visible: boolean
+  disabledReason?: string
+}
+
+export interface Survey {
+  // Sync this with the backend's SurveyAPISerializer!
+  id: string
+  name: string
+  description: string
+  type: SurveyType
+  feature_flag_keys:
+    | {
+        key: string
+        value?: string
+      }[]
+    | null
+  linked_flag_key: string | null
+  targeting_flag_key: string | null
+  internal_targeting_flag_key: string | null
+  questions: SurveyQuestion[]
+  appearance: SurveyAppearance | null
+  conditions: {
+    url?: string
+    selector?: string
+    seenSurveyWaitPeriodInDays?: number
+    urlMatchType?: SurveyUrlMatchType
+    events: {
+      repeatedActivation?: boolean
+      values: {
+        name: string
+      }[]
+    } | null
+    actions: {
+      values: SurveyActionType[]
+    } | null
+  } | null
+  start_date: string | null
+  end_date: string | null
+  current_iteration: number | null
+  current_iteration_start_date: string | null
+}
+
+export interface SurveyActionType {
+  id: number
+  name: string | null
+  steps?: ActionStepType[]
+}
+
+/** Sync with plugin-server/src/types.ts */
+export type ActionStepStringMatching = 'contains' | 'exact' | 'regex'
+
+export interface ActionStepType {
+  event?: string | null
+  selector?: string | null
+  /** @deprecated Only `selector` should be used now. */
+  tag_name?: string
+  text?: string | null
+  /** @default StringMatching.Exact */
+  text_matching?: ActionStepStringMatching | null
+  href?: string | null
+  /** @default ActionStepStringMatching.Exact */
+  href_matching?: ActionStepStringMatching | null
+  url?: string | null
+  /** @default StringMatching.Contains */
+  url_matching?: ActionStepStringMatching | null
+}
diff --git a/posthog-react-native/src/surveys/surveys-utils.ts b/posthog-react-native/src/surveys/surveys-utils.ts
new file mode 100644
index 00000000..bdbd505b
--- /dev/null
+++ b/posthog-react-native/src/surveys/surveys-utils.ts
@@ -0,0 +1,276 @@
+import { MultipleSurveyQuestion, Survey, SurveyAppearance, SurveyQuestion } from './posthog-surveys-types'
+
+export const defaultBackgroundColor = '#eeeded' as const
+
+export type SurveyAppearanceTheme = Omit<
+  Required<SurveyAppearance>,
+  'widgetSelector' | 'widgetType' | 'widgetColor' | 'widgetLabel' | 'shuffleQuestions'
+>
+export const defaultSurveyAppearance: SurveyAppearanceTheme = {
+  backgroundColor: defaultBackgroundColor,
+  submitButtonColor: 'black',
+  submitButtonTextColor: 'white',
+  ratingButtonColor: 'white',
+  ratingButtonActiveColor: 'black',
+  borderColor: '#c9c6c6',
+  placeholder: 'Start typing...',
+  displayThankYouMessage: true,
+  thankYouMessageHeader: 'Thank you for your feedback!',
+  position: 'right',
+  submitButtonText: 'Submit',
+  autoDisappear: false,
+  thankYouMessageDescription: '',
+  thankYouMessageDescriptionContentType: 'text',
+  thankYouMessageCloseButtonText: 'Close',
+  surveyPopupDelaySeconds: 0,
+}
+
+export const getDisplayOrderQuestions = (survey: Survey): SurveyQuestion[] => {
+  // retain the original questionIndex so we can correlate values in the webapp
+  survey.questions.forEach((question, idx) => {
+    question.originalQuestionIndex = idx
+  })
+
+  if (!survey.appearance?.shuffleQuestions) {
+    return survey.questions
+  }
+
+  return reverseIfUnshuffled(survey.questions, shuffle(survey.questions))
+}
+
+export const hasEvents = (survey: Survey): boolean => {
+  return survey.conditions?.events?.values.length !== undefined && survey.conditions.events.values.length > 0
+}
+
+export const hasActions = (survey: Survey): boolean => {
+  return survey.conditions?.actions?.values.length !== undefined && survey.conditions.actions.values.length > 0
+}
+
+export const canActivateRepeatedly = (survey: Survey): boolean => {
+  return !!(survey.conditions?.events?.repeatedActivation && hasEvents(survey))
+}
+
+/**
+ * Use the Fisher-yates algorithm to shuffle this array
+ * https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle
+ */
+export const shuffle = <T>(array: T[]): T[] => {
+  return array
+    .map((a) => ({ sort: Math.floor(Math.random() * 10), value: a }))
+    .sort((a, b) => a.sort - b.sort)
+    .map((a) => a.value)
+}
+
+const reverseIfUnshuffled = <T>(unshuffled: T[], shuffled: T[]): T[] => {
+  if (unshuffled.length === shuffled.length && unshuffled.every((val, index) => val === shuffled[index])) {
+    return shuffled.reverse()
+  }
+
+  return shuffled
+}
+
+export const getDisplayOrderChoices = (question: MultipleSurveyQuestion): string[] => {
+  if (!question.shuffleOptions) {
+    return question.choices
+  }
+
+  const displayOrderChoices = question.choices
+  let openEndedChoice = ''
+  if (question.hasOpenChoice && displayOrderChoices.length > 0) {
+    // if the question has an open-ended choice, its always the last element in the choices array.
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    openEndedChoice = displayOrderChoices.pop()!
+  }
+
+  const shuffledOptions = reverseIfUnshuffled(displayOrderChoices, shuffle(displayOrderChoices))
+
+  if (question.hasOpenChoice) {
+    question.choices.push(openEndedChoice)
+    shuffledOptions.push(openEndedChoice)
+  }
+
+  return shuffledOptions
+}
+
+export function getContrastingTextColor(color: string): 'black' | 'white' {
+  let rgb: string | undefined
+  if (color.startsWith('#')) {
+    rgb = hex2rgb(color)
+  }
+  if (color.startsWith('rgb')) {
+    rgb = color
+  }
+  // otherwise it's a color name
+  const nameColorToHex = nameToHex(color)
+  if (nameColorToHex) {
+    rgb = hex2rgb(nameColorToHex)
+  }
+  if (!rgb) {
+    return 'black'
+  }
+  const colorMatch = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/)
+  if (colorMatch) {
+    const r = parseInt(colorMatch[1], 10)
+    const g = parseInt(colorMatch[2], 10)
+    const b = parseInt(colorMatch[3], 10)
+    const hsp = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b))
+    return hsp > 127.5 ? 'black' : 'white'
+  }
+  return 'black'
+}
+
+function hex2rgb(c: string): string {
+  if (c.startsWith('#')) {
+    const hexColor = c.replace(/^#/, '')
+    const r = parseInt(hexColor.slice(0, 2), 16)
+    const g = parseInt(hexColor.slice(2, 4), 16)
+    const b = parseInt(hexColor.slice(4, 6), 16)
+    return `rgb(${r},${g},${b})`
+  }
+  return 'rgb(255, 255, 255)'
+}
+
+function nameToHex(name: string): string | undefined {
+  return {
+    aliceblue: '#f0f8ff',
+    antiquewhite: '#faebd7',
+    aqua: '#00ffff',
+    aquamarine: '#7fffd4',
+    azure: '#f0ffff',
+    beige: '#f5f5dc',
+    bisque: '#ffe4c4',
+    black: '#000000',
+    blanchedalmond: '#ffebcd',
+    blue: '#0000ff',
+    blueviolet: '#8a2be2',
+    brown: '#a52a2a',
+    burlywood: '#deb887',
+    cadetblue: '#5f9ea0',
+    chartreuse: '#7fff00',
+    chocolate: '#d2691e',
+    coral: '#ff7f50',
+    cornflowerblue: '#6495ed',
+    cornsilk: '#fff8dc',
+    crimson: '#dc143c',
+    cyan: '#00ffff',
+    darkblue: '#00008b',
+    darkcyan: '#008b8b',
+    darkgoldenrod: '#b8860b',
+    darkgray: '#a9a9a9',
+    darkgreen: '#006400',
+    darkkhaki: '#bdb76b',
+    darkmagenta: '#8b008b',
+    darkolivegreen: '#556b2f',
+    darkorange: '#ff8c00',
+    darkorchid: '#9932cc',
+    darkred: '#8b0000',
+    darksalmon: '#e9967a',
+    darkseagreen: '#8fbc8f',
+    darkslateblue: '#483d8b',
+    darkslategray: '#2f4f4f',
+    darkturquoise: '#00ced1',
+    darkviolet: '#9400d3',
+    deeppink: '#ff1493',
+    deepskyblue: '#00bfff',
+    dimgray: '#696969',
+    dodgerblue: '#1e90ff',
+    firebrick: '#b22222',
+    floralwhite: '#fffaf0',
+    forestgreen: '#228b22',
+    fuchsia: '#ff00ff',
+    gainsboro: '#dcdcdc',
+    ghostwhite: '#f8f8ff',
+    gold: '#ffd700',
+    goldenrod: '#daa520',
+    gray: '#808080',
+    green: '#008000',
+    greenyellow: '#adff2f',
+    honeydew: '#f0fff0',
+    hotpink: '#ff69b4',
+    'indianred ': '#cd5c5c',
+    indigo: '#4b0082',
+    ivory: '#fffff0',
+    khaki: '#f0e68c',
+    lavender: '#e6e6fa',
+    lavenderblush: '#fff0f5',
+    lawngreen: '#7cfc00',
+    lemonchiffon: '#fffacd',
+    lightblue: '#add8e6',
+    lightcoral: '#f08080',
+    lightcyan: '#e0ffff',
+    lightgoldenrodyellow: '#fafad2',
+    lightgrey: '#d3d3d3',
+    lightgreen: '#90ee90',
+    lightpink: '#ffb6c1',
+    lightsalmon: '#ffa07a',
+    lightseagreen: '#20b2aa',
+    lightskyblue: '#87cefa',
+    lightslategray: '#778899',
+    lightsteelblue: '#b0c4de',
+    lightyellow: '#ffffe0',
+    lime: '#00ff00',
+    limegreen: '#32cd32',
+    linen: '#faf0e6',
+    magenta: '#ff00ff',
+    maroon: '#800000',
+    mediumaquamarine: '#66cdaa',
+    mediumblue: '#0000cd',
+    mediumorchid: '#ba55d3',
+    mediumpurple: '#9370d8',
+    mediumseagreen: '#3cb371',
+    mediumslateblue: '#7b68ee',
+    mediumspringgreen: '#00fa9a',
+    mediumturquoise: '#48d1cc',
+    mediumvioletred: '#c71585',
+    midnightblue: '#191970',
+    mintcream: '#f5fffa',
+    mistyrose: '#ffe4e1',
+    moccasin: '#ffe4b5',
+    navajowhite: '#ffdead',
+    navy: '#000080',
+    oldlace: '#fdf5e6',
+    olive: '#808000',
+    olivedrab: '#6b8e23',
+    orange: '#ffa500',
+    orangered: '#ff4500',
+    orchid: '#da70d6',
+    palegoldenrod: '#eee8aa',
+    palegreen: '#98fb98',
+    paleturquoise: '#afeeee',
+    palevioletred: '#d87093',
+    papayawhip: '#ffefd5',
+    peachpuff: '#ffdab9',
+    peru: '#cd853f',
+    pink: '#ffc0cb',
+    plum: '#dda0dd',
+    powderblue: '#b0e0e6',
+    purple: '#800080',
+    red: '#ff0000',
+    rosybrown: '#bc8f8f',
+    royalblue: '#4169e1',
+    saddlebrown: '#8b4513',
+    salmon: '#fa8072',
+    sandybrown: '#f4a460',
+    seagreen: '#2e8b57',
+    seashell: '#fff5ee',
+    sienna: '#a0522d',
+    silver: '#c0c0c0',
+    skyblue: '#87ceeb',
+    slateblue: '#6a5acd',
+    slategray: '#708090',
+    snow: '#fffafa',
+    springgreen: '#00ff7f',
+    steelblue: '#4682b4',
+    tan: '#d2b48c',
+    teal: '#008080',
+    thistle: '#d8bfd8',
+    tomato: '#ff6347',
+    turquoise: '#40e0d0',
+    violet: '#ee82ee',
+    wheat: '#f5deb3',
+    white: '#ffffff',
+    whitesmoke: '#f5f5f5',
+    yellow: '#ffff00',
+    yellowgreen: '#9acd32',
+  }[name.toLowerCase()]
+}
diff --git a/posthog-react-native/src/surveys/useActivatedSurveys.ts b/posthog-react-native/src/surveys/useActivatedSurveys.ts
new file mode 100644
index 00000000..f441f8a1
--- /dev/null
+++ b/posthog-react-native/src/surveys/useActivatedSurveys.ts
@@ -0,0 +1,44 @@
+import { useEffect, useMemo, useState } from 'react'
+
+import { hasEvents } from './surveys-utils'
+import { Survey } from './posthog-surveys-types'
+import { PostHog } from '../posthog-rn'
+
+const SURVEY_SHOWN_EVENT_NAME = 'survey shown'
+
+export function useActivatedSurveys(posthog: PostHog, surveys: Survey[]): ReadonlySet<string> {
+  const [activatedSurveys, setActivatedSurveys] = useState<ReadonlySet<string>>(new Set())
+  //TODO Support Action activation
+
+  const eventMap = useMemo(() => {
+    const newEventMap = new Map<string, string[]>()
+    for (const survey of surveys.filter(hasEvents)) {
+      for (const event of survey.conditions?.events?.values ?? []) {
+        const knownSurveys = newEventMap.get(event.name) ?? []
+        knownSurveys.push(survey.id)
+        newEventMap.set(event.name, knownSurveys)
+      }
+    }
+    return newEventMap
+  }, [surveys])
+
+  useEffect(() => {
+    if (eventMap.size > 0) {
+      return posthog.on('capture', (payload: { event: string; properties?: { $survey_id?: string } }) => {
+        if (eventMap.has(payload.event)) {
+          setActivatedSurveys((current) => new Set([...current, ...(eventMap.get(payload.event) ?? [])]))
+        } else if (payload.event === SURVEY_SHOWN_EVENT_NAME) {
+          // remove survey that from activatedSurveys here.
+          const surveyId = payload.properties?.$survey_id
+          if (surveyId && activatedSurveys.has(surveyId)) {
+            const clone = new Set(activatedSurveys)
+            clone.delete(surveyId)
+            setActivatedSurveys(clone)
+          }
+        }
+      })
+    }
+  }, [activatedSurveys, eventMap, posthog])
+
+  return activatedSurveys
+}
diff --git a/posthog-react-native/src/surveys/useSurveyStorage.ts b/posthog-react-native/src/surveys/useSurveyStorage.ts
new file mode 100644
index 00000000..c1bda7ff
--- /dev/null
+++ b/posthog-react-native/src/surveys/useSurveyStorage.ts
@@ -0,0 +1,59 @@
+import { PostHogPersistedProperty } from 'posthog-core'
+import { useCallback, useEffect, useState } from 'react'
+import { usePostHog } from '../hooks/usePostHog'
+
+type SurveyStorage = {
+  seenSurveys: string[]
+  setSeenSurvey: (surveyId: string) => void
+  lastSeenSurveyDate: Date | undefined
+  setLastSeenSurveyDate: (date: Date) => void
+}
+
+export function useSurveyStorage(): SurveyStorage {
+  const posthogStorage = usePostHog()
+  const [lastSeenSurveyDate, setLastSeenSurveyDate] = useState<Date | undefined>(undefined)
+  const [seenSurveys, setSeenSurveys] = useState<string[]>([])
+
+  useEffect(() => {
+    posthogStorage.ready().then(() => {
+      const lastSeenSurveyDate = posthogStorage.getPersistedProperty(PostHogPersistedProperty.SurveyLastSeenDate)
+      if (typeof lastSeenSurveyDate === 'string') {
+        setLastSeenSurveyDate(new Date(lastSeenSurveyDate))
+      }
+
+      const serialisedSeenSurveys = posthogStorage.getPersistedProperty(PostHogPersistedProperty.SurveysSeen)
+      if (typeof serialisedSeenSurveys === 'string') {
+        const parsedSeenSurveys: unknown = JSON.parse(serialisedSeenSurveys)
+        if (Array.isArray(parsedSeenSurveys) && typeof parsedSeenSurveys[0] === 'string') {
+          setSeenSurveys(parsedSeenSurveys)
+        }
+      }
+    })
+  }, [posthogStorage])
+
+  return {
+    seenSurveys,
+    setSeenSurvey: useCallback(
+      (surveyId: string) => {
+        setSeenSurveys((current) => {
+          // To keep storage bounded, only keep the last 20 seen surveys
+          const newValue = [surveyId, ...current.filter((id) => id !== surveyId)]
+          posthogStorage.setPersistedProperty(
+            PostHogPersistedProperty.SurveysSeen,
+            JSON.stringify(newValue.slice(0, 20))
+          )
+          return newValue
+        })
+      },
+      [posthogStorage]
+    ),
+    lastSeenSurveyDate,
+    setLastSeenSurveyDate: useCallback(
+      (date: Date) => {
+        setLastSeenSurveyDate(date)
+        posthogStorage.setPersistedProperty(PostHogPersistedProperty.SurveyLastSeenDate, date.toISOString())
+      },
+      [posthogStorage]
+    ),
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 5107a218..358660cb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3438,6 +3438,11 @@ body-parser@1.19.0:
     raw-body "2.4.0"
     type-is "~1.6.17"
 
+boolbase@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+  integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
+
 bplist-creator@0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/bplist-creator/-/bplist-creator-0.1.0.tgz#018a2d1b587f769e379ef5519103730f8963ba1e"
@@ -4060,6 +4065,30 @@ crypto-random-string@^2.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
+css-select@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6"
+  integrity sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^6.1.0"
+    domhandler "^5.0.2"
+    domutils "^3.0.1"
+    nth-check "^2.0.1"
+
+css-tree@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
+  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
+  dependencies:
+    mdn-data "2.0.14"
+    source-map "^0.6.1"
+
+css-what@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
+  integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
+
 cssom@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.5.0.tgz#d254fa92cd8b6fbd83811b9fbaed34663cc17c36"
@@ -4337,6 +4366,20 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-serializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
+  integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.2"
+    entities "^4.2.0"
+
+domelementtype@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
+  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
+
 domexception@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/domexception/-/domexception-4.0.0.tgz#4ad1be56ccadc86fc76d033353999a8037d03673"
@@ -4344,6 +4387,22 @@ domexception@^4.0.0:
   dependencies:
     webidl-conversions "^7.0.0"
 
+domhandler@^5.0.2, domhandler@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
+  integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
+  dependencies:
+    domelementtype "^2.3.0"
+
+domutils@^3.0.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.2.1.tgz#b39f4c390a1ae6f6a2c56a5f5a16d6438b6bce28"
+  integrity sha512-xWXmuRnN9OMP6ptPd2+H0cCbcYBULa5YDTbMm/2lvkWvNA3O4wcW+GvzooqBuNM8yy6pl3VIAeJTUUWUbfI5Fw==
+  dependencies:
+    dom-serializer "^2.0.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+
 dts-bundle@^0.7.3:
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/dts-bundle/-/dts-bundle-0.7.3.tgz#372b7bb69c820782e6382f400739a69dced3d59a"
@@ -4412,6 +4471,11 @@ end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
+entities@^4.2.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
+  integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
+
 env-editor@^0.4.1:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/env-editor/-/env-editor-0.4.2.tgz#4e76568d0bd8f5c2b6d314a9412c8fe9aa3ae861"
@@ -7465,6 +7529,11 @@ md5hex@^1.0.0:
   resolved "https://registry.yarnpkg.com/md5hex/-/md5hex-1.0.0.tgz#ed74b477a2ee9369f75efee2f08d5915e52a42e8"
   integrity sha512-c2YOUbp33+6thdCUi34xIyOU/a7bvGKj/3DB1iaPMTuPHf/Q2d5s4sn1FaCOO43XkXggnb08y5W2PU8UNYNLKQ==
 
+mdn-data@2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
+  integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
+
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -8122,6 +8191,13 @@ npm-run-path@^4.0.1:
   dependencies:
     path-key "^3.0.0"
 
+nth-check@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
+  integrity sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==
+  dependencies:
+    boolbase "^1.0.0"
+
 nullthrows@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/nullthrows/-/nullthrows-1.1.1.tgz#7818258843856ae971eae4208ad7d7eb19a431b1"
@@ -8804,6 +8880,15 @@ react-native-navigation@^6.0.0:
     react-lifecycles-compat "2.0.0"
     tslib "1.9.3"
 
+react-native-svg@^15.2.0:
+  version "15.10.1"
+  resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-15.10.1.tgz#5df51fca80cb1912648d058b67903f05eac0b8a6"
+  integrity sha512-Hqz/doQciVFK/Df2v+wsW96oY5jxlta7rZ31KQYo78dlgvAHEaGr6paEOAMvlIruw7EHNQ0Vc1ZmJPJF2kfIPQ==
+  dependencies:
+    css-select "^5.1.0"
+    css-tree "^1.1.3"
+    warn-once "0.1.1"
+
 react-native@^0.69.1:
   version "0.69.12"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.69.12.tgz#527eced0bf0be2e2ce0c313df9b8ded23a2d1e41"
@@ -9690,16 +9775,7 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -9785,7 +9861,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -9799,13 +9875,6 @@ strip-ansi@^5.0.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -10542,6 +10611,11 @@ walker@^1.0.7, walker@^1.0.8, walker@~1.0.5:
   dependencies:
     makeerror "1.0.12"
 
+warn-once@0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/warn-once/-/warn-once-0.1.1.tgz#952088f4fb56896e73fd4e6a3767272a3fccce43"
+  integrity sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q==
+
 wcwidth@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"
@@ -10684,7 +10758,7 @@ word-wrap@^1.2.5:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -10702,15 +10776,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"

From 0519932e1a1481838964a1084ded2c782e8b66e8 Mon Sep 17 00:00:00 2001
From: Ian Craig <ian.craig@slyp.com.au>
Date: Sat, 4 Jan 2025 15:05:57 +1100
Subject: [PATCH 2/8] Bug fixes

---
 posthog-react-native/package.json                          | 2 +-
 posthog-react-native/src/surveys/PostHogSurveyProvider.tsx | 4 ++--
 posthog-react-native/src/surveys/useSurveyStorage.ts       | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/posthog-react-native/package.json b/posthog-react-native/package.json
index c0149c92..11664e18 100644
--- a/posthog-react-native/package.json
+++ b/posthog-react-native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "posthog-react-native",
-  "version": "3.6.1",
+  "version": "3.6.1-surveys-0.2.0",
   "main": "lib/posthog-react-native/index.js",
   "files": [
     "lib/"
diff --git a/posthog-react-native/src/surveys/PostHogSurveyProvider.tsx b/posthog-react-native/src/surveys/PostHogSurveyProvider.tsx
index ba7ba9a4..02454724 100644
--- a/posthog-react-native/src/surveys/PostHogSurveyProvider.tsx
+++ b/posthog-react-native/src/surveys/PostHogSurveyProvider.tsx
@@ -76,7 +76,7 @@ export function PostHogSurveyProvider(props: PostHogSurveyProviderProps): JSX.El
   const activatedSurveys = useActivatedSurveys(posthog, surveys)
 
   //TODO Why is this untyped?
-   
+
   const flags: Record<string, string | boolean> | undefined = useFeatureFlags(posthog)
 
   // Load surveys once
@@ -91,7 +91,7 @@ export function PostHogSurveyProvider(props: PostHogSurveyProviderProps): JSX.El
 
   // Whenever state changes and there's no active survey, check if there is a new survey to show
   useEffect(() => {
-    if (activeSurvey || !props.automaticSurveyModal) {
+    if (activeSurvey || props.automaticSurveyModal === false) {
       return
     }
 
diff --git a/posthog-react-native/src/surveys/useSurveyStorage.ts b/posthog-react-native/src/surveys/useSurveyStorage.ts
index c1bda7ff..afd82c40 100644
--- a/posthog-react-native/src/surveys/useSurveyStorage.ts
+++ b/posthog-react-native/src/surveys/useSurveyStorage.ts
@@ -1,4 +1,4 @@
-import { PostHogPersistedProperty } from 'posthog-core'
+import { PostHogPersistedProperty } from '../../../posthog-core/src'
 import { useCallback, useEffect, useState } from 'react'
 import { usePostHog } from '../hooks/usePostHog'
 

From 37c1115100f441f5a6da1f6b9c321536342d6c1a Mon Sep 17 00:00:00 2001
From: Ian Craig <ian.craig@slyp.com.au>
Date: Sat, 4 Jan 2025 15:22:09 +1100
Subject: [PATCH 3/8] Fix package name in Readme

---
 posthog-react-native/src/surveys/Readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/posthog-react-native/src/surveys/Readme.md b/posthog-react-native/src/surveys/Readme.md
index 87d69f7f..0a0b1e16 100644
--- a/posthog-react-native/src/surveys/Readme.md
+++ b/posthog-react-native/src/surveys/Readme.md
@@ -61,7 +61,7 @@ The hook `useActiveSurvey` will return the survey that should currently be displ
 You can also import the `<Questions>` component directly and pass your own survey appearance if you'd like to reuse the survey content in your own modal or screen.
 
 ```ts
-import { useActiveSurvey, type SurveyAppearance } from 'posthog-react-native-surveys'
+import { useActiveSurvey, type SurveyAppearance } from 'posthog-react-native'
 
 const appearance: SurveyAppearance = {
   // ... Your theme here

From c3e3b2c4af0d7b9779732a613c3ea89997fa7169 Mon Sep 17 00:00:00 2001
From: Ian Craig <ian.craig@slyp.com.au>
Date: Sun, 5 Jan 2025 10:12:30 +1100
Subject: [PATCH 4/8] Fix to show widget modals even when automaticSurveyModal
 is false

---
 .../src/surveys/PostHogSurveyProvider.tsx                | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/posthog-react-native/src/surveys/PostHogSurveyProvider.tsx b/posthog-react-native/src/surveys/PostHogSurveyProvider.tsx
index 02454724..b80d1633 100644
--- a/posthog-react-native/src/surveys/PostHogSurveyProvider.tsx
+++ b/posthog-react-native/src/surveys/PostHogSurveyProvider.tsx
@@ -91,7 +91,7 @@ export function PostHogSurveyProvider(props: PostHogSurveyProviderProps): JSX.El
 
   // Whenever state changes and there's no active survey, check if there is a new survey to show
   useEffect(() => {
-    if (activeSurvey || props.automaticSurveyModal === false) {
+    if (activeSurvey) {
       return
     }
 
@@ -153,11 +153,16 @@ export function PostHogSurveyProvider(props: PostHogSurveyProviderProps): JSX.El
     }
   }, [activeSurvey, posthog, setLastSeenSurveyDate, setSeenSurvey])
 
+  // Modal is shown for PopOver surveys or if automaticSurveyModal is true, and for all widget surveys
+  // because these would have been invoked by the useFeedbackSurvey hook's showSurveyModal() method
+  const shouldShowModal =
+    activeContext && (props.automaticSurveyModal !== false || activeContext.survey.type === 'widget')
+
   return (
     <ActiveSurveyContext.Provider value={activeContext}>
       <FeedbackSurveyContext.Provider value={{ surveys, activeSurvey, setActiveSurvey }}>
         {props.children}
-        {activeContext && <SurveyModal appearance={surveyAppearance} {...activeContext} />}
+        {shouldShowModal && <SurveyModal appearance={surveyAppearance} {...activeContext} />}
       </FeedbackSurveyContext.Provider>
     </ActiveSurveyContext.Provider>
   )

From 3f348a26f5618c60986608bf2a4711c5f83e7045 Mon Sep 17 00:00:00 2001
From: Ian Craig <ian.craig@slyp.com.au>
Date: Sun, 26 Jan 2025 18:41:51 +1100
Subject: [PATCH 5/8] Move getSurveys to core

---
 posthog-core/src/index.ts                     | 24 +++++++++++++++++
 .../src}/posthog-surveys-types.ts             |  0
 posthog-react-native/src/posthog-rn.ts        | 27 +------------------
 .../src/surveys/PostHogSurveyProvider.tsx     |  4 +--
 .../components/ConfirmationMessage.tsx        |  2 +-
 .../src/surveys/components/QuestionHeader.tsx |  2 +-
 .../src/surveys/components/QuestionTypes.tsx  |  2 +-
 .../src/surveys/components/SurveyModal.tsx    |  2 +-
 .../src/surveys/components/Surveys.tsx        |  2 +-
 .../src/surveys/getActiveMatchingSurveys.ts   |  2 +-
 posthog-react-native/src/surveys/index.ts     |  2 +-
 .../src/surveys/surveys-utils.ts              |  7 ++++-
 .../src/surveys/useActivatedSurveys.ts        |  2 +-
 13 files changed, 41 insertions(+), 37 deletions(-)
 rename {posthog-react-native/src/surveys => posthog-core/src}/posthog-surveys-types.ts (100%)

diff --git a/posthog-core/src/index.ts b/posthog-core/src/index.ts
index a672d14f..dcf94d41 100644
--- a/posthog-core/src/index.ts
+++ b/posthog-core/src/index.ts
@@ -23,6 +23,7 @@ export * as utils from './utils'
 import { LZString } from './lz-string'
 import { SimpleEventEmitter } from './eventemitter'
 import { uuidv7 } from './vendor/uuidv7'
+import { Survey, SurveyResponse } from './posthog-surveys-types'
 
 class PostHogFetchHttpError extends Error {
   name = 'PostHogFetchHttpError'
@@ -472,6 +473,29 @@ export abstract class PostHogCoreStateless {
     }
   }
 
+  /***
+   *** SURVEYS
+   ***/
+
+  public async getSurveys(): Promise<Survey[]> {
+    await this._initPromise
+
+    const url = `${this.host}/api/surveys/?token=${this.apiKey}`
+    const fetchOptions: PostHogFetchOptions = {
+      method: 'GET',
+      headers: this.getCustomHeaders(),
+    }
+
+    const response = await this.fetchWithRetry(url, fetchOptions)
+      .then((response) => response.json() as Promise<SurveyResponse>)
+      .catch((error) => {
+        this._events.emit('error', error)
+        return { surveys: [] }
+      })
+
+    return response.surveys
+  }
+
   /***
    *** QUEUEING AND FLUSHING
    ***/
diff --git a/posthog-react-native/src/surveys/posthog-surveys-types.ts b/posthog-core/src/posthog-surveys-types.ts
similarity index 100%
rename from posthog-react-native/src/surveys/posthog-surveys-types.ts
rename to posthog-core/src/posthog-surveys-types.ts
diff --git a/posthog-react-native/src/posthog-rn.ts b/posthog-react-native/src/posthog-rn.ts
index 7d42678b..860ce4eb 100644
--- a/posthog-react-native/src/posthog-rn.ts
+++ b/posthog-react-native/src/posthog-rn.ts
@@ -22,7 +22,7 @@ import {
 } from './types'
 import { withReactNativeNavigation } from './frameworks/wix-navigation'
 import { OptionalReactNativeSessionReplay } from './optional/OptionalSessionReplay'
-import { Survey, SurveyResponse } from './surveys/posthog-surveys-types'
+import { Survey, SurveyResponse } from '../../posthog-core/src/posthog-surveys-types'
 
 export type PostHogOptions = PostHogCoreOptions & {
   /** Allows you to provide the storage type. By default 'file'.
@@ -452,29 +452,4 @@ export class PostHog extends PostHogCore {
     this.setPersistedProperty(PostHogPersistedProperty.InstalledAppBuild, appBuild)
     this.setPersistedProperty(PostHogPersistedProperty.InstalledAppVersion, appVersion)
   }
-
-  /**
-   * @todo Where should this go, and should the result be cached?
-   * I can't find a public method in PostHog which does an authenticated fetch,
-   * so for now I've included the fetch here so it can access the api key.
-   */
-  public async fetchSurveys(): Promise<Survey[]> {
-    const response = await this.fetch(
-      // PostHog Dashboard complains I'm using an old SDK version, I think because the ver query param isn't provided.
-      // TODO I've pulled a recent version from posthog-js, but this should be updated.
-      `${this.host}/api/surveys/?token=${this.apiKey}&ver=1.200.0`,
-      {
-        method: 'GET',
-        headers: this.getCustomHeaders(),
-      }
-    )
-
-    if (response.status > 300) {
-      // TODO Best practice for handling this?
-      throw new Error('Failed to fetch PostHog surveys')
-    }
-
-    const json = (await response.json()) as SurveyResponse
-    return json.surveys
-  }
 }
diff --git a/posthog-react-native/src/surveys/PostHogSurveyProvider.tsx b/posthog-react-native/src/surveys/PostHogSurveyProvider.tsx
index b80d1633..3a18d69d 100644
--- a/posthog-react-native/src/surveys/PostHogSurveyProvider.tsx
+++ b/posthog-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 } from './posthog-surveys-types'
+import { Survey, SurveyAppearance } from '../../../posthog-core/src/posthog-surveys-types'
 import { usePostHog } from '../hooks/usePostHog'
 import { useFeatureFlags } from '../hooks/useFeatureFlags'
 
@@ -82,7 +82,7 @@ export function PostHogSurveyProvider(props: PostHogSurveyProviderProps): JSX.El
   // Load surveys once
   useEffect(() => {
     posthog
-      .fetchSurveys()
+      .getSurveys()
       .then(setSurveys)
       .catch((error: unknown) => {
         posthog.capture('PostHogSurveyProvider failed to fetch surveys', { error })
diff --git a/posthog-react-native/src/surveys/components/ConfirmationMessage.tsx b/posthog-react-native/src/surveys/components/ConfirmationMessage.tsx
index 346e69ae..f52f3170 100644
--- a/posthog-react-native/src/surveys/components/ConfirmationMessage.tsx
+++ b/posthog-react-native/src/surveys/components/ConfirmationMessage.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 
 import { getContrastingTextColor, SurveyAppearanceTheme } from '../surveys-utils'
-import { SurveyQuestionDescriptionContentType } from '../posthog-surveys-types'
+import { SurveyQuestionDescriptionContentType } from '../../../../posthog-core/src/posthog-surveys-types'
 import { BottomSection } from './BottomSection'
 
 export function ConfirmationMessage({
diff --git a/posthog-react-native/src/surveys/components/QuestionHeader.tsx b/posthog-react-native/src/surveys/components/QuestionHeader.tsx
index db4799aa..1693bb15 100644
--- a/posthog-react-native/src/surveys/components/QuestionHeader.tsx
+++ b/posthog-react-native/src/surveys/components/QuestionHeader.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 
-import { SurveyQuestionDescriptionContentType } from '../posthog-surveys-types'
+import { SurveyQuestionDescriptionContentType } from '../../../../posthog-core/src/posthog-surveys-types'
 
 export function QuestionHeader({
   question,
diff --git a/posthog-react-native/src/surveys/components/QuestionTypes.tsx b/posthog-react-native/src/surveys/components/QuestionTypes.tsx
index 535535a9..b561d78b 100644
--- a/posthog-react-native/src/surveys/components/QuestionTypes.tsx
+++ b/posthog-react-native/src/surveys/components/QuestionTypes.tsx
@@ -15,7 +15,7 @@ import {
   LinkSurveyQuestion,
   MultipleSurveyQuestion,
   RatingSurveyQuestion,
-} from '../posthog-surveys-types'
+} from '../../../../posthog-core/src/posthog-surveys-types'
 import { BottomSection } from './BottomSection'
 import { QuestionHeader } from './QuestionHeader'
 
diff --git a/posthog-react-native/src/surveys/components/SurveyModal.tsx b/posthog-react-native/src/surveys/components/SurveyModal.tsx
index bb199050..ec8263c2 100644
--- a/posthog-react-native/src/surveys/components/SurveyModal.tsx
+++ b/posthog-react-native/src/surveys/components/SurveyModal.tsx
@@ -6,7 +6,7 @@ import { ConfirmationMessage } from './ConfirmationMessage'
 import { Questions } from './Surveys'
 
 import { SurveyAppearanceTheme } from '../surveys-utils'
-import { Survey } from '../posthog-surveys-types'
+import { Survey } from '../../../../posthog-core/src/posthog-surveys-types'
 
 export type SlypModalProps = {
   survey: Survey
diff --git a/posthog-react-native/src/surveys/components/Surveys.tsx b/posthog-react-native/src/surveys/components/Surveys.tsx
index 6bd80e70..3c5a0fc7 100644
--- a/posthog-react-native/src/surveys/components/Surveys.tsx
+++ b/posthog-react-native/src/surveys/components/Surveys.tsx
@@ -2,7 +2,7 @@ import React, { useMemo, useState } from 'react'
 import { ScrollView, StyleProp, ViewStyle } from 'react-native'
 
 import { getDisplayOrderQuestions, SurveyAppearanceTheme } from '../surveys-utils'
-import { Survey, SurveyAppearance, SurveyQuestion } from '../posthog-surveys-types'
+import { Survey, SurveyAppearance, SurveyQuestion } from '../../../../posthog-core/src/posthog-surveys-types'
 import { LinkQuestion, MultipleChoiceQuestion, OpenTextQuestion, RatingQuestion } from './QuestionTypes'
 import { PostHog } from '../../posthog-rn'
 import { usePostHog } from '../../hooks/usePostHog'
diff --git a/posthog-react-native/src/surveys/getActiveMatchingSurveys.ts b/posthog-react-native/src/surveys/getActiveMatchingSurveys.ts
index be2a27b0..cc9576f8 100644
--- a/posthog-react-native/src/surveys/getActiveMatchingSurveys.ts
+++ b/posthog-react-native/src/surveys/getActiveMatchingSurveys.ts
@@ -1,5 +1,5 @@
 import { canActivateRepeatedly, hasActions, hasEvents } from './surveys-utils'
-import { Survey } from './posthog-surveys-types'
+import { Survey } from '../../../posthog-core/src/posthog-surveys-types'
 
 export function getActiveMatchingSurveys(
   surveys: Survey[],
diff --git a/posthog-react-native/src/surveys/index.ts b/posthog-react-native/src/surveys/index.ts
index 139f7a16..ceb10cd0 100644
--- a/posthog-react-native/src/surveys/index.ts
+++ b/posthog-react-native/src/surveys/index.ts
@@ -2,5 +2,5 @@ export { PostHogSurveyProvider, useActiveSurvey, useFeedbackSurvey } from './Pos
 export type { PostHogSurveyProviderProps } from './PostHogSurveyProvider'
 export { SurveyModal } from './components/SurveyModal'
 export type { SlypModalProps } from './components/SurveyModal'
-export type { Survey, SurveyAppearance } from './posthog-surveys-types'
+export type { Survey, SurveyAppearance } from '../../../posthog-core/src/posthog-surveys-types'
 export { Questions } from './components/Surveys'
diff --git a/posthog-react-native/src/surveys/surveys-utils.ts b/posthog-react-native/src/surveys/surveys-utils.ts
index bdbd505b..f1ad4c49 100644
--- a/posthog-react-native/src/surveys/surveys-utils.ts
+++ b/posthog-react-native/src/surveys/surveys-utils.ts
@@ -1,4 +1,9 @@
-import { MultipleSurveyQuestion, Survey, SurveyAppearance, SurveyQuestion } from './posthog-surveys-types'
+import {
+  MultipleSurveyQuestion,
+  Survey,
+  SurveyAppearance,
+  SurveyQuestion,
+} from '../../../posthog-core/src/posthog-surveys-types'
 
 export const defaultBackgroundColor = '#eeeded' as const
 
diff --git a/posthog-react-native/src/surveys/useActivatedSurveys.ts b/posthog-react-native/src/surveys/useActivatedSurveys.ts
index f441f8a1..2814d9cf 100644
--- a/posthog-react-native/src/surveys/useActivatedSurveys.ts
+++ b/posthog-react-native/src/surveys/useActivatedSurveys.ts
@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react'
 
 import { hasEvents } from './surveys-utils'
-import { Survey } from './posthog-surveys-types'
+import { Survey } from '../../../posthog-core/src/posthog-surveys-types'
 import { PostHog } from '../posthog-rn'
 
 const SURVEY_SHOWN_EVENT_NAME = 'survey shown'

From 0825fb60e6ef882cfdc2675b9bcefd9e76fbd06e Mon Sep 17 00:00:00 2001
From: Ian Craig <ian.craig@slyp.com.au>
Date: Sun, 26 Jan 2025 18:45:00 +1100
Subject: [PATCH 6/8] Clean up comments

---
 posthog-react-native/src/surveys/PostHogSurveyProvider.tsx | 4 +---
 posthog-react-native/src/surveys/useActivatedSurveys.ts    | 1 -
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/posthog-react-native/src/surveys/PostHogSurveyProvider.tsx b/posthog-react-native/src/surveys/PostHogSurveyProvider.tsx
index 3a18d69d..e5e8de6b 100644
--- a/posthog-react-native/src/surveys/PostHogSurveyProvider.tsx
+++ b/posthog-react-native/src/surveys/PostHogSurveyProvider.tsx
@@ -75,9 +75,7 @@ export function PostHogSurveyProvider(props: PostHogSurveyProviderProps): JSX.El
   const [activeSurvey, setActiveSurvey] = useState<Survey | undefined>(undefined)
   const activatedSurveys = useActivatedSurveys(posthog, surveys)
 
-  //TODO Why is this untyped?
-
-  const flags: Record<string, string | boolean> | undefined = useFeatureFlags(posthog)
+  const flags = useFeatureFlags(posthog)
 
   // Load surveys once
   useEffect(() => {
diff --git a/posthog-react-native/src/surveys/useActivatedSurveys.ts b/posthog-react-native/src/surveys/useActivatedSurveys.ts
index 2814d9cf..5f02b0a0 100644
--- a/posthog-react-native/src/surveys/useActivatedSurveys.ts
+++ b/posthog-react-native/src/surveys/useActivatedSurveys.ts
@@ -8,7 +8,6 @@ const SURVEY_SHOWN_EVENT_NAME = 'survey shown'
 
 export function useActivatedSurveys(posthog: PostHog, surveys: Survey[]): ReadonlySet<string> {
   const [activatedSurveys, setActivatedSurveys] = useState<ReadonlySet<string>>(new Set())
-  //TODO Support Action activation
 
   const eventMap = useMemo(() => {
     const newEventMap = new Map<string, string[]>()

From 00ba10e4e9116ea202e627cb82cc620dd32c4dcc Mon Sep 17 00:00:00 2001
From: Ian Craig <ian.craig@slyp.com.au>
Date: Mon, 27 Jan 2025 15:19:47 +1100
Subject: [PATCH 7/8] Add optional safe area insets

---
 .../optional/OptionalReactNativeSafeArea.ts   | 22 ++++++++++++
 .../src/surveys/components/SurveyModal.tsx    |  9 +++--
 yarn.lock                                     | 36 +++++++++++++++++--
 3 files changed, 62 insertions(+), 5 deletions(-)
 create mode 100644 posthog-react-native/src/optional/OptionalReactNativeSafeArea.ts

diff --git a/posthog-react-native/src/optional/OptionalReactNativeSafeArea.ts b/posthog-react-native/src/optional/OptionalReactNativeSafeArea.ts
new file mode 100644
index 00000000..e0557df7
--- /dev/null
+++ b/posthog-react-native/src/optional/OptionalReactNativeSafeArea.ts
@@ -0,0 +1,22 @@
+import type RNSafeAreaContext from 'react-native-safe-area-context'
+
+let OptionalRNSafeArea: typeof RNSafeAreaContext | undefined = undefined
+
+try {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  OptionalRNSafeArea = require('react-native-safe-area-context')
+} catch (e) {}
+
+function createDefaultInsets(): RNSafeAreaContext.EdgeInsets {
+  // If the library isn't available, fall back to a default which should cover most devices
+  return { top: 60, bottom: 30, left: 0, right: 0 }
+}
+
+export const useOptionalSafeAreaInsets = (): RNSafeAreaContext.EdgeInsets => {
+  const useSafeAreaInsets = OptionalRNSafeArea?.useSafeAreaInsets ?? createDefaultInsets
+  try {
+    return useSafeAreaInsets()
+  } catch (err) {
+    return createDefaultInsets()
+  }
+}
diff --git a/posthog-react-native/src/surveys/components/SurveyModal.tsx b/posthog-react-native/src/surveys/components/SurveyModal.tsx
index ec8263c2..8f5b095f 100644
--- a/posthog-react-native/src/surveys/components/SurveyModal.tsx
+++ b/posthog-react-native/src/surveys/components/SurveyModal.tsx
@@ -7,6 +7,7 @@ import { Questions } from './Surveys'
 
 import { SurveyAppearanceTheme } from '../surveys-utils'
 import { Survey } from '../../../../posthog-core/src/posthog-surveys-types'
+import { useOptionalSafeAreaInsets } from '../../optional/OptionalReactNativeSafeArea'
 
 export type SlypModalProps = {
   survey: Survey
@@ -19,6 +20,7 @@ export function SurveyModal(props: SlypModalProps): JSX.Element | null {
   const { survey, appearance, onShow } = props
   const [isSurveySent, setIsSurveySent] = useState(false)
   const onClose = useCallback(() => props.onClose(isSurveySent), [isSurveySent, props])
+  const insets = useOptionalSafeAreaInsets()
 
   const surveyPopupDelayMilliseconds = appearance.surveyPopupDelaySeconds * 1000
   const [isVisible, setIsVisible] = useState(surveyPopupDelayMilliseconds === 0)
@@ -52,7 +54,11 @@ export function SurveyModal(props: SlypModalProps): JSX.Element | null {
 
   return (
     <Modal animationType="fade" transparent onRequestClose={onClose} statusBarTranslucent={true}>
-      <Pressable style={styles.modalContainer} onPress={onClose} accessible={false}>
+      <Pressable
+        style={[styles.modalContainer, { marginBottom: insets.bottom + 20 }]}
+        onPress={onClose}
+        accessible={false}
+      >
         <TouchableWithoutFeedback accessible={false}>
           <View
             style={[
@@ -87,7 +93,6 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'flex-end',
-    marginVertical: 40, // TODO Plus safe area?
     marginHorizontal: 20,
   },
   modalContent: {
diff --git a/yarn.lock b/yarn.lock
index 358660cb..053bcb28 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8880,6 +8880,11 @@ react-native-navigation@^6.0.0:
     react-lifecycles-compat "2.0.0"
     tslib "1.9.3"
 
+"react-native-safe-area-context@>= 4.10.1":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-5.1.0.tgz#0125f0c7762a2c189a3d067623ab8fbcdcb79cb8"
+  integrity sha512-Y4vyJX+0HPJUQNVeIJTj2/UOjbSJcB09OEwirAWDrOZ67Lz5p43AmjxSy8nnZft1rMzoh3rcPuonB6jJyHTfCw==
+
 react-native-svg@^15.2.0:
   version "15.10.1"
   resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-15.10.1.tgz#5df51fca80cb1912648d058b67903f05eac0b8a6"
@@ -9775,7 +9780,16 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -9861,7 +9875,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -9875,6 +9889,13 @@ strip-ansi@^5.0.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -10758,7 +10779,7 @@ word-wrap@^1.2.5:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -10776,6 +10797,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"

From 57f1778ccb14e5f0f08ed410b0dfc8771eaac973 Mon Sep 17 00:00:00 2001
From: Ian Craig <ian.craig@slyp.com.au>
Date: Thu, 6 Feb 2025 14:44:41 +1100
Subject: [PATCH 8/8] Add missing peer dependency

---
 posthog-react-native/package.json | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/posthog-react-native/package.json b/posthog-react-native/package.json
index 11664e18..1d8fed6e 100644
--- a/posthog-react-native/package.json
+++ b/posthog-react-native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "posthog-react-native",
-  "version": "3.6.1-surveys-0.2.0",
+  "version": "3.6.1",
   "main": "lib/posthog-react-native/index.js",
   "files": [
     "lib/"
@@ -33,6 +33,7 @@
     "react-native": "^0.69.1",
     "react-native-device-info": "^10.3.0",
     "react-native-navigation": "^6.0.0",
+    "react-native-safe-area-context": ">= 4.10.1",
     "react-native-svg": "^15.2.0",
     "posthog-react-native-session-replay": "^0.1"
   },
@@ -45,6 +46,7 @@
     "expo-localization": ">= 11.0.0",
     "react-native-device-info": ">= 10.0.0",
     "react-native-navigation": ">=6.0.0",
+    "react-native-safe-area-context": ">= 4.10.1",
     "react-native-svg": ">= 15.2.0",
     "posthog-react-native-session-replay": "^0.1"
   },
@@ -73,7 +75,7 @@
     "react-native-navigation": {
       "optional": true
     },
-    "posthog-react-native-session-replay": {
+    "react-native-safe-area-context": {
       "optional": true
     }
   }