Merge upstream develop

Author: github-actions[bot]

.gitlab/ci/build_app.yml

@@ -99,9 +99,9 @@ app-android-apk:
 app-android-aab:
   extends: .app-eas-build
   script:
-    - npx eas-cli build --platform android --non-interactive --no-wait ${CI_COMMIT_TAG:+--auto-submit}
+    - npx eas-cli build --platform android --non-interactive --no-wait --auto-submit
 
 app-ios:
   extends: .app-eas-build
   script:
-    - npx eas-cli build --platform ios --non-interactive --no-wait ${CI_COMMIT_TAG:+--auto-submit}
+    - npx eas-cli build --platform ios --non-interactive --no-wait --auto-submit

apps/polycentric/app.config.ts

@@ -10,7 +10,7 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
   name: NAME,
   slug: 'polycentric',
   version: process.env.APP_VERSION ?? '0.0.1',
-  orientation: 'portrait',
+  orientation: 'default',
   icon: './src/common/assets/images/app-icons/android-icon-foreground.png',
   scheme: 'polycentric',
   web: {
@@ -23,10 +23,12 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
       light: './src/common/assets/images/app-icons/ios-icon-default.png',
       tinted: './src/common/assets/images/app-icons/ios-icon-monochrome.png',
     },
+    requireFullScreen: true,
     supportsTablet: true,
     bundleIdentifier: ID,
     infoPlist: {
       NSCameraUsageDescription: '$(PRODUCT_NAME) needs access to your Camera.',
+      ITSAppUsesNonExemptEncryption: false,
     },
     entitlements: {
       'aps-environment': 'production',
@@ -81,6 +83,12 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
     ],
     'expo-image',
     'expo-notifications',
+    [
+      'expo-screen-orientation',
+      {
+        initialOrientation: 'DEFAULT',
+      },
+    ],
   ],
   experiments: {
     typedRoutes: true,

apps/polycentric/app/_layout.tsx

@@ -33,7 +33,9 @@ function RootStack() {
           headerShown: false,
           fullScreenGestureEnabled: !isWeb,
           contentStyle: [theme.atoms.bg, Atoms.flex_1, Atoms.overflow_auto],
-          ...(isWeb ? { animation: 'none' as const } : {}),
+          ...(isWeb
+            ? { animation: 'none' as const }
+            : { orientation: 'portrait_up' }),
         }}
       >
         <Stack.Screen name="(tabs)" />
@@ -55,6 +57,17 @@ function RootStack() {
             contentStyle: { backgroundColor: 'transparent' },
           }}
         />
+        <Stack.Screen
+          name="image-viewer"
+          options={{
+            presentation: 'transparentModal',
+            animation: 'fade',
+            contentStyle: { backgroundColor: 'transparent' },
+            // Let just this screen rotate to landscape; the rest of the
+            // app stays portrait.
+            ...(isWeb ? {} : { orientation: 'all' as const }),
+          }}
+        />
       </Stack>
     </>
   );

apps/polycentric/app/image-viewer.tsx

@@ -0,0 +1 @@
+export { default } from '@/src/features/post/ImageViewer/ImageViewerScreen';

apps/polycentric/package.json

@@ -52,6 +52,7 @@
     "expo-linking": "~55.0.7",
     "expo-notifications": "~55.0.0",
     "expo-router": "~55.0.3",
+    "expo-screen-orientation": "~55.0.16",
     "expo-server": "~55.0.8",
     "expo-splash-screen": "~55.0.10",
     "expo-sqlite": "~55.0.15",

apps/polycentric/src/common/components/List.tsx

@@ -9,8 +9,10 @@ import {
 } from '@shopify/flash-list';
 import React, {
   cloneElement,
+  forwardRef,
   isValidElement,
   useEffect,
+  useImperativeHandle,
   useRef,
   useState,
 } from 'react';
@@ -43,22 +45,39 @@ export type ListProps<T> = FlashListProps<T> & {
     | undefined;
 };
 
