Watermark posts in screenshots (#9637)

* watermark posts in screenshots * disable when app is backgrounded * fix alignment * show watermark even when there isn't a button
2026-01-15 05:03:13 +02:00
parent 65faee4f08
commit ab85b509c0
5 changed files with 89 additions and 9 deletions
@@ -0,0 +1,65 @@
+import {useState} from 'react'
+import {View} from 'react-native'
+import {PrivacySensitive} from 'expo-privacy-sensitive'
+
+import {useAppState} from '#/lib/hooks/useAppState'
+import {isIOS} from '#/platform/detection'
+import {atoms as a, useTheme} from '#/alf'
+import {sizes as iconSizes} from '#/components/icons/common'
+import {Mark as Logo} from '#/components/icons/Logo'
+
+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 (!isIOS || appState !== 'active') return children
+
+  return (
+    <View
+      style={[
+        a.relative,
+        a.justify_center,
+        align === 'right' ? a.align_end : a.align_start,
+        width === undefined ? {opacity: 0} : {minWidth: width},
+      ]}>
+      <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 hide the entire thing (see above)
+          width === undefined && {width: 10000},
+        ]}>
+        <View
+          onLayout={evt => setWidth(evt.nativeEvent.layout.width)}
+          style={[
+            t.atoms.bg,
+            // make sure it covers the icon! the won't always be a button
+            {minWidth: iconSizes[ICON_SIZE], minHeight: iconSizes[ICON_SIZE]},
+          ]}>
+          {children}
+        </View>
+      </PrivacySensitive>
+      <Logo size={ICON_SIZE} />
+    </View>
+  )
+}