@ethora/chat-component-rn 26.8.3 → 26.8.5

package/src/components/MainComponents/ChatWrapper.tsx

@@ -1,6 +1,7 @@
 import React, {FC, useEffect, useMemo, useRef, useState} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import ChatRoom from './ChatRoom';
+import {RoomStack, RoomStackHandle} from './RoomStack';
 import {
   setActiveModal,
   setConfig,
@@ -37,7 +38,7 @@ import {ModalWrapper} from '../Modals/ModalWrapper/ModalWrapper';
 import {useChatSettingState} from '../../hooks/useChatSettingState';
 import {useTheme} from '../../hooks/useTheme';
 import { usePendingNotification } from '../../hooks/usePendingNotification';
-import {DeviceEventEmitter, Pressable, Text, View} from 'react-native';
+import {DeviceEventEmitter, Keyboard, Pressable, Text, View} from 'react-native';
 import {pushLog as devPushLog} from '../../utils/devLogger';
 import {normalizeRoomJid} from '../../helpers/normalizeRoomJid';
 import {buildSeedRoom} from '../../helpers/buildSeedRoom';
@@ -70,6 +71,7 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
 
   usePendingNotification();
   const theme = useTheme();
+  const roomStackRef = useRef<RoomStackHandle>(null);
 
   const [isInited, setInited] = useState(false);
   const [showModal, setShowModal] = useState(false);
@@ -123,6 +125,14 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
     dispatch(setDeleteModal({isDeleteModal: false}));
   };
 
+  // A modal (chat profile, user profile, ...) covers the chat, so the
+  // composer's keyboard must not stay open on top of it.
+  useEffect(() => {
+    if (activeModal) {
+      Keyboard.dismiss();
+    }
+  }, [activeModal]);
+
   // A host drives the reader's language from OUTSIDE the component through
   // `config.translates.readerLocale` (their own switcher, or the testbed's
   // Setup tab). Nothing was syncing it into `langSource`, so pinning it only
@@ -425,6 +435,12 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
   // the list. With `roomJID` or `disableRooms`, skip the list entirely.
   const showRoomList =
     !config?.disableRooms && !roomJID && !activeRoomJID;
+  // List mode: the room is pushed over the list and can be swiped back
+  // (RoomStack). With `roomJID` / `disableRooms` there is no list to return to.
+  const listMode = !config?.disableRooms && !roomJID;
+  const backToList = () => {
+    dispatch(setCurrentRoom({ roomJID: '' }));
+  };
 
   return (
     <>
@@ -489,10 +505,35 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
                 Android. Wraps only the chat area — the global Modal /
                 ModalWrapper below stay above it. */}
             <InteractionsOverlayProvider>
-              {showRoomList ? (
-                <RoomList
-                  chats={Object.values(rooms)}
-                  onRoomClick={handleChangeChat}
+              {listMode ? (
+                <RoomStack
+                  ref={roomStackRef}
+                  onBack={backToList}
+                  roomBackground={theme.chatBackground}
+                  // An open modal covers the room: back must not pull the
+                  // room out from under it.
+                  hardwareBack={!activeModal}
+                  list={
+                    <RoomList
+                      chats={Object.values(rooms)}
+                      onRoomClick={handleChangeChat}
+                    />
+                  }
+                  room={
+                    showRoomList ? null : (
+                      <ChatWrapperBox
+                        style={{
+                          ...MainComponentStyles,
+                        }}>
+                        <ChatRoom
+                          CustomMessageComponent={
+                            CustomMessageComponent || Message
+                          }
+                          handleBackClick={() => roomStackRef.current?.pop()}
+                        />
+                      </ChatWrapperBox>
+                    )
+                  }
                 />
               ) : (
                 <ChatWrapperBox
@@ -501,13 +542,6 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
                   }}>
                   <ChatRoom
                     CustomMessageComponent={CustomMessageComponent || Message}
-                    handleBackClick={
-                      roomJID || config?.disableRooms
-                        ? undefined
-                        : () => {
-                            dispatch(setCurrentRoom({ roomJID: '' }));
-                          }
-                    }
                   />
                 </ChatWrapperBox>
               )}

package/src/components/MainComponents/KeyboardInputDock.tsx