-export function List<T extends PostData = PostData>(props: ListProps<T>) {
+/** Imperative handle exposed by `List` (and `FeedList`). */
+export type ListRef = { scrollToTop: () => void };
+
+export const List = forwardRef(function List<T extends PostData = PostData>(
+  props: ListProps<T>,
+  ref: React.Ref<ListRef>,
+) {
   if (isWeb) {
-    return <WebFeedViewer<T> {...props} />;
+    return <WebFeedViewer<T> {...props} listRef={ref} />;
   }
 
-  return <NativeList<T> {...props} />;
-}
+  return <NativeList<T> {...props} listRef={ref} />;
+}) as <T extends PostData = PostData>(
+  props: ListProps<T> & { ref?: React.Ref<ListRef> },
+) => React.ReactElement;
 
 function NativeList<T>({
   HeaderComponent,
   contentContainerStyle,
   refreshControl,
   onScroll: _ignoredOnScroll,
+  listRef,
   ...rest
-}: ListProps<T>) {
+}: ListProps<T> & { listRef?: React.Ref<ListRef> }) {
   const ref = useRef<FlashListRef<T>>(null);
+  useImperativeHandle(
+    listRef,
+    () => ({
+      scrollToTop: () =>
+        ref.current?.scrollToOffset({ offset: 0, animated: true }),
+    }),
+    [],
+  );
   const lastScrollY = useSharedValue(0);
   const headerTranslate = useSharedValue(0);
   const headerHeightShared = useSharedValue(0);
@@ -139,6 +158,7 @@ function NativeList<T>({
       ) : null}
 
       <AnimatedFlashList
+        ref={ref as React.Ref<FlashListRef<unknown>>}
         {...(rest as FlashListProps<unknown>)}
         refreshControl={adjustedRefreshControl}
         onScroll={onScroll}
@@ -166,8 +186,20 @@ function WebFeedViewer<T>({
   onEndReached,
   contentContainerStyle,
   stickyHeaderIndices,
-}: ListProps<T>) {
+  listRef,
+}: ListProps<T> & { listRef?: React.Ref<ListRef> }) {
   const sentinelRef = useRef<View>(null);
+  useImperativeHandle(
+    listRef,
+    () => ({
+      scrollToTop: () => {
+        if (typeof window !== 'undefined') {
+          window.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+      },
+    }),
+    [],
+  );
   const items = (data as readonly T[] | null | undefined) ?? [];
   const [visibleCount, setVisibleCount] = useState(WEB_INITIAL_VISIBLE);
 

apps/polycentric/src/common/lib/useOrientation.ts

@@ -0,0 +1,35 @@
+import * as ScreenOrientation from 'expo-screen-orientation';
+import { useEffect, useState } from 'react';
+import { Platform } from 'react-native';
+
+/**
+ * Tracks the device's current screen orientation
+ */
+export function useOrientation(): ScreenOrientation.Orientation {
+  const [orientation, setOrientation] = useState<ScreenOrientation.Orientation>(
+    ScreenOrientation.Orientation.PORTRAIT_UP,
+  );
+
+  useEffect(() => {
+    if (Platform.OS === 'web') return;
+
+    let active = true;
+    void ScreenOrientation.getOrientationAsync().then((current) => {
+      if (active) setOrientation(current);
+    });
+
+    const subscription = ScreenOrientation.addOrientationChangeListener(
+      (event) => {
+        console.log(event);
+        setOrientation(event.orientationInfo.orientation);
+      },
+    );
+
+    return () => {
+      active = false;
+      ScreenOrientation.removeOrientationChangeListener(subscription);
+    };
+  }, []);
+
+  return orientation;
+}

apps/polycentric/src/features/feed/ExploreScreen.tsx

@@ -13,8 +13,9 @@ import {
 } from '@/src/common/theme';
 import { isIOS, isWeb } from '@/src/common/util/platform';
 import { useFocusEffect } from 'expo-router';
-import { useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { Alert, Pressable, View } from 'react-native';
+import type { ListRef } from '@/src/common/components/List';
 import { ComposerInput } from '../composer';
 import FeedList from './FeedList';
 import { useExploreFeed } from './hooks/useExploreFeed';
@@ -72,12 +73,20 @@ export default function ExploreScreen() {
 
   const [enabled, setEnabled] = useState<boolean>(false);
   const feed = useExploreFeed({ enabled });
+  const listRef = useRef<ListRef>(null);
 
   useFocusEffect(() => {
     setEnabled(true);
   });
 
-  useFocusedRefresh(feed.refresh);
+  // Re-tapping the active tab scrolls to the top and refreshes.
+  const { refresh } = feed;
+  useFocusedRefresh(
+    useCallback(() => {
+      listRef.current?.scrollToTop();
+      refresh();
+    }, [refresh]),
+  );
 
   if (feed.error) {
     return (
@@ -101,7 +110,7 @@ export default function ExploreScreen() {
   return (
     <Screen>
       <Screen.PrimaryColumn>
-        <FeedList feed={feed} HeaderComponent={ListHeader} />
+        <FeedList ref={listRef} feed={feed} HeaderComponent={ListHeader} />
         {showComposeFab ? (
           <Fab
             onPress={openCompose}

apps/polycentric/src/features/feed/FeedList.tsx

@@ -1,7 +1,9 @@
+import { forwardRef } from 'react';
 import { ActivityIndicator, RefreshControl, View } from 'react-native';
 import {
   List,
   type ListProps,
+  type ListRef,
   type ListRenderItem,
 } from '../../common/components/List';
 import type { FeedHookResult } from './hooks/types';
@@ -25,19 +27,23 @@ const defaultRenderItem: ListRenderItem<PostData> = ({ item }) => (
   <Post post={item} />
 );
 
-export default function FeedList({
-  feed,
-  emptyMessage = 'No posts yet',
-  renderItem = defaultRenderItem,
-  keyExtractor = defaultKeyExtractor,
-  ...rest
-}: FeedListProps) {
+const FeedList = forwardRef<ListRef, FeedListProps>(function FeedList(
+  {
+    feed,
+    emptyMessage = 'No posts yet',
+    renderItem = defaultRenderItem,
+    keyExtractor = defaultKeyExtractor,
+    ...rest
+  },
+  ref,
+) {
   const { theme } = useTheme();
 
   const insets = useSafeAreaInsets();
 
   return (
     <List<PostData>
+      ref={ref}
       renderItem={renderItem}
       keyExtractor={keyExtractor}
       data={feed.items}
@@ -84,4 +90,6 @@ export default function FeedList({
       {...rest}
     />
   );
-}
+});
+
+export default FeedList;

apps/polycentric/src/features/feed/FeedScreen.tsx

@@ -9,8 +9,9 @@ import { Atoms } from '@/src/common/theme';
 import { isIOS, isWeb } from '@/src/common/util/platform';
 import { ComposerInput } from '@/src/features/composer';
 import { useFocusEffect } from 'expo-router';
-import { useCallback, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { View } from 'react-native';
+import type { ListRef } from '@/src/common/components/List';
 import FeedList from './FeedList';
 import { useFollowingFeed } from './hooks/useFollowingFeed';
 
@@ -29,14 +30,22 @@ export default function FeedScreen() {
 
   const [enabled, setEnabled] = useState<boolean>(false);
   const feed = useFollowingFeed({ enabled });
+  const listRef = useRef<ListRef>(null);
 
   useFocusEffect(
     useCallback(() => {
       setEnabled(true);
     }, [setEnabled]),
   );
 
-  useFocusedRefresh(feed.refresh);
+  // Re-tapping the active tab scrolls to the top and refreshes.
+  const { refresh } = feed;
+  useFocusedRefresh(
+    useCallback(() => {
+      listRef.current?.scrollToTop();
+      refresh();
+    }, [refresh]),
+  );
 
   if (feed.error) {
     return (
@@ -60,7 +69,7 @@ export default function FeedScreen() {
   return (
     <Screen>
       <Screen.PrimaryColumn>
-        <FeedList feed={feed} HeaderComponent={ListHeader} />
+        <FeedList ref={listRef} feed={feed} HeaderComponent={ListHeader} />
         {showComposeFab ? (
           <Fab
             onPress={openCompose}