Added useFeatureFlagWithPayload for react native (#111)

Co-authored-by: Manoel Aranda Neto <[email protected]>

posthog-react-native/CHANGELOG.md

@@ -1,3 +1,7 @@
+# Next
+
+1. Added new `const [flag, payload] = useFeatureFlagWithPayload('my-flag-name')` hook that returns the flag result and it's payload if it has one.
+
 # 2.7.1 - 2023-05-25
 
 1. The `$screen_name` property will be registered for all events whenever `screen` is called

posthog-react-native/src/hooks/useFeatureFlag.ts

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
 import { usePostHog } from './usePostHog'
+import { JsonType } from 'posthog-core/src'
 
 export function useFeatureFlag(flag: string): string | boolean | undefined {
   const posthog = usePostHog()
@@ -18,3 +19,24 @@ export function useFeatureFlag(flag: string): string | boolean | undefined {
 
   return featureFlag
 }
+
+export type FeatureFlagWithPayload = [boolean | string | undefined, JsonType | undefined]
+
+export function useFeatureFlagWithPayload(flag: string): FeatureFlagWithPayload {
+  const posthog = usePostHog()
+
+  const [featureFlag, setFeatureFlag] = useState<FeatureFlagWithPayload>([undefined, undefined])
+
+  useEffect(() => {
+    if (!posthog) {
+      return
+    }
+
+    setFeatureFlag([posthog.getFeatureFlag(flag), posthog.getFeatureFlagPayload(flag)])
+    return posthog.onFeatureFlags(() => {
+      setFeatureFlag([posthog.getFeatureFlag(flag), posthog.getFeatureFlagPayload(flag)])
+    })
+  }, [posthog, flag])
+
+  return featureFlag
+}