@@ -0,0 +1,47 @@
+import React, { FC } from 'react';
+import { ViewProps } from 'react-native';
+import Animated, {
+  interpolate,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+import { useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller';
+
+interface KeyboardInputDockProps extends ViewProps {
+  // Bottom padding while the keyboard is closed (the safe-area inset).
+  closedPadding: number;
+  // Bottom padding while the keyboard is open.
+  openedPadding: number;
+}
+
+/**
+ * Input dock for the KeyboardAvoidingView strategy on iOS. The dock's
+ * safe-area padding is only needed while the keyboard is closed; with the
+ * keyboard open it collapses in sync with the keyboard animation, so the
+ * composer sits right on top of the keyboard instead of leaving a band of
+ * dock (or chat background) between them.
+ */
+export const KeyboardInputDock: FC<KeyboardInputDockProps> = ({
+  closedPadding,
+  openedPadding,
+  style,
+  children,
+  ...rest
+}) => {
+  const { progress } = useReanimatedKeyboardAnimation();
+  const animatedStyle = useAnimatedStyle(
+    () => ({
+      paddingBottom: interpolate(
+        progress.value,
+        [0, 1],
+        [closedPadding, openedPadding]
+      ),
+    }),
+    [closedPadding, openedPadding]
+  );
+
+  return (
+    <Animated.View {...rest} style={[style, animatedStyle]}>
+      {children}
+    </Animated.View>
+  );
+};

package/src/components/MainComponents/ReduxWrapper.tsx

@@ -1,11 +1,18 @@
-import React, {useMemo} from 'react';
-import {Provider, useDispatch} from 'react-redux';
+import React, {useEffect, useMemo, useRef} from 'react';
+import {useColorScheme} from 'react-native';
+import {Provider, useDispatch, useSelector} from 'react-redux';
 import {KeyboardProvider} from 'react-native-keyboard-controller';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {ThemeProvider} from 'styled-components/native';
-import {resolveTheme} from '../../theme/theme';
+import {applyThemePreference, resolveTheme} from '../../theme/theme';
 import {store} from '../../roomStore';
-import {setConfig} from '../../roomStore/chatSettingsSlice';
+import type {RootState} from '../../roomStore';
+import {
+  setConfig,
+  setPushEnabled,
+  setThemePreference,
+} from '../../roomStore/chatSettingsSlice';
+import {loadPreferences} from '../../helpers/preferencesStorage';
 import {ConfigUser, IConfig, MessageProps} from '../../types/types';
 import {XmppProvider} from '../../context/xmppProvider';
 import {MessageNotificationProvider} from '../../context/MessageNotificationContext';
@@ -53,6 +60,42 @@ const ConfigEnabler: React.FC<{config?: IConfig}> = ({config}) => {
   return null;
 };
 
+const ChatThemeProvider: React.FC<{config?: IConfig; children: React.ReactNode}> = ({
+  config,
+  children,
+}) => {
+  const dispatch = useDispatch();
+  const storeConfig = useSelector((s: RootState) => s.chatSettingStore.config);
+  const preference = useSelector(
+    (s: RootState) => s.chatSettingStore.themePreference,
+  );
+  const systemDark = useColorScheme() === 'dark';
+  const effective = applyThemePreference(storeConfig ?? config, preference);
+  const theme = useMemo(
+    () => resolveTheme(effective, systemDark),
+    [effective, systemDark],
+  );
+
+  const hydrated = useRef(false);
+  useEffect(() => {
+    if (hydrated.current) {return;}
+    hydrated.current = true;
+    loadPreferences().then((prefs) => {
+      if (prefs.theme) {dispatch(setThemePreference(prefs.theme));}
+      if (typeof prefs.pushEnabled === 'boolean') {
+        dispatch(setPushEnabled(prefs.pushEnabled));
+      }
+    });
+  }, [dispatch]);
+
+  const onThemeChange = config?.eventHandlers?.onThemeChange;
+  useEffect(() => {
+    if (preference && onThemeChange) {onThemeChange(preference, theme.dark);}
+  }, [preference, theme.dark, onThemeChange]);
+
+  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+};
+
 export const ReduxWrapper: React.FC<ChatWrapperProps> = React.memo(
   ({...props}) => {
     const memoizedConfig = useMemo(() => {
@@ -70,13 +113,11 @@ export const ReduxWrapper: React.FC<ChatWrapperProps> = React.memo(
     // KeyboardAvoidingView under the same flag).
     const ownKeyboardHandling = !memoizedConfig?.disableKeyboardAvoidingView;
 
-    // Light/dark palette (config.dark + config.darkColors). Styled
-    // components read it via `({ theme }) => theme.surface`; plain RN
-    // styles via the `useTheme()` hook.
-    const theme = useMemo(() => resolveTheme(memoizedConfig), [memoizedConfig]);
-
+    // Light/dark palette (config.dark + config.darkColors + the Settings
+    // choice). Styled components read it via `({ theme }) => theme.surface`;
+    // plain RN styles via the `useTheme()` hook.
     const tree = (
-      <ThemeProvider theme={theme}>
+      <ChatThemeProvider config={memoizedConfig}>
         <XmppProvider config={memoizedConfig} isVisible={props.isVisible}>
           <ToastProvider>
             <MessageNotificationProvider config={memoizedConfig}>
@@ -84,7 +125,7 @@ export const ReduxWrapper: React.FC<ChatWrapperProps> = React.memo(
             </MessageNotificationProvider>
           </ToastProvider>
         </XmppProvider>
-      </ThemeProvider>
+      </ChatThemeProvider>
     );
 
     return (

package/src/components/MainComponents/RoomStack.tsx

@@ -0,0 +1,236 @@
+import React, {
+  forwardRef,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import {
+  BackHandler,
+  Keyboard,
+  LayoutChangeEvent,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+} from 'react-native';
+import Animated, {
+  Easing,
+  interpolate,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+
+// Width of the left-edge strip that starts the back swipe.
+export const EDGE_WIDTH = 28;
+// Released past this share of the width (or faster than the velocity
+// below), the swipe completes; otherwise the room settles back.
+export const COMPLETE_DISTANCE = 0.35;
+export const COMPLETE_VELOCITY = 600;
+// How far the list underneath is shifted left while fully covered.
+const LIST_PARALLAX = 0.3;
+export const LIST_DIM = 0.25;
+
+export const PUSH = { duration: 320, easing: Easing.bezier(0.2, 0.8, 0.2, 1) };
+export const POP = { duration: 240, easing: Easing.out(Easing.cubic) };
+
+export interface RoomStackHandle {
+  /** Slide the room out, then call `onBack`. */
+  pop: () => void;
+}
+
+interface RoomStackProps {
+  /** The room list — stays mounted under the room so it is there to reveal. */
+  list: ReactNode;
+  /** The open room, or null while only the list is shown. */
+  room: ReactNode | null;
+  /** Called once the room has left the screen (swipe, back button, pop()). */
+  onBack: () => void;
+  /** Background behind the room's content. */
+  roomBackground?: string;
+  /** Android hardware back / system back gesture returns to the list. */
+  hardwareBack?: boolean;
+}
+
+/**
+ * Two-layer stack for the list → room navigation: the room slides in over
+ * the list, and a swipe from the left edge drags it back out, following the
+ * finger, with the list parallaxing in underneath (the iOS navigation feel).
+ */
+export const RoomStack = forwardRef<RoomStackHandle, RoomStackProps>(
+  ({ list, room, onBack, roomBackground, hardwareBack = true }, ref) => {
+    const { width: windowWidth } = useWindowDimensions();
+    const width = useSharedValue(windowWidth);
+    const hasRoom = !!room;
+    // Room's horizontal offset: 0 = covering the list, `width` = off-screen.
+    // A room already open on the first render is shown in place.
+    const x = useSharedValue(hasRoom ? 0 : windowWidth);
+    const closing = useSharedValue(false);
+
+    const isFirstRender = useRef(true);
+    useEffect(() => {
+      if (isFirstRender.current) {
+        isFirstRender.current = false;
+        return;
+      }
+      closing.value = false;
+      if (hasRoom) {
+        x.value = width.value;
+        x.value = withTiming(0, PUSH);
+      } else {
+        x.value = width.value;
+      }
+    }, [hasRoom]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const onBackRef = useRef(onBack);
+    onBackRef.current = onBack;
+    const finish = useCallback(() => onBackRef.current(), []);
+
+    const pop = useCallback(() => {
+      if (closing.value) {
+        return;
+      }
+      closing.value = true;
+      Keyboard.dismiss();
+      x.value = withTiming(width.value, POP, finished => {
+        if (finished) {
+          runOnJS(finish)();
+        }
+      });
+    }, [finish]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    useImperativeHandle(ref, () => ({ pop }), [pop]);
+
+    useEffect(() => {
+      if (!hasRoom || !hardwareBack) {
+        return undefined;
+      }
+      const sub = BackHandler.addEventListener('hardwareBackPress', () => {
+        pop();
+        return true;
+      });
+      return () => sub.remove();
+    }, [hasRoom, hardwareBack, pop]);
+
+    const dismissKeyboard = useCallback(() => Keyboard.dismiss(), []);
+
+    const swipeBack = Gesture.Pan()
+      .hitSlop({ left: 0, width: EDGE_WIDTH })
+      .activeOffsetX(12)
+      .failOffsetY([-16, 16])
+      .onStart(() => {
+        runOnJS(dismissKeyboard)();
+      })
+      .onUpdate(e => {
+        if (closing.value) {
+          return;
+        }
+        x.value = Math.min(Math.max(e.translationX, 0), width.value);
+      })
+      .onEnd(e => {
+        if (closing.value) {
+          return;
+        }
+        const complete =
+          x.value > width.value * COMPLETE_DISTANCE ||
+          e.velocityX > COMPLETE_VELOCITY;
+        if (complete) {
+          closing.value = true;
+          x.value = withTiming(width.value, POP, finished => {
+            if (finished) {
+              runOnJS(finish)();
+            }
+          });
+        } else {
+          x.value = withTiming(0, POP);
+        }
+      });
+
+    const onLayout = useCallback((e: LayoutChangeEvent) => {
+      const next = e.nativeEvent.layout.width;
+      if (next > 0 && next !== width.value) {
+        // Keep an off-screen room off-screen when the container resizes.
+        if (x.value === width.value) {
+          x.value = next;
+        }
+        width.value = next;
+      }
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const roomStyle = useAnimatedStyle(() => ({
+      transform: [{ translateX: x.value }],
+    }));
+    // 1 while the room fully covers the list, 0 once it is gone.
+    const listStyle = useAnimatedStyle(() => {
+      const covered = 1 - Math.min(Math.max(x.value / width.value, 0), 1);
+      return {
+        transform: [{ translateX: -width.value * LIST_PARALLAX * covered }],
+      };
+    });
+    const dimStyle = useAnimatedStyle(() => ({
+      opacity: interpolate(x.value, [0, width.value], [LIST_DIM, 0]),
+    }));
+
+    return (
+      <View style={styles.container} onLayout={onLayout}>
+        <Animated.View
+          style={[styles.layer, listStyle]}
+          pointerEvents={hasRoom ? 'none' : 'auto'}
+          accessibilityElementsHidden={hasRoom}
+          importantForAccessibility={hasRoom ? 'no-hide-descendants' : 'auto'}
+        >
+          {list}
+        </Animated.View>
+        {hasRoom && (
+          <>
+            <Animated.View
+              pointerEvents="none"
+              style={[styles.layer, styles.dim, dimStyle]}
+            />
+            <GestureDetector gesture={swipeBack}>
+              <Animated.View
+                style={[
+                  styles.layer,
+                  styles.room,
+                  { backgroundColor: roomBackground },
+                  roomStyle,
+                ]}
+              >
+                {room}
+              </Animated.View>
+            </GestureDetector>
+          </>
+        )}
+      </View>
+    );
+  }
+);
+
+RoomStack.displayName = 'RoomStack';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+    overflow: 'hidden',
+  },
+  layer: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  },
+  dim: {
+    backgroundColor: '#000',
+  },
+  room: {
+    shadowColor: '#000',
+    shadowOffset: { width: -4, height: 0 },
+    shadowOpacity: 0.18,
+    shadowRadius: 12,
+  },
+});

package/src/components/Modals/ChatProfileModal/ChatProfileModal.tsx

@@ -510,6 +510,10 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
         ]}
         onLayout={(e) => setViewportHeight(e.nativeEvent.layout.height)}
         showsVerticalScrollIndicator={false}
+        // Magnet: a header released part-way settles fully open or fully
+        // collapsed; past the collapsed point the content scrolls freely.
+        snapToOffsets={[0, collapseDistance]}
+        snapToEnd={false}
         keyboardShouldPersistTaps="handled"
         scrollEventThrottle={16}
         onScroll={Animated.event(

package/src/components/Modals/Modal/Modal.tsx

@@ -2,9 +2,13 @@ import React from 'react';
 import { ModalBackground } from '../styledModalComponents';
 import { ModalType } from '../../../types/types';
 import { useDispatch } from 'react-redux';
-import { setActiveModal } from '../../../roomStore/chatSettingsSlice';
+import {
+  setActiveModal,
+  setSelectedUser,
+} from '../../../roomStore/chatSettingsSlice';
 import { MODAL_TYPES } from '../../../helpers/constants/MODAL_TYPES';
 import { MODAL_COMPONENTS } from '../../../helpers/constants/MODAL_COMPONENTS';
+import { SwipeBackLayer } from './SwipeBackLayer';
 
 interface ModalProps {
   children?: React.ReactNode;
@@ -44,6 +48,33 @@ const Modal: React.FC<ModalProps> = ({ children, modal, setOpenModal }) => {
     return <>{renderModalContent()}{children}</>;
   }
 
+  // The profile screens are full-screen pages rather than dialogs: they
+  // slide in and can be swiped back from the left edge, like a room. One
+  // layer serves both, so going chat profile → member profile swaps the
+  // page in place instead of replaying the entrance.
+  if (modal === MODAL_TYPES.PROFILE || modal === MODAL_TYPES.CHAT_PROFILE) {
+    const ProfileComponent = MODAL_COMPONENTS[modal];
+    if (ProfileComponent) {
+      return (
+        <SwipeBackLayer
+          onClose={() => {
+            // The viewed member is cleared only once the page is gone, so
+            // it doesn't flip to the user's own profile mid-slide.
+            dispatch(setSelectedUser(undefined));
+            setOpenModal();
+          }}
+        >
+          {(close) => (
+            <>
+              <ProfileComponent handleCloseModal={close} />
+              {children}
+            </>
+          )}
+        </SwipeBackLayer>
+      );
+    }
+  }
+
   return (
     modal && (
       <ModalBackground