Merge branch 'main' of github.com:bluesky-social/social-app into main

src/App.native.tsx

@@ -61,17 +61,17 @@ const App = observer(() => {
 
   return (
     <GestureHandlerRootView style={s.h100pct}>
+      <ThemeProvider theme={rootStore.shell.darkMode ? 'dark' : 'light'}>
         <RootSiblingParent>
           <AnalyticsProvider client={segment}>
             <RootStoreProvider value={rootStore}>
-            <ThemeProvider theme={rootStore.shell.darkMode ? 'dark' : 'light'}>
               <SafeAreaProvider>
                 <MobileShell />
               </SafeAreaProvider>
-            </ThemeProvider>
             </RootStoreProvider>
           </AnalyticsProvider>
         </RootSiblingParent>
+      </ThemeProvider>
     </GestureHandlerRootView>
   )
 })

src/view/com/lightbox/ImageViewing/index.tsx

@@ -86,12 +86,18 @@ function ImageViewing({
     [toggleBarsVisible],
   )
 
+  const onLayout = useCallback(() => {
+    if (imageIndex) {
+      imageList.current?.scrollToIndex({index: imageIndex, animated: false})
+    }
+  }, [imageList, imageIndex])
+
   if (!visible) {
     return null
   }
 
   return (
-    <View style={styles.screen}>
+    <View style={styles.screen} onLayout={onLayout}>
       <Modal />
       <View style={[styles.container, {opacity, backgroundColor}]}>
         <Animated.View style={[styles.header, {transform: headerTransform}]}>
@@ -110,7 +116,6 @@ function ImageViewing({
           pagingEnabled
           showsHorizontalScrollIndicator={false}
           showsVerticalScrollIndicator={false}
-          initialScrollIndex={imageIndex}
           getItem={(_, index) => images[index]}
           getItemCount={() => images.length}
           getItemLayout={(_, index) => ({

src/view/com/util/forms/DropdownButton.tsx

@@ -18,6 +18,8 @@ import {toShareUrl} from '../../../../lib/strings'
 import {useStores} from '../../../../state'
 import {ReportPostModal, ConfirmModal} from '../../../../state/models/shell-ui'
 import {TABS_ENABLED} from '../../../../build-flags'
+import {usePalette} from '../../../lib/hooks/usePalette'
+import {useTheme} from '../../../lib/ThemeContext'
 
 const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10}
 
@@ -181,24 +183,14 @@ function createDropdownMenu(
   const onOuterPress = () => sibling.destroy()
   const sibling = new RootSiblings(
     (
-      <>
+      <DropdownItems
-        <TouchableWithoutFeedback onPress={onOuterPress}>
+        onOuterPress={onOuterPress}
-          <View style={styles.bg} />
+        x={x}
-        </TouchableWithoutFeedback>
+        y={y}
-        <View style={[styles.menu, {left: x, top: y, width}]}>
+        width={width}
-          {items.map((item, index) => (
+        items={items}
-            <TouchableOpacity
+        onPressItem={onPressItem}
-              key={index}
+      />
-              style={styles.menuItem}
-              onPress={() => onPressItem(index)}>
-              {item.icon && (
-                <FontAwesomeIcon style={styles.icon} icon={item.icon} />
-              )}
-              <Text style={styles.label}>{item.label}</Text>
-            </TouchableOpacity>
-          ))}
-        </View>
-      </>
     ),
   )
   return sibling
@@ -242,3 +234,55 @@ const styles = StyleSheet.create({
     fontSize: 18,
   },
 })
+type DropDownItemProps = {
+  onOuterPress: () => void
+  x: number
+  y: number
+  width: number
+  items: DropdownItem[]
+  onPressItem: (index: number) => void
+}
+
+const DropdownItems = ({
+  onOuterPress,
+  x,
+  y,
+  width,
+  items,
+  onPressItem,
+}: DropDownItemProps): React.ReactNode => {
+  const pal = usePalette('default')
+  const theme = useTheme()
+  const dropDownBackgroundColor =
+    theme.colorScheme === 'dark' ? pal.btn : pal.view
+
+  return (
+    <>
+      <TouchableWithoutFeedback onPress={onOuterPress}>
+        <View style={[styles.bg]} />
+      </TouchableWithoutFeedback>
+      <View
+        style={[
+          styles.menu,
+          {left: x, top: y, width},
+          dropDownBackgroundColor,
+        ]}>
+        {items.map((item, index) => (
+          <TouchableOpacity
+            key={index}
+            style={[styles.menuItem]}
+            onPress={() => onPressItem(index)}>
+            {item.icon && (
+              <FontAwesomeIcon
+                style={styles.icon}
+                icon={item.icon}
+                color={pal.text.color as text}
+              />
+            )}
+            <Text style={[styles.label, pal.text]}>{item.label}</Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </>
+  )
+}