Eric Bailey
25a1ed1209
* WIP * Clean up growthbook code, integrate into init and sessions * Move everything out of React * Add metrics client * Move to separate file * Shared metadata cache * Ensure we update metadata when session ID changes * Ensure userMetadata is cleared when logging out * WIP revamp * Integrate feature gates into analytics context * Clean up old code * Fix useMeta util * Some comments and cleanup * Add logger to base analytics context * Refactor current route handling * Rip out LogEvent from navigation * Update tracking endpoint * Migrate toClout * Clear out statsig client * Add todo, reset logger readme * Ope fix statsig noop * Refactor logging in feed-feedback, add debug logging to metrics client * Remove LogEvents alias for Metrics * Prefer root package export * Remove Metrics alias from logger * [APP-1782] Migrate to new analytics APIs (#9735) * Migrate logEvent to useAnalytics * Migrate logger.metric to useAnalytics * Migrate tricky spot, fix types * Migrate remaining tricky spot * Missed one * Remove metric() from logger * Migrate useGate to useAnalytics * Remove all other StatSig mentions * Update event payload * Update logger tests * Mock expo method * Fix session ID bug * Add session ID test * Add test for metrics client * Clarify intent * Clean up core analytics file * Clean up the call once utils * Fix TODO * Fix TODO * Fix TODO * Fix TODO * Fix TODO * Remove debug code * Fix navigation context * OK nav context is not working, todo * Checkpoint: works but feels hacky * Fix navigation context issue * Improve feature API * Improve metric logging * Update logger tests
67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
import {useState} from 'react'
|
|
import {View} from 'react-native'
|
|
import {PrivacySensitive} from 'expo-privacy-sensitive'
|
|
|
|
import {useAppState} from '#/lib/appState'
|
|
import {atoms as a, useTheme} from '#/alf'
|
|
import {sizes as iconSizes} from '#/components/icons/common'
|
|
import {Mark as Logo} from '#/components/icons/Logo'
|
|
import {IS_IOS} from '#/env'
|
|
|
|
const ICON_SIZE = 'xl' as const
|
|
|
|
export function GrowthHack({
|
|
children,
|
|
align = 'right',
|
|
}: {
|
|
children: React.ReactNode
|
|
align?: 'left' | 'right'
|
|
}) {
|
|
const t = useTheme()
|
|
|
|
// the button has a variable width and is absolutely positioned, so we need to manually
|
|
// set the minimum width of the underlying button
|
|
const [width, setWidth] = useState<number | undefined>(undefined)
|
|
|
|
const appState = useAppState()
|
|
|
|
if (!IS_IOS || appState !== 'active') return children
|
|
|
|
return (
|
|
<View
|
|
style={[
|
|
a.relative,
|
|
a.justify_center,
|
|
align === 'right' ? a.align_end : a.align_start,
|
|
{minWidth: width ?? iconSizes[ICON_SIZE]},
|
|
]}>
|
|
<PrivacySensitive
|
|
style={[
|
|
a.absolute,
|
|
a.z_10,
|
|
a.flex_col,
|
|
align === 'right'
|
|
? [a.right_0, a.align_end]
|
|
: [a.left_0, a.align_start],
|
|
// when finding the size of the button, we need the containing
|
|
// element to have a concrete size otherwise the text will
|
|
// collapse to 0 width. so set it to a really big number
|
|
// and just use `pointer-events: box-none` so it doesn't interfere with the UI
|
|
{width: 1000},
|
|
a.pointer_events_box_none,
|
|
]}>
|
|
<View
|
|
onLayout={evt => setWidth(evt.nativeEvent.layout.width)}
|
|
style={[
|
|
t.atoms.bg,
|
|
// make sure it covers the icon! children might be undefined
|
|
{minWidth: iconSizes[ICON_SIZE], minHeight: iconSizes[ICON_SIZE]},
|
|
]}>
|
|
{children}
|
|
</View>
|
|
</PrivacySensitive>
|
|
<Logo size={ICON_SIZE} />
|
|
</View>
|
|
)
|
|
}
|