diff --git a/posthog-core/src/index.ts b/posthog-core/src/index.ts
index f603b759..9eec1128 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-core/src/posthog-surveys-types.ts b/posthog-core/src/posthog-surveys-types.ts
new file mode 100644
index 00000000..df286455
--- /dev/null
+++ b/posthog-core/src/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-core/src/types.ts b/posthog-core/src/types.ts
index d3d833d0..8a940b24 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 25e35d03..498e8016 100644
--- a/posthog-react-native/package.json
+++ b/posthog-react-native/package.json
@@ -33,6 +33,8 @@
     "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",
     "react-native-localize": "^3.0.0",
     "posthog-react-native-session-replay": "^1.0.0"
   },
@@ -45,6 +47,8 @@
     "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": "^1.0.0"
   },
   "peerDependenciesMeta": {
@@ -72,7 +76,7 @@
     "react-native-navigation": {
       "optional": true
     },
-    "posthog-react-native-session-replay": {
+    "react-native-safe-area-context": {
       "optional": true
     }
   }
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/posthog-rn.ts b/posthog-react-native/src/posthog-rn.ts
index eedb706b..42fcf4e1 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 '../../posthog-core/src/posthog-surveys-types'
 
 export type PostHogOptions = PostHogCoreOptions & {
   /** Allows you to provide the storage type. By default 'file'.
diff --git a/posthog-react-native/src/surveys/PostHogSurveyProvider.tsx b/posthog-react-native/src/surveys/PostHogSurveyProvider.tsx
new file mode 100644
index 00000000..e5e8de6b
--- /dev/null
+++ b/posthog-react-native/src/surveys/PostHogSurveyProvider.tsx
@@ -0,0 +1,173 @@
+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-core/src/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)
+
+  const flags = useFeatureFlags(posthog)
+
+  // Load surveys once
+  useEffect(() => {
+    posthog
+      .getSurveys()
+      .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) {
+      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])
+
+  // 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}
+        {shouldShowModal && <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..0a0b1e16
--- /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'
+
+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..f52f3170
--- /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-core/src/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..1693bb15
--- /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-core/src/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..b561d78b
--- /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-core/src/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..8f5b095f
--- /dev/null
+++ b/posthog-react-native/src/surveys/components/SurveyModal.tsx
@@ -0,0 +1,108 @@
+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-core/src/posthog-surveys-types'
+import { useOptionalSafeAreaInsets } from '../../optional/OptionalReactNativeSafeArea'
+
+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 insets = useOptionalSafeAreaInsets()
+
+  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, { marginBottom: insets.bottom + 20 }]}
+        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',
+    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..3c5a0fc7
--- /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-core/src/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..cc9576f8
--- /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-core/src/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..ceb10cd0
--- /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-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
new file mode 100644
index 00000000..f1ad4c49
--- /dev/null
+++ b/posthog-react-native/src/surveys/surveys-utils.ts
@@ -0,0 +1,281 @@
+import {
+  MultipleSurveyQuestion,
+  Survey,
+  SurveyAppearance,
+  SurveyQuestion,
+} from '../../../posthog-core/src/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..5f02b0a0
--- /dev/null
+++ b/posthog-react-native/src/surveys/useActivatedSurveys.ts
@@ -0,0 +1,43 @@
+import { useEffect, useMemo, useState } from 'react'
+
+import { hasEvents } from './surveys-utils'
+import { Survey } from '../../../posthog-core/src/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())
+
+  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..afd82c40
--- /dev/null
+++ b/posthog-react-native/src/surveys/useSurveyStorage.ts
@@ -0,0 +1,59 @@
+import { PostHogPersistedProperty } from '../../../posthog-core/src'
+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 24449d8c..d5dd9da1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3581,6 +3581,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"
@@ -4215,6 +4220,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"
@@ -4507,6 +4536,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"
@@ -4514,6 +4557,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"
@@ -4582,6 +4641,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"
@@ -7737,6 +7801,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"
@@ -8423,6 +8492,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"
@@ -9164,6 +9240,20 @@ 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"
+  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"
@@ -10940,6 +11030,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"